diff --git a/blazor/treegrid/columns/column-chooser.md b/blazor/treegrid/columns/column-chooser.md index f9c8cca2bf..da93e0b26c 100644 --- a/blazor/treegrid/columns/column-chooser.md +++ b/blazor/treegrid/columns/column-chooser.md @@ -161,6 +161,85 @@ public class TreeData N> The column names in column chooser can be hidden by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) property as false. +## Text wrapping in column chooser + +The Syncfusion® Blazor TreeGrid includes a enhancement that improves readability within the column chooser dialog by allowing long column names to wrap across multiple lines. This behavior is enabled by setting the [`TreeGridColumnChooserSettings.AllowTextWrap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowTextWrap) property to **true**. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using TreeGridComponent.Data +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + + +@code { + private SfTreeGrid TreeGrid; + public string[] ToolbarItems = new string[] { "ColumnChooser" }; + public List Shipments { get; set; } + + protected override void OnInitialized() + { + this.Shipments = Shipment.GetShipments().ToList(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="Shipment.cs" %} + +namespace TreeGridComponent.Data { + public class Shipment + { + public string ShipmentId { get; set; } + public string Description { get; set; } + public string Origin { get; set; } + public string Destination { get; set; } + public double? Weight { get; set; } // Weight in pounds= + public DateTime? DeliveryDate { get; set; } + public string Status { get; set; } + public string ParentId { get; set; } + + public static List GetShipments() + { + var shipments = new List + { + // Parent 1: North America Shipment + new Shipment { ShipmentId = "SH001", Description = "North America Shipment", Origin = null, Destination = null, Weight = null, DeliveryDate = null, Status = null, ParentId = null }, + new Shipment { ShipmentId = "SH002", Description = "Dell XPS 13 Laptops", Origin = "Los Angeles", Destination = "Houston", Weight = 132.28, DeliveryDate = new DateTime(2025, 10, 20), Status = "In Transit", ParentId = "SH001" }, // 50 laptops at ~2.65 lbs each + new Shipment { ShipmentId = "SH003", Description = "Samsung QLED Monitors", Origin = "New York", Destination = "Houston", Weight = 1102.31, DeliveryDate = new DateTime(2025, 10, 21), Status = "In Transit", ParentId = "SH001" }, // 50 monitors at ~22 lbs each + new Shipment { ShipmentId = "SH004", Description = "Logitech Keyboards", Origin = "San Francisco", Destination = "Miami", Weight = 99.21, DeliveryDate = new DateTime(2025, 10, 22), Status = "Pending", ParentId = "SH001" }, // 50 keyboards at ~1.98 lbs each + new Shipment { ShipmentId = "SH005", Description = "Logitech MX Master Mice", Origin = "Boston", Destination = "Seattle", Weight = 15.43, DeliveryDate = new DateTime(2025, 10, 23), Status = "Pending", ParentId = "SH001" }, // 50 mice at ~0.31 lbs each + new Shipment { ShipmentId = "SH006", Description = "Anker USB-C Cables", Origin = "Dallas", Destination = "Denver", Weight = 11.02, DeliveryDate = new DateTime(2025, 10, 24), Status = "Pending", ParentId = "SH001" }, // 100 cables at ~0.11 lbs each + new Shipment { ShipmentId = "SH007", Description = "Bose Bluetooth Speakers", Origin = "Atlanta", Destination = "Phoenix", Weight = 220.46, DeliveryDate = new DateTime(2025, 10, 25), Status = "Pending", ParentId = "SH001" }, // 50 speakers at ~4.41 lbs each + // Parent 2: Europe Shipment + new Shipment { ShipmentId = "SH008", Description = "Europe Shipment", Origin = null, Destination = null, Weight = null, DeliveryDate = null, Status = null, ParentId = null }, + new Shipment { ShipmentId = "SH009", Description = "iPhone 14 Smartphones", Origin = "Munich", Destination = "Madrid", Weight = 30.42, DeliveryDate = new DateTime(2025, 10, 28), Status = "In Transit", ParentId = "SH008" }, // 50 smartphones at ~0.61 lbs each + new Shipment { ShipmentId = "SH010", Description = "Samsung Galaxy Tab S9 Tablets", Origin = "Hamburg", Destination = "Rome", Weight = 55.56, DeliveryDate = new DateTime(2025, 10, 29), Status = "In Transit", ParentId = "SH008" }, // 50 tablets at ~1.11 lbs each + new Shipment { ShipmentId = "SH011", Description = "Jabra Elite Headsets", Origin = "Frankfurt", Destination = "Paris", Weight = 33.07, DeliveryDate = new DateTime(2025, 10, 30), Status = "Delivered", ParentId = "SH008" }, // 50 headsets at ~0.66 lbs each + new Shipment { ShipmentId = "SH012", Description = "Anker PowerPort Chargers", Origin = "Cologne", Destination = "Amsterdam", Weight = 22.05, DeliveryDate = new DateTime(2025, 11, 1), Status = "Pending", ParentId = "SH008" }, // 50 chargers at ~0.44 lbs each + new Shipment { ShipmentId = "SH013", Description = "Canon EOS R Cameras", Origin = "Stuttgart", Destination = "Lisbon", Weight = 72.75, DeliveryDate = new DateTime(2025, 11, 2), Status = "Pending", ParentId = "SH008" }, // 50 cameras at ~1.46 lbs each + new Shipment { ShipmentId = "SH014", Description = "Nikon 50mm Lenses", Origin = "Dresden", Destination = "Vienna", Weight = 46.30, DeliveryDate = new DateTime(2025, 11, 3), Status = "Pending", ParentId = "SH008" }, // 50 lenses at ~0.93 lbs each + }; + return shipments; + } + } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVeCDLJCycwyswR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Template support in column chooser Template can be rendered in column chooser of tree grid by customizing the column chooser using **Template** and **FooterTemplate** of the [TreeGridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserSettings.html) Component. diff --git a/blazor/treegrid/filtering/filtering.md b/blazor/treegrid/filtering/filtering.md index 4eb9e0bd46..40b9f096bb 100644 --- a/blazor/treegrid/filtering/filtering.md +++ b/blazor/treegrid/filtering/filtering.md @@ -414,3 +414,244 @@ namespace TreeGridComponent.Data { {% endtabs %} + +## Filtering with case sensitivity + +The Syncfusion® Blazor TreeGrid filtering functionality can be configured to consider or ignore character casing. By default, filtering is not case-sensitive, meaning matches are found regardless of character case (e.g., "Task" and "task" are treated the same). Case-sensitive filtering is enabled by setting the [`TreeGridFilterSettings.EnableCaseSensitivity`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableCaseSensitivity) property to **true**. + +The following example demonstrates configuration of the `EnableCaseSensitivity` property within `TreeGridFilterSettings`: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using TreeGridComponent.Data +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +
+ + + + + + + + + + + +
+@code{ + private List TreeData = new(); + public SfTreeGrid TreeGrid; + protected override void OnInitialized() + { + TreeData = TreeTask.GetTreeTasks(); + } + +} + +{% endhighlight %} +{% highlight c# %} + +namespace TreeGridComponent.Data { + + public class TreeTask + { + public int TaskID { get; set; } + public string TaskName { get; set; } = string.Empty; + public string ResourceName { get; set; } = string.Empty; + public string City { get; set; } = string.Empty; + public DateTime StartDate { get; set; } + public int Duration { get; set; } + public int? ParentID { get; set; } + public static List GetTreeTasks() => new() + { + new TreeTask + { + TaskID = 1, + TaskName = "Market Analysis", + ResourceName = "José Álvarez", + City = "Sevilla", + StartDate = new DateTime(2024, 1, 2), + Duration = 5, + ParentID = null + }, + new TreeTask + { + TaskID = 2, + TaskName = "Competitor Review", + ResourceName = "Zoë Brontë", + City = "São Paulo", + StartDate = new DateTime(2024, 1, 3), + Duration = 3, + ParentID = 1 + }, + new TreeTask + { + TaskID = 3, + TaskName = "Focus Group", + ResourceName = "François Dœuf", + City = "Montréal", + StartDate = new DateTime(2024, 1, 4), + Duration = 2, + ParentID = 1 + }, + new TreeTask + { + TaskID = 4, + TaskName = "Product Design", + ResourceName = "Mårten Šedý", + City = "Göteborg", + StartDate = new DateTime(2024, 1, 5), + Duration = 6, + ParentID = null + }, + new TreeTask + { + TaskID = 5, + TaskName = "UX Workshop", + ResourceName = "Anaïs Löhn", + City = "München", + StartDate = new DateTime(2024, 1, 6), + Duration = 4, + ParentID = 4 + }, + new TreeTask + { + TaskID = 6, + TaskName = "Prototype Testing", + ResourceName = "Renée Faßbinder", + City = "Zürich", + StartDate = new DateTime(2024, 1, 8), + Duration = 3, + ParentID = 4 + } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVeWhWXTjGvORab?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Filtering with ignore accent + +The Syncfusion® Blazor TreeGrid filtering functionality can be configured to ignore diacritic characters or accents. By default, filtering is accent-sensitive, requiring exact matches (e.g., "José" vs. "Jose"). Accent-insensitive filtering is enabled by setting the [`TreeGridFilterSettings.IgnoreAccent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IgnoreAccent) property to **true**. + +The following example demonstrates configuration of the `IgnoreAccent` property within `TreeGridFilterSettings`: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using TreeGridComponent.Data +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +
+ < + + + + + + + + + + +
+@code{ + private List TreeData = new(); + public SfTreeGrid TreeGrid; + protected override void OnInitialized() + { + TreeData = TreeTask.GetTreeTasks(); + } +} + +{% endhighlight %} +{% highlight c# %} + +namespace TreeGridComponent.Data { + + public class TreeTask + { + public int TaskID { get; set; } + public string TaskName { get; set; } = string.Empty; + public string ResourceName { get; set; } = string.Empty; + public string City { get; set; } = string.Empty; + public DateTime StartDate { get; set; } + public int Duration { get; set; } + public int? ParentID { get; set; } + public static List GetTreeTasks() => new() + { + new TreeTask + { + TaskID = 1, + TaskName = "Market Analysis", + ResourceName = "José Álvarez", + City = "Sevilla", + StartDate = new DateTime(2024, 1, 2), + Duration = 5, + ParentID = null + }, + new TreeTask + { + TaskID = 2, + TaskName = "Competitor Review", + ResourceName = "Zoë Brontë", + City = "São Paulo", + StartDate = new DateTime(2024, 1, 3), + Duration = 3, + ParentID = 1 + }, + new TreeTask + { + TaskID = 3, + TaskName = "Focus Group", + ResourceName = "François Dœuf", + City = "Montréal", + StartDate = new DateTime(2024, 1, 4), + Duration = 2, + ParentID = 1 + }, + new TreeTask + { + TaskID = 4, + TaskName = "Product Design", + ResourceName = "Mårten Šedý", + City = "Göteborg", + StartDate = new DateTime(2024, 1, 5), + Duration = 6, + ParentID = null + }, + new TreeTask + { + TaskID = 5, + TaskName = "UX Workshop", + ResourceName = "Anaïs Löhn", + City = "München", + StartDate = new DateTime(2024, 1, 6), + Duration = 4, + ParentID = 4 + }, + new TreeTask + { + TaskID = 6, + TaskName = "Prototype Testing", + ResourceName = "Renée Faßbinder", + City = "Zürich", + StartDate = new DateTime(2024, 1, 8), + Duration = 3, + ParentID = 4 + } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLICBWNzMjzIsMp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/treegrid/paging.md b/blazor/treegrid/paging.md index b24da06efe..3f081345b5 100644 --- a/blazor/treegrid/paging.md +++ b/blazor/treegrid/paging.md @@ -84,10 +84,12 @@ N> Better performance can be achieved by using tree grid paging to fetch only a ## Page size mode -Two behaviors are available in Tree Grid paging to display certain number of records in a current page. Following are the two types of [PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property of [TreeGridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html). +## Page size mode + +The [`PageSizeMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property of [`TreeGridPageSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html) defines two behaviors in TreeGrid paging to display a specific number of records on the current page. -* **All** : The number of records in a page is based on [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSize) property. -* **Root** : This is the default mode. The number of root nodes or the 0th level records to be displayed per page is based on [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSize) property. With [PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property as **Root**, only the root level or the 0th level records are considered in records count. +* **All** : Page size is calculated using the entire hierarchy, including both root and child records. +* **Root** : This is the default mode. The number of root nodes or the **0th-level** records to be displayed per page is based on [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSize) property. With `PageSizeMode` property as **Root**, only the root level or the 0th level records are considered in records count. N> The **ALL** mode of **PageSizeMode** is not supported with remote data binding in the Tree Grid. diff --git a/blazor/treegrid/searching.md b/blazor/treegrid/searching.md index 220a9be6a3..11c3680412 100644 --- a/blazor/treegrid/searching.md +++ b/blazor/treegrid/searching.md @@ -309,3 +309,252 @@ namespace TreeGridComponent.Data { {% endhighlight %} {% endtabs %} + +## Searching with case sensitivity + +The Syncfusion® Blazor TreeGrid search functionality can ignore character casing for enhanced search accuracy. By default, searches are case-sensitive, requiring exact matches (e.g., "Task" vs. "task"). Case-insensitive search is enabled by setting the [`TreeGridSearchSettings.IgnoreCase`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSearchSettings_IgnoreCase) property to **true**. + +The following example demonstrates configuration of the `IgnoreCase` property within `TreeGridSearchSettings`: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using TreeGridComponent.Data +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +
+ + + + + + + + + + + + +
+@code{ + private List TreeData = new(); + public SfTreeGrid TreeGrid; + protected override void OnInitialized() + { + TreeData = TreeTask.GetTreeTasks(); + } + +} + +{% endhighlight %} +{% highlight c# %} + +namespace TreeGridComponent.Data { + + public class TreeTask + { + public int TaskID { get; set; } + public string TaskName { get; set; } = string.Empty; + public string ResourceName { get; set; } = string.Empty; + public string City { get; set; } = string.Empty; + public DateTime StartDate { get; set; } + public int Duration { get; set; } + public int? ParentID { get; set; } + public static List GetTreeTasks() => new() + { + new TreeTask + { + TaskID = 1, + TaskName = "Market Analysis", + ResourceName = "José Álvarez", + City = "Sevilla", + StartDate = new DateTime(2024, 1, 2), + Duration = 5, + ParentID = null + }, + new TreeTask + { + TaskID = 2, + TaskName = "Competitor Review", + ResourceName = "Zoë Brontë", + City = "São Paulo", + StartDate = new DateTime(2024, 1, 3), + Duration = 3, + ParentID = 1 + }, + new TreeTask + { + TaskID = 3, + TaskName = "Focus Group", + ResourceName = "François Dœuf", + City = "Montréal", + StartDate = new DateTime(2024, 1, 4), + Duration = 2, + ParentID = 1 + }, + new TreeTask + { + TaskID = 4, + TaskName = "Product Design", + ResourceName = "Mårten Šedý", + City = "Göteborg", + StartDate = new DateTime(2024, 1, 5), + Duration = 6, + ParentID = null + }, + new TreeTask + { + TaskID = 5, + TaskName = "UX Workshop", + ResourceName = "Anaïs Löhn", + City = "München", + StartDate = new DateTime(2024, 1, 6), + Duration = 4, + ParentID = 4 + }, + new TreeTask + { + TaskID = 6, + TaskName = "Prototype Testing", + ResourceName = "Renée Faßbinder", + City = "Zürich", + StartDate = new DateTime(2024, 1, 8), + Duration = 3, + ParentID = 4 + } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLIMrWjKvpFqzBK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Searching with ignore accent + +The Syncfusion® Blazor TreeGrid search functionality can ignore diacritic characters or accents for enhanced search accuracy. By default, searches are accent-sensitive, requiring exact matches (e.g., "José" vs. "Jose"). Accent-insensitive search is enabled by setting the [`TreeGridSearchSettings.IgnoreAccent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSearchSettings_IgnoreAccent) property to **true**. + +The following example demonstrates configuration of the `IgnoreAccent` property within `TreeGridSearchSettings`: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using TreeGridComponent.Data +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +
+ + + + + + + + + + + + +
+@code{ + private List TreeData = new(); + public SfTreeGrid TreeGrid; + protected override void OnInitialized() + { + TreeData = TreeTask.GetTreeTasks(); + } + +} + +{% endhighlight %} +{% highlight c# %} + +namespace TreeGridComponent.Data { + + public class TreeTask + { + public int TaskID { get; set; } + public string TaskName { get; set; } = string.Empty; + public string ResourceName { get; set; } = string.Empty; + public string City { get; set; } = string.Empty; + public DateTime StartDate { get; set; } + public int Duration { get; set; } + public int? ParentID { get; set; } + public static List GetTreeTasks() => new() + { + new TreeTask + { + TaskID = 1, + TaskName = "Market Analysis", + ResourceName = "José Álvarez", + City = "Sevilla", + StartDate = new DateTime(2024, 1, 2), + Duration = 5, + ParentID = null + }, + new TreeTask + { + TaskID = 2, + TaskName = "Competitor Review", + ResourceName = "Zoë Brontë", + City = "São Paulo", + StartDate = new DateTime(2024, 1, 3), + Duration = 3, + ParentID = 1 + }, + new TreeTask + { + TaskID = 3, + TaskName = "Focus Group", + ResourceName = "François Dœuf", + City = "Montréal", + StartDate = new DateTime(2024, 1, 4), + Duration = 2, + ParentID = 1 + }, + new TreeTask + { + TaskID = 4, + TaskName = "Product Design", + ResourceName = "Mårten Šedý", + City = "Göteborg", + StartDate = new DateTime(2024, 1, 5), + Duration = 6, + ParentID = null + }, + new TreeTask + { + TaskID = 5, + TaskName = "UX Workshop", + ResourceName = "Anaïs Löhn", + City = "München", + StartDate = new DateTime(2024, 1, 6), + Duration = 4, + ParentID = 4 + }, + new TreeTask + { + TaskID = 6, + TaskName = "Prototype Testing", + ResourceName = "Renée Faßbinder", + City = "Zürich", + StartDate = new DateTime(2024, 1, 8), + Duration = 3, + ParentID = 4 + } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBeWrWDUuJTPmdQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> * This feature ignores accents for both searching and filtering operations in the Syncfusion® Blazor DataGrid when using an `IEnumerable` data source. +> * This feature works only for characters outside the ASCII range. \ No newline at end of file diff --git a/blazor/treegrid/sorting.md b/blazor/treegrid/sorting.md index 59d0ef5c23..577e271fbc 100644 --- a/blazor/treegrid/sorting.md +++ b/blazor/treegrid/sorting.md @@ -249,4 +249,368 @@ When the tree grid header is tapped on the touchscreen devices, the selected col Sorting in Blazor TreeGrid - \ No newline at end of file + + +## Custom sorting + +The Syncfusion® Blazor TreeGrid provides a way to customize the default sort action for a column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_SortComparer) property of `TreeGridColumn`. The `SortComparer` data type uses the [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-7.0&viewFallbackFrom=net-5) interface, so the custom sort comparer class should be implemented in the interface `IComparer`. + +In this TreeGrid example, custom sorting enhances project management by allowing the "Priority" column to be sorted based on a predefined hierarchy (Critical, High, Normal, Low) instead of alphabetical order, and the "Story Points" column is defined as string, but it is sorted numerically so that string values are treated as numbers, producing the correct ascending sequence 3, 5, 30 rather than the alphabetical order "3", "30", "5". In descending order, the numeric order is reversed to 30, 5, 3, making larger story points appear at the top. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using TreeGridComponent.Data; +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Navigations + + + + + + + + + + + + + + + + + +@code { + private List TreeGridData { get; set; } = new(); + protected override void OnInitialized() + { + TreeGridData = TaskData.GetTree(); + } + // Numeric sorting for string StoryPoints (ascending: 2 → 30) + public class StoryPointsStringComparer : IComparer + { + public int Compare(object? x, object? y) + { + var a = x as TaskData; + var b = y as TaskData; + bool aHasValue = int.TryParse(a?.StoryPoints ?? "", out int valA); + bool bHasValue = int.TryParse(b?.StoryPoints ?? "", out int valB); + if (!aHasValue && !bHasValue) return 0; + if (!aHasValue) return -1; // Empty comes first + if (!bHasValue) return 1; + return valA.CompareTo(valB); // Ascending order + } + } + public class PriorityComparer : IComparer + { + private static readonly Dictionary Order = new() + { + { "Low", 1 }, + { "Normal", 2 }, + { "High", 3 }, + { "Critical", 4 } + }; + public int Compare(object? x, object? y) + { + var a = x as TaskData; + var b = y as TaskData; + int pa = Order.GetValueOrDefault(a?.Priority ?? "", 0); + int pb = Order.GetValueOrDefault(b?.Priority ?? "", 0); + // Ascending order: Low → Normal → High → Critical + return pa.CompareTo(pb); + } + } + + public void ToolBarClick(Syncfusion.Blazor.Navigations.ClickEventArgs Args) + { + if (Args.Item.Id == "small") + { + RowHeightValue = 20; + } + if (Args.Item.Id == "medium") + { + RowHeightValue = 40; + } + if (Args.Item.Id == "big") + { + RowHeightValue = 60; + } + } + + public class CustomComparer : IComparer + { + private static readonly Dictionary PriorityOrder = new() + { + { "Low", 1 }, + { "Normal", 2 }, + { "High", 3 }, + { "Critical", 4 } + }; + + public int Compare(object XRowDataToCompare, object YRowDataToCompare) + { + var xx = XRowDataToCompare as WrapData; + var yy = YRowDataToCompare as WrapData; + string stringX = xx?.Priority.ToString() ?? string.Empty; + string stringY = yy?.Priority.ToString() ?? string.Empty; + + int priorityX = PriorityOrder.GetValueOrDefault(stringX, 1); + int priorityY = PriorityOrder.GetValueOrDefault(stringY, 1); + + if (priorityX == priorityY) + { + return 0; + } + else if (priorityX > priorityY) + { + return 1; + } + else + { + return -1; + } + } + } +} +{% endhighlight %} +{% highlight c# tabtitle="WrapData.cs" %} + +namespace TreeGridComponent.Data { + public class TaskData + { + public static List tree = new List(); + public int TaskID { get; set; } + public string? TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public string? Progress { get; set; } + public string? Priority { get; set; } + public double? Duration { get; set; } + public int? ParentID { get; set; } + public bool? IsParent { get; set; } + public bool? Approved { get; set; } + public string? AssignedTo { get; set; } + public string EstimatedCost { get; set; } = "0"; + public string RICEScore { get; set; } = "0"; + public string? BusinessValue { get; set; } + public string StoryPoints { get; set; } = ""; // Now string, will be summed for parents + public TaskData() { } + // Helper: Returns story points as string based on task name + private static string CalculateStoryPoints(string taskName) + { + if (string.IsNullOrWhiteSpace(taskName)) return ""; + string name = taskName.ToLowerInvariant(); + if (name.Contains("implement") && (name.Contains("frontend") || name.Contains("backend") || + name.Contains("integration") || name.Contains("oauth") || name.Contains("payment"))) + return "30"; + if (name.Contains("implement") || name.Contains("implementation")) + return "20"; + if (name.Contains("analysis") && taskName.Length > 20) + return "3"; + if (name.Contains("analysis") || name.Contains("wireframe") || name.Contains("audit")) + return "2"; + if (name.Contains("error handling") && (name.Contains("failed") || name.Contains("fraud") || name.Contains("conflict"))) + return "12"; + if (name.Contains("error handling") || name.Contains("validation")) + return "10"; + if (name.Contains("deploy") || name.Contains("deployment") || name.Contains("ota") || name.Contains("release")) + return "9"; + return "5"; // Default for tests, setup, etc. + } + public static List GetTree() + { + tree.Clear(); + var modules = GetModules(); + var innerTasks = GetInnerTasks(); + int taskId = 1000; + var rand = new Random(); + string[] parentProjects = { + "Customer Portal Redesign", "Mobile App v2 Development", "Data Analytics Dashboard", + "Admin Panel Revamp", "E-Commerce Platform Upgrade", "HR System Migration", + "IoT Device Monitoring System", "Marketing Automation Suite" + }; + // Temporary storage for tasks to calculate sums later + var allTasks = new List(); + var parentToChildrenMap = new Dictionary>(); + foreach (var parent in parentProjects) + { + DateTime parentStart = new DateTime(2025, rand.Next(1, 12), rand.Next(1, 28)); + DateTime parentEnd = parentStart.AddDays(rand.Next(60, 120)); + string parentPriority = parent == "HR System Migration" ? "Normal" : "Critical"; + var parentTask = new TaskData + { + TaskID = taskId++, + TaskName = parent, + ParentID = null, + IsParent = true, + Priority = parentPriority, + Progress = "In Progress", + AssignedTo = "Project Manager", + StartDate = parentStart, + EndDate = parentEnd, + Duration = (parentEnd - parentStart).Days, + EstimatedCost = "0", + RICEScore = "8000", + Approved = true, + StoryPoints = "" // Will be calculated later + }; + allTasks.Add(parentTask); + parentToChildrenMap[parentTask.TaskID] = new List(); + foreach (var module in modules[parent]) + { + DateTime childStart = parentStart.AddDays(rand.Next(3, 15)); + DateTime childEnd = childStart.AddDays(rand.Next(20, 45)); + string childPriority = parent == "HR System Migration" + ? (rand.Next(0, 2) == 0 ? "Low" : "Normal") + : module.Contains("Auth") || module.Contains("Payment") || module.Contains("Security") ? "Critical" : "High"; + var childTask = new TaskData + { + TaskID = taskId++, + TaskName = module, + ParentID = parentTask.TaskID, + IsParent = true, + Priority = childPriority, + Progress = "Open", + AssignedTo = "Tech Lead", + StartDate = childStart, + EndDate = childEnd, + Duration = 0, + EstimatedCost = "0", + RICEScore = "2000", + Approved = true, + StoryPoints = "" // Will be summed + }; + allTasks.Add(childTask); + parentToChildrenMap[parentTask.TaskID].Add(childTask); + parentToChildrenMap[childTask.TaskID] = new List(); + if (innerTasks.ContainsKey(module)) + { + int index = 0; + foreach (var inner in innerTasks[module]) + { + int days = rand.Next(3, 14); + DateTime innerStart = childStart.AddDays(rand.Next(0, 5)); + DateTime innerEnd = innerStart.AddDays(days); + string innerPriority = parent == "HR System Migration" + ? (rand.Next(0, 2) == 0 ? "Low" : "Normal") + : GetInnerPriority(childPriority, index++); + var innerTask = new TaskData + { + TaskID = taskId++, + TaskName = inner, + ParentID = childTask.TaskID, + IsParent = false, + Priority = innerPriority, + Progress = innerPriority == "Critical" ? "In Progress" : "Open", + AssignedTo = "Developer", + StartDate = innerStart, + EndDate = innerEnd, + Duration = days, + EstimatedCost = (days * 8 * 75).ToString(), + RICEScore = "1000", + BusinessValue = rand.Next(1, 4) switch { 1 => "21", 2 => "100", _ => "111" }, + Approved = true, + StoryPoints = CalculateStoryPoints(inner) + }; + allTasks.Add(innerTask); + parentToChildrenMap[childTask.TaskID].Add(innerTask); + childTask.Duration += days; + childTask.EstimatedCost = (double.Parse(childTask.EstimatedCost) + days * 8 * 75).ToString(); + } + } + } + } + // Now calculate and assign StoryPoints sum for all parent tasks (bottom-up) + foreach (var task in allTasks.Where(t => t.IsParent == true).OrderByDescending(t => t.TaskID)) + { + var children = allTasks.Where(t => t.ParentID == task.TaskID).ToList(); + int totalSP = 0; + foreach (var child in children) + { + if (!string.IsNullOrEmpty(child.StoryPoints) && int.TryParse(child.StoryPoints, out int sp)) + { + totalSP += sp; + } + } + task.StoryPoints = totalSP > 0 ? totalSP.ToString() : ""; + } + tree = allTasks; + return tree; + } + private static string GetInnerPriority(string parentPriority, int index) + { + return parentPriority switch + { + "Critical" => index % 2 == 0 ? "Critical" : "High", + "High" => index % 3 == 0 ? "Critical" : "High", + _ => "Normal" + }; + } + private static Dictionary GetModules() => new() + { + { "Customer Portal Redesign", new[] { "Authentication & Login Flow", "User Profile Management", "Dashboard UI Layout", "Notification Center", "Accessibility Compliance" } }, + { "Mobile App v2 Development", new[] { "Push Notification Service", "Offline Data Sync", "Payment Gateway Integration", "App Security Enhancements" } }, + { "Data Analytics Dashboard", new[] { "Chart Rendering Engine", "Filter & Query Logic", "Export to Excel/PDF", "KPI Metrics Setup" } }, + { "Admin Panel Revamp", new[] { "Role Management Module", "Audit Log Tracking", "Settings UI Redesign", "Multi-Factor Authentication" } }, + { "E-Commerce Platform Upgrade", new[] { "Product Catalog Service", "Shopping Cart Flow", "Checkout & Payments", "Order Tracking" } }, + { "HR System Migration", new[] { "Employee Records Import", "Payroll Integration", "Leave Management", "Recruitment Module" } }, + { "IoT Device Monitoring System", new[] { "Device Registration", "Sensor Data Collection", "Real-Time Alerts", "Firmware Updates" } }, + { "Marketing Automation Suite", new[] { "Campaign Builder", "Email Templates", "Audience Segmentation", "Analytics Dashboard" } } + }; + private static Dictionary GetInnerTasks() => new() + { + { "Authentication & Login Flow", new[] { "Analysis of login flow", "Implement OAuth2/SSO", "Unit Tests for Login", "Error Handling for Failed Login" } }, + { "User Profile Management", new[] { "Profile CRUD Operations", "Validation Rules", "Integration with DB" } }, + { "Dashboard UI Layout", new[] { "Wireframe Design", "Frontend Implementation", "Accessibility Review" } }, + { "Notification Center", new[] { "Email Alerts", "Push Notifications", "Error Logging" } }, + { "Accessibility Compliance", new[] { "WCAG Audit", "Keyboard Navigation", "Screen Reader Support" } }, + { "Push Notification Service", new[] { "Setup Firebase/APNS", "Integration Tests", "Retry Logic" } }, + { "Offline Data Sync", new[] { "Local Storage Setup", "Conflict Resolution", "Sync Scheduler" } }, + { "Payment Gateway Integration", new[] { "Integrate Stripe/PayPal", "Transaction Logging", "Fraud Detection" } }, + { "App Security Enhancements", new[] { "Encryption Setup", "Penetration Testing", "Secure Storage" } }, + { "Chart Rendering Engine", new[] { "Implement ChartJS", "Performance Optimization", "Unit Tests" } }, + { "Filter & Query Logic", new[] { "Dynamic Filters", "SQL Optimization", "Validation" } }, + { "Export to Excel/PDF", new[] { "Excel Export", "PDF Export", "Error Handling" } }, + { "KPI Metrics Setup", new[] { "Define KPIs", "Data Pipeline", "Validation" } }, + { "Role Management Module", new[] { "Role CRUD", "Permission Matrix", "Unit Tests" } }, + { "Audit Log Tracking", new[] { "Log Schema Design", "Integration with DB", "Export Reports" } }, + { "Settings UI Redesign", new[] { "UI Wireframe", "Frontend Implementation", "Accessibility Review" } }, + { "Multi-Factor Authentication", new[] { "OTP Setup", "SMS/Email Integration", "Error Handling" } }, + { "Product Catalog Service", new[] { "Catalog CRUD", "Search Optimization", "Validation" } }, + { "Shopping Cart Flow", new[] { "Add/Remove Items", "Discount Application", "Error Handling" } }, + { "Checkout & Payments", new[] { "Payment Gateway Integration", "Transaction Logging", "Fraud Detection" } }, + { "Order Tracking", new[] { "Order Status Updates", "Notifications", "Error Handling" } }, + { "Employee Records Import", new[] { "Data Migration", "Validation", "Error Handling" } }, + { "Payroll Integration", new[] { "Salary Calculation", "Bank API Integration", "Validation" } }, + { "Leave Management", new[] { "Leave Request Workflow", "Approval Rules", "Error Handling" } }, + { "Recruitment Module", new[] { "Job Posting", "Candidate Screening", "Interview Scheduling" } }, + { "Device Registration", new[] { "Device Onboarding", "Validation", "Error Handling" } }, + { "Sensor Data Collection", new[] { "Data Pipeline Setup", "Validation", "Error Handling" } }, + { "Real-Time Alerts", new[] { "Alert Rules", "Notification Setup", "Error Handling" } }, + { "Firmware Updates", new[] { "OTA Update Setup", "Validation", "Error Handling" } }, + { "Campaign Builder", new[] { "Template Design", "Workflow Setup", "Validation" } }, + { "Email Templates", new[] { "Design Templates", "Validation", "Error Handling" } }, + { "Audience Segmentation", new[] { "Segmentation Rules", "Validation", "Error Handling" } }, + { "Analytics Dashboard", new[] { "Metrics Setup", "Visualization", "Validation" } } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrSWVWZprFrLETz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> * The SortComparer function takes two parameters: a and b. The a and b parameters are the values to be compared. The function returns -1, 0, or 1, depending on the comparison result. +> * The SortComparer property will work only for local data. +> * When using the column template to display data in a column, you will need to use the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) property of [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) to work with the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_SortComparer) property. \ No newline at end of file