Skip to content

Commit 9922b83

Browse files
committed
998328: Updated documentation for blazor tree grid
1 parent 622e205 commit 9922b83

File tree

7 files changed

+1917
-105
lines changed

7 files changed

+1917
-105
lines changed

blazor-toc.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4878,7 +4878,7 @@
48784878
<li><a href="/blazor/treegrid/columns/column-template">Column Template</a></li>
48794879
<li><a href="/blazor/treegrid/columns/column-reorder">Column Reorder</a></li>
48804880
<li><a href="/blazor/treegrid/columns/column-menu">Column Menu</a></li>
4881-
<li><a href="/blazor/treegrid/columns/column-spanning">Column Menu</a></li>
4881+
<li><a href="/blazor/treegrid/columns/column-spanning">Column Spanning</a></li>
48824882
</ul>
48834883
</li>
48844884
<li>
@@ -4888,7 +4888,7 @@
48884888
<li><a href="/blazor/treegrid/rows/row-template">Row Template</a></li>
48894889
<li><a href="/blazor/treegrid/rows/detail-template">Detail Template</a></li>
48904890
<li><a href="/blazor/treegrid/rows/row-drag-and-drop">Row Drag and Drop</a></li>
4891-
<li><a href="/blazor/treegrid/rows/row-spanning">Row Drag and Drop</a></li>
4891+
<li><a href="/blazor/treegrid/rows/row-spanning">Row Spanning</a></li>
48924892
</ul>
48934893
</li>
48944894
<li> <a href="/blazor/treegrid/templates">Templates</a></li>

blazor/treegrid/columns/column-spanning.md

Lines changed: 956 additions & 46 deletions
Large diffs are not rendered by default.

blazor/treegrid/filtering/filtering.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,7 @@ namespace TreeGridComponent.Data {
417417

418418
## Filtering with case sensitivity
419419

420-
The Syncfusion<sup style="font-size:70%">&reg;</sup> 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**.
420+
The Syncfusion<sup style="font-size:70%">&reg;</sup> 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**.
421421

422422
The following example demonstrates configuration of the `EnableCaseSensitivity` property within `TreeGridFilterSettings`:
423423

blazor/treegrid/paging.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,6 @@ N> Better performance can be achieved by using tree grid paging to fetch only a
8484

8585
## Page size mode
8686

87-
## Page size mode
88-
8987
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.
9088

9189
* **All** : Page size is calculated using the entire hierarchy, including both root and child records.

blazor/treegrid/rows/row-spanning.md

Lines changed: 953 additions & 46 deletions
Large diffs are not rendered by default.

blazor/treegrid/searching.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ namespace TreeGridComponent.Data {
312312

313313
## Searching with case sensitivity
314314

315-
The Syncfusion<sup style="font-size:70%">&reg;</sup> 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**.
315+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid searching functionality lets you choose whether to match uppercase and lowercase letters exactly or ignore them. By default, searching is not case-sensitive, meaning matches are found regardless of character case (e.g., "Task" and "task" are treated the same). Case-Sensitive 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 **false**.
316316

317317
The following example demonstrates configuration of the `IgnoreCase` property within `TreeGridSearchSettings`:
318318

blazor/treegrid/sorting.md

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ Sorting enables to sort data in the **Ascending** or **Descending** order. To so
1414
To enable sorting in the Tree Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) to true. Sorting options can be configured through the [TreeGridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSortSettings.html).
1515

1616
{% tabs %}
17-
1817
{% highlight razor %}
19-
2018
@using TreeGridComponent.Data;
2119
@using Syncfusion.Blazor.TreeGrid;
2220

@@ -44,7 +42,6 @@ To enable sorting in the Tree Grid, set the [AllowSorting](https://help.syncfusi
4442
}
4543

4644
{% endhighlight %}
47-
4845
{% highlight c# %}
4946

5047
namespace TreeGridComponent.Data {
@@ -255,7 +252,7 @@ When the tree grid header is tapped on the touchscreen devices, the selected col
255252

256253
The Syncfusion<sup style="font-size:70%">&reg;</sup> 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`.
257254

258-
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.
255+
In this TreeGrid example, custom sorting enhances project management by allowing the "Priority" column to be sorted based on a predefined hierarchy (Low, Normal, High, Critical) 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.
259256

260257
{% tabs %}
261258
{% highlight razor tabtitle="Index.razor" %}
@@ -611,6 +608,6 @@ namespace TreeGridComponent.Data {
611608

612609
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrSWVWZprFrLETz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
613610

614-
> * 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.
615-
> * The SortComparer property will work only for local data.
616-
> * 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.
611+
> * The `SortComparer` function takes two parameters: `a` and `b`. These parameters represent the values to be compared. The function returns **-1**, **0**, or **1**, depending on the comparison result, which showcases the sorting order.
612+
> * The `SortComparer` property will work only for local data.
613+
> * 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` property.

0 commit comments

Comments
 (0)