Skip to content

Commit 5100b47

Browse files
thavasianandthavasianand
authored
Merge pull request #7266 from syncfusion-content/998702-TreeDocs
998702 tree docs
2 parents 6e75eed + 94e2080 commit 5100b47

File tree

3 files changed

+276
-0
lines changed

3 files changed

+276
-0
lines changed

‎blazor-toc.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4877,6 +4877,7 @@
48774877
<li><a href="/blazor/treegrid/columns/column-template">Column Template</a></li>
48784878
<li><a href="/blazor/treegrid/columns/column-reorder">Column Reorder</a></li>
48794879
<li><a href="/blazor/treegrid/columns/column-menu">Column Menu</a></li>
4880+
<li><a href="/blazor/treegrid/columns/column-spanning">Column Menu</a></li>
48804881
</ul>
48814882
</li>
48824883
<li>
@@ -4886,6 +4887,7 @@
48864887
<li><a href="/blazor/treegrid/rows/row-template">Row Template</a></li>
48874888
<li><a href="/blazor/treegrid/rows/detail-template">Detail Template</a></li>
48884889
<li><a href="/blazor/treegrid/rows/row-drag-and-drop">Row Drag and Drop</a></li>
4890+
<li><a href="/blazor/treegrid/rows/row-spanning">Row Drag and Drop</a></li>
48894891
</ul>
48904892
</li>
48914893
<li> <a href="/blazor/treegrid/templates">Templates</a></li>

‎blazor/treegrid/columns/column-spanning.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
layout: post
3+
title: Column spanning in Blazor Tree Grid Component | Syncfusion
4+
description: Check out here and learn more details about the Column spanning in the Syncfusion Blazor Tree Grid component.
5+
platform: Blazor
6+
control: Tree Grid
7+
documentation: ug
8+
---
9+
10+
# Column spanning in Blazor Tree Grid Component
11+
12+
The column spanning feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> 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.
13+
14+
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.
15+
16+
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.
17+
18+
{% tabs %}
19+
20+
{% highlight razor %}
21+
22+
@using Syncfusion.Blazor.Grids
23+
@using Syncfusion.Blazor.TreeGrid
24+
@using Syncfusion.Blazor.DropDowns
25+
@using Syncfusion.Blazor.Buttons
26+
27+
<div class="form-row alt">
28+
<div class="left">
29+
<label class="e-option">Select AutoSpan Mode:</label>
30+
<SfDropDownList TValue="string" TItem="string"
31+
DataSource="@modes"
32+
Value="@selectedMode"
33+
Width="auto">
34+
<DropDownListEvents TItem="string" ValueChange="OnModeChanged" TValue="string"></DropDownListEvents>
35+
</SfDropDownList>
36+
</div>
37+
</div>
38+
<br/>
39+
<SfTreeGrid @ref="TreeGridInstance" DataSource="@TreeData" IdMapping="Id" EnableHover ParentIdMapping="ParentId" AutoSpan="@currentMode" TreeColumnIndex="1" GridLines="GridLine.Both">
40+
<TreeGridColumns>
41+
<TreeGridColumn Field="Id" HeaderText="ID" Width="80" TextAlign="TextAlign.Center" IsPrimaryKey></TreeGridColumn>
42+
<TreeGridColumn Field="Name" HeaderText="Developer" Width="150"></TreeGridColumn>
43+
<TreeGridColumn Field="Slot1" HeaderText="10:00 - 11:00 AM" Width="150" ></TreeGridColumn>
44+
<TreeGridColumn Field="Slot2" HeaderText="11:00 - 12:00 AM" Width="150"></TreeGridColumn>
45+
<TreeGridColumn Field="Slot3" HeaderText="12:00 - 13:00 PM" Width="150"></TreeGridColumn>
46+
<TreeGridColumn Field="Slot4" HeaderText="01:00 - 02:00 PM" Width="150"></TreeGridColumn>
47+
<TreeGridColumn Field="Slot5" HeaderText="02:00 - 03:00 PM" Width="150"></TreeGridColumn>
48+
<TreeGridColumn Field="Slot6" HeaderText="03:00 - 04:00 PM" Width="150"></TreeGridColumn>
49+
<TreeGridColumn Field="Slot7" HeaderText="04:00 - 05:00 PM" Width="150"></TreeGridColumn>
50+
</TreeGridColumns>
51+
</SfTreeGrid>
52+
53+
54+
@code {
55+
private AutoSpanMode currentMode = AutoSpanMode.Column;
56+
private string selectedMode = "Column";
57+
private List<string> modes = new() { "None", "Row", "Column", "Horizontal and Vertical" };
58+
public SfTreeGrid<DeveloperSchedule> TreeGridInstance;
59+
public List<DeveloperSchedule> TreeData { get; set; }
60+
61+
protected override void OnInitialized()
62+
{
63+
TreeData = DeveloperSchedule.GetTree().ToList();
64+
}
65+
66+
private void OnModeChanged(ChangeEventArgs<string, string> args)
67+
{
68+
selectedMode = args?.Value ?? "None";
69+
currentMode = selectedMode switch
70+
{
71+
"Row" => AutoSpanMode.Row,
72+
"Column" => AutoSpanMode.Column,
73+
"Horizontal and Vertical" => AutoSpanMode.HorizontalAndVertical,
74+
_ => AutoSpanMode.None
75+
};
76+
}
77+
}
78+
79+
{% endhighlight %}
80+
81+
{% highlight c# %}
82+
namespace TreeGridComponent.Data {
83+
84+
public class DeveloperSchedule
85+
{
86+
public int Id { get; set; }
87+
public string Name { get; set; }
88+
public string Slot1 { get; set; }
89+
public string Slot2 { get; set; }
90+
public string Slot3 { get; set; }
91+
public string Slot4 { get; set; }
92+
public string Slot5 { get; set; }
93+
public string Slot6 { get; set; }
94+
public string Slot7 { get; set; }
95+
public int? ParentId { get; set; }
96+
public bool IsExpanded { get; set; }
97+
98+
public static List<DeveloperSchedule> GetTree()
99+
{
100+
List<DeveloperSchedule> Developers = new List<DeveloperSchedule>
101+
{
102+
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 },
103+
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" },
104+
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" },
105+
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 },
106+
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" },
107+
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" },
108+
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 },
109+
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" },
110+
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" },
111+
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" }
112+
};
113+
return Developers;
114+
}
115+
}
116+
}
117+
{% endhighlight %}
118+
119+
{% endtabs %}
120+
121+
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.
122+
123+
## Limitations
124+
125+
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.
126+
127+
* Virtualization
128+
* Infinite Scrolling
129+
* Row Drag and Drop
130+
* Column Virtualization
131+
* Detail Template
132+
* Editing
133+
* Export
134+
135+
## See Also
136+
137+
* [Row spanning in Syncfusion<sup style="font-size:70%">&reg;</sup> TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/rows/row-spanning)

‎blazor/treegrid/rows/row-spanning.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
layout: post
3+
title: Row spanning in Blazor Tree Grid Component | Syncfusion
4+
description: Check out here and learn more details about the Row spanning in the Syncfusion Blazor Tree Grid component.
5+
platform: Blazor
6+
control: Tree Grid
7+
documentation: ug
8+
---
9+
10+
# Row spanning in Blazor Tree Grid Component
11+
12+
The row spanning feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> 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.
13+
14+
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.
15+
16+
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.”
17+
18+
{% tabs %}
19+
20+
{% highlight razor %}
21+
22+
@using Syncfusion.Blazor.Grids
23+
@using Syncfusion.Blazor.TreeGrid
24+
@using Syncfusion.Blazor.DropDowns
25+
@using Syncfusion.Blazor.Buttons
26+
27+
<div class="form-row alt">
28+
<div class="left">
29+
<label class="e-option">Select AutoSpan Mode:</label>
30+
<SfDropDownList TValue="string" TItem="string"
31+
DataSource="@modes"
32+
Value="@selectedMode"
33+
Width="auto">
34+
<DropDownListEvents TItem="string" ValueChange="OnModeChanged" TValue="string"></DropDownListEvents>
35+
</SfDropDownList>
36+
</div>
37+
</div>
38+
<br/>
39+
<SfTreeGrid @ref="TreeGridInstance" DataSource="@TreeData" IdMapping="Id" EnableHover ParentIdMapping="ParentId" AutoSpan="@currentMode" TreeColumnIndex="1" GridLines="GridLine.Both">
40+
<TreeGridColumns>
41+
<TreeGridColumn Field="Id" HeaderText="ID" Width="80" TextAlign="TextAlign.Center" IsPrimaryKey></TreeGridColumn>
42+
<TreeGridColumn Field="Name" HeaderText="Developer" Width="150"></TreeGridColumn>
43+
<TreeGridColumn Field="Slot1" HeaderText="10:00 - 11:00 AM" Width="150" ></TreeGridColumn>
44+
<TreeGridColumn Field="Slot2" HeaderText="11:00 - 12:00 AM" Width="150"></TreeGridColumn>
45+
<TreeGridColumn Field="Slot3" HeaderText="12:00 - 13:00 PM" Width="150"></TreeGridColumn>
46+
<TreeGridColumn Field="Slot4" HeaderText="01:00 - 02:00 PM" Width="150"></TreeGridColumn>
47+
<TreeGridColumn Field="Slot5" HeaderText="02:00 - 03:00 PM" Width="150"></TreeGridColumn>
48+
<TreeGridColumn Field="Slot6" HeaderText="03:00 - 04:00 PM" Width="150"></TreeGridColumn>
49+
<TreeGridColumn Field="Slot7" HeaderText="04:00 - 05:00 PM" Width="150"></TreeGridColumn>
50+
</TreeGridColumns>
51+
</SfTreeGrid>
52+
53+
54+
@code {
55+
private AutoSpanMode currentMode = AutoSpanMode.Row;
56+
private string selectedMode = "Horizontal and Vertical";
57+
private List<string> modes = new() { "None", "Row", "Column", "Horizontal and Vertical" };
58+
public SfTreeGrid<DeveloperSchedule> TreeGridInstance;
59+
public List<DeveloperSchedule> TreeData { get; set; }
60+
61+
protected override void OnInitialized()
62+
{
63+
TreeData = DeveloperSchedule.GetTree().ToList();
64+
}
65+
66+
private void OnModeChanged(ChangeEventArgs<string, string> args)
67+
{
68+
selectedMode = args?.Value ?? "None";
69+
currentMode = selectedMode switch
70+
{
71+
"Row" => AutoSpanMode.Row,
72+
"Column" => AutoSpanMode.Column,
73+
"Horizontal and Vertical" => AutoSpanMode.HorizontalAndVertical,
74+
_ => AutoSpanMode.None
75+
};
76+
}
77+
}
78+
79+
{% endhighlight %}
80+
81+
{% highlight c# %}
82+
namespace TreeGridComponent.Data {
83+
84+
public class DeveloperSchedule
85+
{
86+
public int Id { get; set; }
87+
public string Name { get; set; }
88+
public string Slot1 { get; set; }
89+
public string Slot2 { get; set; }
90+
public string Slot3 { get; set; }
91+
public string Slot4 { get; set; }
92+
public string Slot5 { get; set; }
93+
public string Slot6 { get; set; }
94+
public string Slot7 { get; set; }
95+
public int? ParentId { get; set; }
96+
public bool IsExpanded { get; set; }
97+
98+
public static List<DeveloperSchedule> GetTree()
99+
{
100+
List<DeveloperSchedule> Developers = new List<DeveloperSchedule>
101+
{
102+
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 },
103+
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" },
104+
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" },
105+
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 },
106+
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" },
107+
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" },
108+
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 },
109+
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" },
110+
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" },
111+
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" }
112+
};
113+
return Developers;
114+
}
115+
}
116+
}
117+
{% endhighlight %}
118+
119+
{% endtabs %}
120+
121+
N> In the above example, notice how cells with identical consecutive values in columns are automatically merged vertically across rows, creating a cleaner view.
122+
123+
## Limitations
124+
125+
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.
126+
127+
* Virtualization
128+
* Infinite Scrolling
129+
* Row Drag and Drop
130+
* Column Virtualization
131+
* Detail Template
132+
* Editing
133+
* Export
134+
135+
## See Also
136+
137+
* [Column spanning in Syncfusion<sup style="font-size:70%">&reg;</sup> TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/columns/column-spanning)

0 commit comments

Comments
 (0)