You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/treegrid/columns/column-spanning.md
+27-34Lines changed: 27 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,25 +9,9 @@ documentation: ug
9
9
10
10
# Column Spanning in Blazor TreeGrid
11
11
12
-
Column spanning in the Blazor TreeGrid provides automatic vertical merging of adjacent cells within the same column when identical values are detected. This feature improves readability by consolidating repeated values into a single taller cell, which is especially useful when the same value appears across consecutive rows.
12
+
Column spanning in the Blazor TreeGrid provides automatic vertical merging of adjacent cells within the same column when identical values are detected. This improves readability by consolidating repeated values into a single taller cell, which is especially useful when the same value appears across consecutive rows.
13
13
14
-
The functionality is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AutoSpan) property of the `SfTreeGrid` component to `AutoSpanMode.Column`. Once applied, the TreeGrid evaluates each column and merges stacked cells that share identical values, thereby reducing visual redundancy and presenting a cleaner, more structured layout. The merging process is fully declarative and requires no additional code or preprocessing.
15
-
16
-
Column spanning is part of the broader `AutoSpanMode` enumeration, which provides multiple options for customizing cell merging behavior in the Blazor TreeGrid. The available modes include `None`, `Row`, `Column`, and `HorizontalAndVertical`.
| AutoSpanMode.Row | Enables horizontal merging across columns within the same row. |
24
-
| AutoSpanMode.Column | Enables vertical merging of adjacent cells with identical values in the same column. |
25
-
| AutoSpanMode.HorizontalAndVertical | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. |
26
-
27
-
28
-
## Enabling column spanning
29
-
30
-
Vertical cell merging in the Blazor TreeGrid is enabled by setting the `AutoSpan` property of the `SfTreeGrid` component to `AutoSpanMode.Column`. In this mode, the TreeGrid automatically merges stacked cells that share identical values within the same column. This reduces redundancy across consecutive rows and provides a cleaner, more structured layout for repeated data. The merging process is fully declarative and requires no additional code or preprocessing.
14
+
Column spanning is enabled by setting the [AutoSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AutoSpan) property of the `SfTreeGrid` component to `AutoSpanMode.Column`. When activated, the TreeGrid evaluates each column and merges stacked cells that share identical values, thereby reducing visual redundancy and presenting a cleaner, more structured layout. The merging process is fully declarative and requires no additional code or preprocessing.
31
15
32
16
{% tabs %}
33
17
{% highlight razor tabtitle="Index.razor" %}
@@ -96,6 +80,15 @@ Vertical cell merging in the Blazor TreeGrid is enabled by setting the `AutoSpan
96
80
{% endhighlight %}
97
81
{% endtabs %}
98
82
83
+
## AutoSpanMode enumeration
84
+
85
+
Column spanning is part of the broader `AutoSpanMode` enumeration, which provides multiple options for customizing cell merging behavior in the Blazor TreeGrid. The available modes are:
| AutoSpanMode.Row | Enables horizontal merging across columns within the same row. |
90
+
| AutoSpanMode.Column | Enables vertical merging of adjacent cells with identical values in the same column. |
91
+
| AutoSpanMode.HorizontalAndVertical | Enables both horizontal and vertical merging. Executes row merging first, followed by column merging. |
99
92
100
93
## Disable column spanning for specific column
101
94
@@ -497,21 +490,21 @@ Spanning in the Syncfusion Blazor TreeGrid can be disabled at the column level b
497
490
{% endhighlight %}
498
491
{% endtabs %}
499
492
500
-
The effective spanning behavior in the Blazor TreeGrid is determined by the intersection of TreeGrid-level and column-level `AutoSpan` modes. A column can only restrict the spanning directions permitted at the TreeGrid level and cannot enable a span direction that has been disabled globally. This ensures consistent behavior across the TreeGrid while allowing fine-grained control for individual columns.
493
+
## Controlling spanning at the TreeGrid and column levels
501
494
502
-
### Complete combination matrix
495
+
The spanning behavior is determined by how the TreeGrid‑level and column‑level `AutoSpan` settings interact. When spanning is disabled at the TreeGrid level, all spanning directions are turned off globally, and column settings cannot override this restriction. Column‑level `AutoSpan` can only narrow the spanning directions permitted by the TreeGrid, ensuring consistent behavior across the component while still allowing fine‑grained control at the column level.
| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). |
541
-
| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). |
542
-
| RowSpan | int (optional) | The number of rows to span, starting from the anchor cell. By default set to 1. |
543
-
| ColumnSpan | int (optional) | The number of columns to span, starting from the anchor cell. By default set to 1. |
533
+
|`RowIndex`| int | The zero-based index of the anchor row (top-left cell of the merged region). |
534
+
|`ColumnIndex`| int | The zero-based index of the anchor column (top-left cell of the merged region). |
535
+
|`RowSpan`| int (optional) | The number of rows to span, starting from the anchor cell. By default set to 1. |
536
+
|`ColumnSpan`| int (optional) | The number of columns to span, starting from the anchor cell. By default set to 1. |
544
537
545
538
The following sample demonstrates programmatic column spanning by calling `MergeCellsAsync` with parameters such as `RowIndex`, `ColumnIndex`, and `ColumnSpan` for a single merge, and by passing multiple `MergeCellInfo` objects with the same parameters in an array for batch merging.
546
539
@@ -772,12 +765,12 @@ The Blazor TreeGrid provides API support to manually remove merged regions when
772
765
|`UnmergeCellsAsync`| infos |`IEnumerable<UnmergeCellInfo>`| Removes multiple merged areas in one combined operation, improving performance by reducing re‑renders. |
773
766
|`UnmergeAllAsync`| – | – | Removes all merged regions in the current view, restoring every cell to its original state. |
774
767
775
-
To identify a merged region, use the following properties of the UnmergeCellInfo class:
768
+
To identify a merged region, use the following properties of the `UnmergeCellInfo` class:
| RowIndex | int | The zero-based index of the anchor row (top-left cell of the merged region). |
780
-
| ColumnIndex | int | The zero-based index of the anchor column (top-left cell of the merged region). |
772
+
|`RowIndex`| int | The zero-based index of the anchor row (top-left cell of the merged region). |
773
+
|`ColumnIndex`| int | The zero-based index of the anchor column (top-left cell of the merged region). |
781
774
782
775
This sample demonstrates clearing merged regions in the TreeGrid by calling `UnmergeCellsAsync` with parameters such as `RowIndex` and `ColumnIndex` to remove specific spans, passing multiple `UnmergeCellInfo` objects for batch unmerging, and using `UnmergeAllAsync` to reset all merged cells at once.
783
776
@@ -1030,7 +1023,7 @@ public class ProjectTask
1030
1023
1031
1024
## Limitations
1032
1025
1033
-
The following list outlines the features that are not compatible with row spanning.
1026
+
The following list outlines the features that are not compatible with column spanning.
1034
1027
1035
1028
* Virtualization
1036
1029
* Infinite Scrolling
@@ -1042,6 +1035,6 @@ The following list outlines the features that are not compatible with row spanni
1042
1035
1043
1036
## See also
1044
1037
1045
-
*[Column spanning in Syncfusion<supstyle="font-size:70%">®</sup> TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/columns/column-spanning)
1038
+
*[Column spanning in Syncfusion<supstyle="font-size:70%">®</sup> TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/rows/row-spanning)
The Blazor TreeGrid filtering feature lets you choose whether to match uppercase and lowercase letters exactly or ignore them. 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**.
420
+
The Blazor TreeGrid filtering functionality allows control over whether uppercase and lowercase letters must match exactly or can be ignored. 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**.
421
421
422
422
The following example demonstrates configuration of the `EnableCaseSensitivity` property within `TreeGridFilterSettings`:
0 commit comments