From 221f94530c611b2fa212631360f92e2fc80b65e8 Mon Sep 17 00:00:00 2001 From: "sarankumar.sf4794" Date: Fri, 12 Dec 2025 16:48:09 +0530 Subject: [PATCH 1/6] 998702: added column span Added documentation for column spanning feature in Blazor Tree Grid component, including usage examples and limitations. --- blazor/treegrid/columns/column-spanning.md | 137 +++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 blazor/treegrid/columns/column-spanning.md diff --git a/blazor/treegrid/columns/column-spanning.md b/blazor/treegrid/columns/column-spanning.md new file mode 100644 index 0000000000..355a9f50b8 --- /dev/null +++ b/blazor/treegrid/columns/column-spanning.md @@ -0,0 +1,137 @@ +--- +layout: post +title: Column spanning in Blazor Tree Grid Component | Syncfusion +description: Check out here and learn more details about the Column spanning in the Syncfusion Blazor Tree Grid component. +platform: Blazor +control: Tree Grid +documentation: ug +--- + +# Column spanning in Blazor Tree Grid Component + +The column spanning feature in the Syncfusion® Tree Grid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a clean, professional look by eliminating repetitive data. + +To enable column spanning, set the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AutoSpan) property to **AutoSpanMode.Column** in the Tree Grid configuration. + +In the following example, cells in rows are automatically merged when they have identical values in consecutive columns. The `AutoSpan` mode in this example can be dynamically changed using the dropdown selector. It is initially set to **Column** mode, allowing you to easily switch between different spanning modes to understand how row and column spanning work in practice. + +{% tabs %} + +{% highlight razor %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons + +
+
+ + + + +
+
+
+ + + + + + + + + + + + + + + +@code { + private AutoSpanMode currentMode = AutoSpanMode.Column; + private string selectedMode = "Column"; + private List modes = new() { "None", "Row", "Column", "Horizontal and Vertical" }; + public SfTreeGrid TreeGridInstance; + public List TreeData { get; set; } + + protected override void OnInitialized() + { + TreeData = DeveloperSchedule.GetTree().ToList(); + } + + private void OnModeChanged(ChangeEventArgs args) + { + selectedMode = args?.Value ?? "None"; + currentMode = selectedMode switch + { + "Row" => AutoSpanMode.Row, + "Column" => AutoSpanMode.Column, + "Horizontal and Vertical" => AutoSpanMode.HorizontalAndVertical, + _ => AutoSpanMode.None + }; + } +} + +{% endhighlight %} + +{% highlight c# %} +namespace TreeGridComponent.Data { + + public class DeveloperSchedule + { + public int Id { get; set; } + public string Name { get; set; } + public string Slot1 { get; set; } + public string Slot2 { get; set; } + public string Slot3 { get; set; } + public string Slot4 { get; set; } + public string Slot5 { get; set; } + public string Slot6 { get; set; } + public string Slot7 { get; set; } + public int? ParentId { get; set; } + public bool IsExpanded { get; set; } + + public static List GetTree() + { + List Developers = new List + { + new DeveloperSchedule { Id = 1, Name = "Martin", Slot1 = "Feature Dev", Slot2 = "Bug Fixing", Slot3 = "Team Sync", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Planning", Slot7 = "Code Review", IsExpanded = false }, + new DeveloperSchedule { Id = 2, ParentId = 1, Name = "Vance", Slot1 = "Bug Fixing", Slot2 = "Bug Fixing", Slot3 = "Team Sync", Slot4 = "Lunch Break", Slot5 = "Planning", Slot6 = "Code Review", Slot7 = "Feature Dev" }, + new DeveloperSchedule { Id = 3, ParentId = 2, Name = "Charlie", Slot1 = "Team Sync", Slot2 = "Team Sync", Slot3 = "Testing", Slot4 = "Lunch Break", Slot5 = "Feature Dev", Slot6 = "Code Review", Slot7 = "Bug Fixing" }, + new DeveloperSchedule { Id = 4, Name = "Taylor", Slot1 = "Team Sync", Slot2 = "Bug Fixing", Slot3 = "Planning", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Bug Fixing", Slot7 = "Planning", IsExpanded = false }, + new DeveloperSchedule { Id = 5, ParentId = 4, Name = "Anderson", Slot1 = "Testing", Slot2 = "Planning", Slot3 = "Code Review", Slot4 = "Lunch Break", Slot5 = "Bug Fixing", Slot6 = "Testing", Slot7 = "Planning" }, + new DeveloperSchedule { Id = 6, ParentId = 5, Name = "Chris", Slot1 = "Planning", Slot2 = "Code Review", Slot3 = "Feature Dev", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Team Sync", Slot7 = "Testing" }, + new DeveloperSchedule { Id = 7, Name = "Elizabeth", Slot1 = "Code Review", Slot2 = "Feature Dev", Slot3 = "Bug Fixing", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Code Review", Slot7 = "Planning", IsExpanded = false }, + new DeveloperSchedule { Id = 8, ParentId = 7, Name = "Robert", Slot1 = "Feature Dev", Slot2 = "Bug Fixing", Slot3 = "Bug Fixing", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Planning", Slot7 = "Code Review" }, + new DeveloperSchedule { Id = 9, ParentId = 8, Name = "Smith", Slot1 = "Bug Fixing", Slot2 = "Testing", Slot3 = "Team Sync", Slot4 = "Lunch Break", Slot5 = "Planning", Slot6 = "Planning", Slot7 = "Feature Dev" }, + new DeveloperSchedule { Id = 10, ParentId = 7, Name = "John", Slot1 = "Scrum", Slot2 = "Team Sync", Slot3 = "Testing", Slot4 = "Lunch Break", Slot5 = "Code Review", Slot6 = "Feature Dev", Slot7 = "Bug Fixing" } + }; + return Developers; + } + } +} +{% endhighlight %} + +{% endtabs %} + +N> In the above example, notice how cells with identical consecutive values across columns in each row are automatically merged horizontally, creating a cleaner view. For instance, when consecutive time slots have the same activity value, they span across multiple columns. + +## Limitations + +Column spanning feature is not compatible with all the features which are available in Tree Grid and it has limited features support. Here we have listed out the features which are not compatible with column spanning feature. + +* Virtualization +* Infinite Scrolling +* Row Drag and Drop +* Column Virtualization +* Detail Template +* Editing +* Export + +## See Also + +* [Row spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/blazor/documentation/treegrid/rows/row-spanning) From ecf8210f612b4792c2de3314c2f5af2b245a9ed7 Mon Sep 17 00:00:00 2001 From: "sarankumar.sf4794" Date: Fri, 12 Dec 2025 16:52:13 +0530 Subject: [PATCH 2/6] 998702: added row span Added documentation for row spanning feature in Blazor Tree Grid component, including usage examples and limitations. --- blazor/treegrid/rows/row-spanning.md | 137 +++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 blazor/treegrid/rows/row-spanning.md diff --git a/blazor/treegrid/rows/row-spanning.md b/blazor/treegrid/rows/row-spanning.md new file mode 100644 index 0000000000..7472266c58 --- /dev/null +++ b/blazor/treegrid/rows/row-spanning.md @@ -0,0 +1,137 @@ +--- +layout: post +title: Row spanning in Blazor Tree Grid Component | Syncfusion +description: Check out here and learn more details about the Row spanning in the Syncfusion Blazor Tree Grid component. +platform: Blazor +control: Tree Grid +documentation: ug +--- + +# Row spanning in Blazor Tree Grid Component + +The row spanning feature in the Syncfusion® Tree Grid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a clean, professional look by eliminating repetitive data. + +To enable row spanning, set the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AutoSpan) property to **AutoSpanMode.Row** in the Tree Grid configuration. + +In the following example, cells in columns are automatically merged when they have identical values in consecutive rows. The `AutoSpan` mode in this example can be dynamically changed using the dropdown selector. It is initially set to **Row** mode, allowing you to easily switch between different spanning modes to understand how row and column spanning work in practice.” + +{% tabs %} + +{% highlight razor %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Buttons + +
+
+ + + + +
+
+
+ + + + + + + + + + + + + + + +@code { + private AutoSpanMode currentMode = AutoSpanMode.Row; + private string selectedMode = "Horizontal and Vertical"; + private List modes = new() { "None", "Row", "Column", "Horizontal and Vertical" }; + public SfTreeGrid TreeGridInstance; + public List TreeData { get; set; } + + protected override void OnInitialized() + { + TreeData = DeveloperSchedule.GetTree().ToList(); + } + + private void OnModeChanged(ChangeEventArgs args) + { + selectedMode = args?.Value ?? "None"; + currentMode = selectedMode switch + { + "Row" => AutoSpanMode.Row, + "Column" => AutoSpanMode.Column, + "Horizontal and Vertical" => AutoSpanMode.HorizontalAndVertical, + _ => AutoSpanMode.None + }; + } +} + +{% endhighlight %} + +{% highlight c# %} +namespace TreeGridComponent.Data { + + public class DeveloperSchedule + { + public int Id { get; set; } + public string Name { get; set; } + public string Slot1 { get; set; } + public string Slot2 { get; set; } + public string Slot3 { get; set; } + public string Slot4 { get; set; } + public string Slot5 { get; set; } + public string Slot6 { get; set; } + public string Slot7 { get; set; } + public int? ParentId { get; set; } + public bool IsExpanded { get; set; } + + public static List GetTree() + { + List Developers = new List + { + new DeveloperSchedule { Id = 1, Name = "Martin", Slot1 = "Feature Dev", Slot2 = "Bug Fixing", Slot3 = "Team Sync", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Planning", Slot7 = "Code Review", IsExpanded = false }, + new DeveloperSchedule { Id = 2, ParentId = 1, Name = "Vance", Slot1 = "Bug Fixing", Slot2 = "Bug Fixing", Slot3 = "Team Sync", Slot4 = "Lunch Break", Slot5 = "Planning", Slot6 = "Code Review", Slot7 = "Feature Dev" }, + new DeveloperSchedule { Id = 3, ParentId = 2, Name = "Charlie", Slot1 = "Team Sync", Slot2 = "Team Sync", Slot3 = "Testing", Slot4 = "Lunch Break", Slot5 = "Feature Dev", Slot6 = "Code Review", Slot7 = "Bug Fixing" }, + new DeveloperSchedule { Id = 4, Name = "Taylor", Slot1 = "Team Sync", Slot2 = "Bug Fixing", Slot3 = "Planning", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Bug Fixing", Slot7 = "Planning", IsExpanded = false }, + new DeveloperSchedule { Id = 5, ParentId = 4, Name = "Anderson", Slot1 = "Testing", Slot2 = "Planning", Slot3 = "Code Review", Slot4 = "Lunch Break", Slot5 = "Bug Fixing", Slot6 = "Testing", Slot7 = "Planning" }, + new DeveloperSchedule { Id = 6, ParentId = 5, Name = "Chris", Slot1 = "Planning", Slot2 = "Code Review", Slot3 = "Feature Dev", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Team Sync", Slot7 = "Testing" }, + new DeveloperSchedule { Id = 7, Name = "Elizabeth", Slot1 = "Code Review", Slot2 = "Feature Dev", Slot3 = "Bug Fixing", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Code Review", Slot7 = "Planning", IsExpanded = false }, + new DeveloperSchedule { Id = 8, ParentId = 7, Name = "Robert", Slot1 = "Feature Dev", Slot2 = "Bug Fixing", Slot3 = "Bug Fixing", Slot4 = "Lunch Break", Slot5 = "Testing", Slot6 = "Planning", Slot7 = "Code Review" }, + new DeveloperSchedule { Id = 9, ParentId = 8, Name = "Smith", Slot1 = "Bug Fixing", Slot2 = "Testing", Slot3 = "Team Sync", Slot4 = "Lunch Break", Slot5 = "Planning", Slot6 = "Planning", Slot7 = "Feature Dev" }, + new DeveloperSchedule { Id = 10, ParentId = 7, Name = "John", Slot1 = "Scrum", Slot2 = "Team Sync", Slot3 = "Testing", Slot4 = "Lunch Break", Slot5 = "Code Review", Slot6 = "Feature Dev", Slot7 = "Bug Fixing" } + }; + return Developers; + } + } +} +{% endhighlight %} + +{% endtabs %} + +N> In the above example, notice how cells with identical consecutive values in columns are automatically merged vertically across rows, creating a cleaner view. + +## Limitations + +Row spanning feature is not compatible with all the features which are available in Tree Grid and it has limited features support. Here we have listed out the features which are not compatible with row spanning feature. + +* Virtualization +* Infinite Scrolling +* Row Drag and Drop +* Column Virtualization +* Detail Template +* Editing +* Export + +## See Also + +* [Column spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/blazor/documentation/treegrid/columns/column-spanning) From 9b1b47f8e425c286951a8badcb1b212e963d17ef Mon Sep 17 00:00:00 2001 From: "sarankumar.sf4794" Date: Fri, 12 Dec 2025 17:01:41 +0530 Subject: [PATCH 3/6] 998702: added links --- blazor/treegrid/columns/column-spanning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/columns/column-spanning.md b/blazor/treegrid/columns/column-spanning.md index 355a9f50b8..a3be51024d 100644 --- a/blazor/treegrid/columns/column-spanning.md +++ b/blazor/treegrid/columns/column-spanning.md @@ -134,4 +134,4 @@ Column spanning feature is not compatible with all the features which are availa ## See Also -* [Row spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/blazor/documentation/treegrid/rows/row-spanning) +* [Row spanning in Syncfusion® TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/rows/row-spanning) From 9e4838c916aa67ed0320cc3c1396a5a17e16c8a7 Mon Sep 17 00:00:00 2001 From: "sarankumar.sf4794" Date: Fri, 12 Dec 2025 17:02:51 +0530 Subject: [PATCH 4/6] 998702: updated links for row spanning --- blazor/treegrid/rows/row-spanning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/rows/row-spanning.md b/blazor/treegrid/rows/row-spanning.md index 7472266c58..ba29e2aba2 100644 --- a/blazor/treegrid/rows/row-spanning.md +++ b/blazor/treegrid/rows/row-spanning.md @@ -134,4 +134,4 @@ Row spanning feature is not compatible with all the features which are available ## See Also -* [Column spanning in Syncfusion® TreeGrid](https://ej2.syncfusion.com/blazor/documentation/treegrid/columns/column-spanning) +* [Column spanning in Syncfusion® TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/columns/column-spanning) From d59f531f42577cfb836732a45a151f4029d98a83 Mon Sep 17 00:00:00 2001 From: "sarankumar.sf4794" Date: Fri, 12 Dec 2025 17:11:54 +0530 Subject: [PATCH 5/6] 998702: Fix code formatting in column spanning documentation Updated formatting for code snippet in column spanning documentation. --- blazor/treegrid/columns/column-spanning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/columns/column-spanning.md b/blazor/treegrid/columns/column-spanning.md index a3be51024d..39f82d9bea 100644 --- a/blazor/treegrid/columns/column-spanning.md +++ b/blazor/treegrid/columns/column-spanning.md @@ -11,7 +11,7 @@ documentation: ug The column spanning feature in the Syncfusion® Tree Grid allows automatically merging cells with identical values in the same row across consecutive columns. This significantly enhances readability and delivers a clean, professional look by eliminating repetitive data. -To enable column spanning, set the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AutoSpan) property to **AutoSpanMode.Column** in the Tree Grid configuration. +To enable column spanning, set the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AutoSpan) property to `AutoSpanMode.Column` in the Tree Grid configuration. In the following example, cells in rows are automatically merged when they have identical values in consecutive columns. The `AutoSpan` mode in this example can be dynamically changed using the dropdown selector. It is initially set to **Column** mode, allowing you to easily switch between different spanning modes to understand how row and column spanning work in practice. From 8e2f5d46c498576ebdfdc9a6f0a6b00622c5bd54 Mon Sep 17 00:00:00 2001 From: "sarankumar.sf4794" Date: Fri, 12 Dec 2025 17:14:12 +0530 Subject: [PATCH 6/6] 998702: Fix formatting for AutoSpan property in documentation Updated formatting for AutoSpan property description. --- blazor/treegrid/rows/row-spanning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/rows/row-spanning.md b/blazor/treegrid/rows/row-spanning.md index ba29e2aba2..291604fadf 100644 --- a/blazor/treegrid/rows/row-spanning.md +++ b/blazor/treegrid/rows/row-spanning.md @@ -11,7 +11,7 @@ documentation: ug The row spanning feature in the Syncfusion® Tree Grid allows automatically merging cells with identical values in the same column across consecutive rows. This significantly enhances readability and delivers a clean, professional look by eliminating repetitive data. -To enable row spanning, set the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AutoSpan) property to **AutoSpanMode.Row** in the Tree Grid configuration. +To enable row spanning, set the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AutoSpan) property to `AutoSpanMode.Row` in the Tree Grid configuration. In the following example, cells in columns are automatically merged when they have identical values in consecutive rows. The `AutoSpan` mode in this example can be dynamically changed using the dropdown selector. It is initially set to **Row** mode, allowing you to easily switch between different spanning modes to understand how row and column spanning work in practice.”