Skip to content

Commit 36b5a83

Browse files
thavasianandthavasianand
authored
Merge pull request #6727 from syncfusion-content/983239-treegrid5
983239: scrolling, searching, sorting and state-management updated
2 parents 2e8aab0 + 95f1f22 commit 36b5a83

File tree

5 files changed

+124
-129
lines changed

5 files changed

+124
-129
lines changed

‎blazor/treegrid/scrolling.md‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
---
22
layout: post
33
title: Scrolling in Blazor TreeGrid Component | Syncfusion
4-
description: Checkout and learn here all about scrolling in Syncfusion Blazor TreeGrid component and much more details.
4+
description: Learn how to configure scrolling, sticky headers, frozen rows and columns, and programmatic scroll in the Syncfusion Blazor TreeGrid component.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Scrolling in Blazor TreeGrid Component
10+
# Scrolling in Syncfusion Blazor TreeGrid Component
1111

12-
The scrollbar will be displayed in the tree grid when the content exceeds the element [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) or [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height). The vertical and horizontal scrollbars will be displayed based on the following criteria:
12+
Scrollbars are displayed in the TreeGrid when the content exceeds the defined [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) or [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) of the component. Vertical and horizontal scrollbars appear based on the following conditions:
1313

14-
The vertical scrollbar appears when the total height of rows present in the tree grid exceeds its element height. The horizontal scrollbar appears when the sum of the columns' width exceeds the tree grid element width. The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) are used to set the tree grid height and width, respectively.
14+
The vertical scrollbar appears when the total height of rows present in the TreeGrid exceeds its element height. The horizontal scrollbar appears when the sum of the columns' width exceeds the TreeGrid element width. The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) are used to set the TreeGrid height and width, respectively.
1515

1616
N> The default value for [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) is **auto**.
1717

18-
## Set width and height
18+
## Set Width and Height
1919

20-
To specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) of the scroller in the pixel, set the pixel value to a number.
20+
To define the TreeGrid's dimensions in pixels, assign numeric values to the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) properties.
2121

2222
{% tabs %}
2323

@@ -85,9 +85,9 @@ public class TreeData
8585

8686
![Scrolling in Blazor TreeGrid](images/blazor-treegrid-scrolling.png)
8787

88-
## Responsive with parent container
88+
## Responsive Layout with Parent Container
8989

90-
Specify the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) as **100%** to make the tree grid element fill its parent container. Setting the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) to **100%** requires the tree grid parent element to have explicit height.
90+
To make the TreeGrid fill its parent container, set the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) properties to **100%**. When [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Height) is set to **100%**, the parent container must have an explicitly defined height.
9191

9292
{% tabs %}
9393

@@ -170,7 +170,7 @@ public class TreeData
170170
<!--
171171
Scroll to selected row
172172
173-
You can scroll the tree grid content to the selected row position by using the [`RowSelected`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowSelected) event.
173+
Scroll the TreeGrid content to the selected row position by using the [`RowSelected`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowSelected) event.
174174
175175
```csharp
176176
@@ -206,7 +206,7 @@ You can scroll the tree grid content to the selected row position by using the [
206206

207207
## Sticky header
208208

209-
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid provides a feature that allows column headers to remain fixed while scrolling, ensuring they stay visible at all times. To achieve this, you can use the `EnableStickyHeader` property by setting it to **true**.
209+
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid provides a feature that allows column headers to remain fixed while scrolling, ensuring they stay visible at all times. This behavior can be enabled by setting the `EnableStickyHeader` property to **true**.
210210

211211
In the below demo, the TreeGrid headers remain sticky while scrolling within the TreeGrid's parent div element.
212212

@@ -218,42 +218,42 @@ In the below demo, the TreeGrid headers remain sticky while scrolling within the
218218
@using Syncfusion.Blazor.Buttons
219219

220220
<div>
221-
<label>Enable or Disable Sticky Header</label>
222-
<SfSwitch ValueChange="Change" TChecked="bool" style="margin-top:5px"></SfSwitch>
221+
<label>Enable or Disable Sticky Header</label>
222+
<SfSwitch ValueChange="Change" TChecked="bool" style="margin-top:5px"></SfSwitch>
223223
</div>
224224

225225
<div style="height:350px; margin-top:5px">
226-
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData" EnableStickyHeader="@isStickyHeaderEnabled" IdMapping="TaskID" TreeColumnIndex="1" ParentIdMapping="ParentID" >
227-
<TreeGridColumns>
228-
<TreeGridColumn Field="TaskID" HeaderText="Jersey No" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
229-
<TreeGridColumn Field="FIELD1" HeaderText="Name" Width="150"></TreeGridColumn>
230-
<TreeGridColumn Field="FIELD2" HeaderText="Year" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
231-
<TreeGridColumn Field="FIELD3" HeaderText="Stint" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
232-
<TreeGridColumn Field="FIELD4" HeaderText="TMID" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
233-
<TreeGridColumn Field="FIELD5" HeaderText="LGID" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
234-
<TreeGridColumn Field="FIELD6" HeaderText="GP" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
235-
<TreeGridColumn Field="Field7" HeaderText="GS" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
236-
<TreeGridColumn Field="Field8" HeaderText="Minutes" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
237-
<TreeGridColumn Field="Field9" HeaderText="Points" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
238-
</TreeGridColumns>
239-
</SfTreeGrid>
226+
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeData" EnableStickyHeader="@isStickyHeaderEnabled" IdMapping="TaskID" TreeColumnIndex="1" ParentIdMapping="ParentID" >
227+
<TreeGridColumns>
228+
<TreeGridColumn Field="TaskID" HeaderText="Jersey No" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
229+
<TreeGridColumn Field="FIELD1" HeaderText="Name" Width="150"></TreeGridColumn>
230+
<TreeGridColumn Field="FIELD2" HeaderText="Year" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
231+
<TreeGridColumn Field="FIELD3" HeaderText="Stint" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
232+
<TreeGridColumn Field="FIELD4" HeaderText="TMID" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
233+
<TreeGridColumn Field="FIELD5" HeaderText="LGID" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
234+
<TreeGridColumn Field="FIELD6" HeaderText="GP" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
235+
<TreeGridColumn Field="Field7" HeaderText="GS" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
236+
<TreeGridColumn Field="Field8" HeaderText="Minutes" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
237+
<TreeGridColumn Field="Field9" HeaderText="Points" TextAlign="TextAlign.Right" Width="150"></TreeGridColumn>
238+
</TreeGridColumns>
239+
</SfTreeGrid>
240240
</div>
241241

242242
@code {
243-
public SfTreeGrid<sampleData> TreeGrid;
244-
public List<sampleData> TreeData { get; set; }
245-
public bool isStickyHeaderEnabled;
246-
247-
protected override void OnInitialized()
248-
{
249-
this.TreeData = sampleData.GetTreeSampleData().ToList();
250-
}
251-
252-
private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
253-
{
254-
isStickyHeaderEnabled = args.Checked;
255-
TreeGrid.RefreshAsync();
256-
}
243+
public SfTreeGrid<sampleData> TreeGrid;
244+
public List<sampleData> TreeData { get; set; }
245+
public bool isStickyHeaderEnabled;
246+
247+
protected override void OnInitialized()
248+
{
249+
this.TreeData = sampleData.GetTreeSampleData().ToList();
250+
}
251+
252+
private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
253+
{
254+
isStickyHeaderEnabled = args.Checked;
255+
TreeGrid.RefreshAsync();
256+
}
257257
}
258258

259259
{% endhighlight %}
@@ -335,7 +335,7 @@ namespace TreeGridComponent.Data
335335

336336
## Frozen rows and columns
337337

338-
Frozen rows and columns provides an option to make rows and columns always visible in the top and left side of the tree grid while scrolling.
338+
Frozen rows and columns provides an option to make rows and columns always visible in the top and left side of the TreeGrid while scrolling.
339339

340340
In this demo, the [FrozenColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenColumns) is set as **2** and the [FrozenRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_FrozenRows) is set as **3**. Hence, the left two columns and top three rows are frozen.
341341

@@ -407,7 +407,7 @@ public class TreeData
407407

408408
### Freeze particular columns
409409

410-
To freeze particular column in the tree grid, the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_IsFrozen) property can be used.
410+
To freeze particular column in the TreeGrid, the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_IsFrozen) property can be used.
411411

412412
In this demo, the columns with the field name **TaskName** and **Duration** is frozen using the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_IsFrozen) property.
413413

@@ -529,12 +529,12 @@ The [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tr
529529

530530
{% endtabs %}
531531

532-
N> If frozen columns are not specified, the frozen column separator will be displayed at the left and right ends. You can dynamically change the frozen columns by dragging the column separator.
532+
N> If frozen columns are not specified, the frozen column separator will be displayed at the left and right ends. Frozen columns can be dynamically changed by dragging the column separator.
533533

534534
![Add or Remove Frozen Blazor TreeGrid Columns by Dragging the Column Separator](./images/blazor-treegrid-freeze-line-moving.gif)
535535

536536
## Scroll the content programmatically
537-
This section shows you how to invoke a [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ScrollIntoViewAsync) method to scroll the tree grid content into view externally by passing column index or row index as parameter.
537+
This section demonstrates how to invoke the [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ScrollIntoViewAsync) method to scroll TreeGrid content into view externally by passing the column index or row index as a parameter.
538538

539539
In the below demo, modifying the RowIndex value triggers a vertical scroll, while changing the ColumnIndex value initiates a horizontal scroll when the corresponding button is clicked.
540540
```cshtml
@@ -654,4 +654,4 @@ In the below demo, modifying the RowIndex value triggers a vertical scroll, whil
654654
}
655655
}
656656
```
657-
![Blazor Tree Grid Scroll programmatically](./images/blazor-treegrid-scroll-programmatically.gif)
657+
![Blazor TreeGrid Scroll programmatically](./images/blazor-treegrid-scroll-programmatically.gif)

‎blazor/treegrid/searching.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
33
title: Searching in Blazor TreeGrid Component | Syncfusion
4-
description: Checkout and learn here all about Searching in Syncfusion Blazor TreeGrid component and much more details.
4+
description: Learn all about Searching in the Syncfusion Blazor TreeGrid component, including toolbar integration, external triggers, and search customization.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

1010
# Searching in Blazor TreeGrid Component
1111

12-
In a Tree Grid, the records are searched by using the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_SearchAsync_System_String_) method with search key as a parameter. This also provides an option to integrate search text box in tree grid's toolbar by adding **Search** item to the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Toolbar).
12+
In a TreeGrid, records can be searched using the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_SearchAsync_System_String_) method by passing a search key as a parameter. A search textbox can also be integrated into the TreeGrid toolbar by adding the **Search** item to the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Toolbar).
1313

1414
{% tabs %}
1515

@@ -77,7 +77,7 @@ namespace TreeGridComponent.Data {
7777

7878
## Initial search
7979

80-
To apply search at initial rendering, set the Fields, Operator, Key, and IgnoreCase in the [TreeGridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html).
80+
To apply search during initial rendering, configure the `Fields`, `Operator`, `Key`, and `IgnoreCase` properties in the [TreeGridSearchSettings](https://help.syncfusion.com/cr/blazor/SyncfusionSearchSettings.html).
8181

8282
{% tabs %}
8383

@@ -146,27 +146,27 @@ namespace TreeGridComponent.Data {
146146

147147
![Blazor TreeGri with Initial Search](images/blazor-treegrid-initial-search.png)
148148

149-
N> By default, tree grid searches all the bound column values. To customize this behavior define the [TreeGridSearchSettings.Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSearchSettings_Fields) property.
149+
N> By default, the TreeGrid searches all bound column values. To customize this behavior, define the `Fields` property in [TreeGridSearchSettings.Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSearchSettings_Fields) property.
150150

151-
## Search operators
151+
## Search Operators
152152

153153
The search operator can be defined in the [Operators](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSearchSettings_Operator) property of the [TreeGridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html) to configure specific searching.
154154

155-
The following operators are supported in searching:
155+
The following operators are supported:
156156

157-
Operator |Description
158-
-----|-----
159-
startsWith |Checks whether a value begins with the specified value.
160-
endsWith |Checks whether a value ends with the specified value.
161-
contains |Checks whether a value contains the specified value.
162-
equal |Checks whether a value is equal to the specified value.
163-
notEqual |Checks for values not equal to the specified value.
157+
| Operator | Description |
158+
|------------|--------------------------------------------------|
159+
| startsWith | Checks if a value begins with the specified text |
160+
| endsWith | Checks if a value ends with the specified text |
161+
| contains | Checks if a value contains the specified text |
162+
| equal | Checks if a value is equal to the specified text |
163+
| notEqual | Checks if a value is not equal to the text |
164164

165-
N> By default, the [Operators](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSearchSettings_Operator) value is **contains**.
165+
> The default operator is **contains**.
166166
167-
## Search by external button
167+
## Search by External Button
168168

169-
To search tree grid records from an external button, invoke the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_SearchAsync_System_String_) method.
169+
TreeGrid records can be searched from an external button by invoking the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_SearchAsync_System_String_) method.
170170

171171
{% tabs %}
172172

@@ -238,9 +238,9 @@ namespace TreeGridComponent.Data {
238238

239239
{% endtabs %}
240240

241-
## Search specific columns
241+
## Search Specific Columns
242242

243-
By default, the tree grid searches all the visible columns. Specific columns can be searched by defining the specific column's field names in the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSearchSettings_Fields) property of the [TreeGridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html).
243+
By default, the TreeGrid searches all visible columns. To restrict the search to specific columns, define the desired field names in the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSearchSettings_Fields) property of [TreeGridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSearchSettings.html).
244244

245245
{% tabs %}
246246

0 commit comments

Comments
 (0)