Skip to content

Commit fcf0476

Browse files
thavasianandthavasianand
authored
Merge pull request #6692 from syncfusion-content/983239-HowTo5
983239: How To 4 files updated
2 parents 8b02f95 + 2486e39 commit fcf0476

File tree

4 files changed

+34
-35
lines changed

4 files changed

+34
-35
lines changed

‎blazor/treegrid/how-to/single-click-editing-with-batch-mode.md‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
---
22
layout: post
3-
title: Single click editing with Batch mode in Blazor TreeGrid | Syncfusion
4-
description: Learn here all about single click editing with Batch mode in Syncfusion Blazor TreeGrid component and more.
3+
title: Single click Editing with Batch mode in Blazor TreeGrid | Syncfusion
4+
description: Learn how to enable single-click cell editing in the Syncfusion Blazor TreeGrid component using Batch mode and EditCellAsync method.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Single click editing with Batch mode in Blazor TreeGrid Component
10+
# Single Click Editing with Batch Mode in Blazor TreeGrid Component
1111

12-
A cell is made editable on a single click with a [Batch](https://blazor.syncfusion.com/documentation/treegrid/edit#batch) mode of editing in TreeGrid, by using the [EditCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EditCellAsync_System_Int32_System_String_) method.
12+
A cell can be made editable with a single click when using [Batch](https://blazor.syncfusion.com/documentation/treegrid/edit#batch) editing mode in the TreeGrid. This is achieved using the [EditCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EditCellAsync_System_Int32_System_String_) method.
1313

14-
Set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSelectionSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSelectionSettings_Mode) property of **TreeGridSelectionSettings** component to **Both** and bind the [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_CellSelected) event to Tree Grid. In the [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_CellSelected) event handler, call the [EditCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EditCellAsync_System_Int32_System_String_) method based on the clicked cell.
14+
To implement this:
15+
- Set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSelectionSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSelectionSettings_Mode) property of the **TreeGridSelectionSettings** component to **Both**.
16+
- Bind the [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_CellSelected) event.
17+
- In the [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_CellSelected) event handler, invoke the [EditCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EditCellAsync_System_Int32_System_String_) method based on the clicked cell.
1518

1619
{% tabs %}
1720

1821
{% highlight razor %}
1922

2023
@using TreeGridComponent.Data;
21-
@using Syncfusion.Blazor.Grids;
22-
@using Syncfusion.Blazor.TreeGrid;
24+
@using Syncfusion.Blazor.Grids;
25+
@using Syncfusion.Blazor.TreeGrid;
2326

2427
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" AllowPaging="true" TreeColumnIndex="1" Toolbar="@(new List<string>() { "Cancel", "Update" })">
2528
<TreeGridEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Batch"></TreeGridEditSettings>
@@ -91,9 +94,8 @@ public class TreeData
9194
}
9295

9396
{% endhighlight %}
94-
9597
{% endtabs %}
9698

97-
The following GIF represents the single click edit performed on the Tree Grid with Edit Mode as "Batch",
99+
The following GIF represents the single-click edit performed on the TreeGrid with Edit Mode set to "Batch":
98100

99101
![Single Click Editing in Blazor TreeGrid](../images/blazor-treegrid-single-click-editing.gif)

‎blazor/treegrid/how-to/tool-bar-with-drop-down-list.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
---
22
layout: post
3-
title: Custom toolbar with drop-down list in Blazor TreeGrid | Syncfusion
4-
description: Learn here all about how to create custom toolbar with drop-down list in Syncfusion Blazor TreeGrid component and more.
3+
title: Custom Toolbar with Drop-Down List in Blazor TreeGrid | Syncfusion.
4+
description: Learn how to create a custom toolbar with a drop-down list in the Syncfusion Blazor TreeGrid component and more.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Create custom toolbar with drop-down list in Blazor TreeGrid Component
10+
# Create Custom Toolbar with Drop-Down List in Blazor TreeGrid Component
1111

12-
ToolBar items can be created in the Tree Grid. It can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Toolbar). Actions for this ToolBar template items are defined in the [ToolbarClick`]
12+
Custom toolbar items can be added to the TreeGrid using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Toolbar) property. Actions for these toolbar template items can be defined using the `ToolbarClick` event.
1313

1414
**Step 1**:
1515

16-
Initialize the template for the custom component. Using the following code add the DropDownList component to the ToolBar.
16+
Initialize the template for the custom component. The following code adds a `DropDownList` component to the ToolBar.
1717

1818
```cshtml
1919
<SfToolbar>
@@ -32,7 +32,7 @@ Initialize the template for the custom component. Using the following code add t
3232

3333
**Step 2**:
3434

35-
To render the DropDownList component, use the [DropDownListEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html). The Tree Grid row index can be selected based on the selected data in the DropDownList.
35+
To render the `DropDownList` component, use the [DropDownListEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html). The TreeGrid row index can be selected based on the selected value in the Drop-Down List.
3636

3737
{% tabs %}
3838

‎blazor/treegrid/how-to/treegrid-customization.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
---
22
layout: post
3-
title: Tree Grid customization in Blazor TreeGrid Component | Syncfusion
4-
description: Checkout and learn here all about Tree Grid customization in Syncfusion Blazor TreeGrid component and more.
3+
title: Customization in Blazor TreeGrid Component | Syncfusion
4+
description: Learn how to customize styles in the Syncfusion Blazor TreeGrid component using dynamic class assignment and event handling.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Tree Grid customization in Blazor TreeGrid Component
10+
# Customization in Syncfusion Blazor TreeGrid Component
1111

12-
It is possible to customize the default styles of the Tree Grid component. This can be achieved by adding class dynamically to the columns using the `AddClass` method of the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_QueryCellInfo) event. Then the required styles are added to this class.
12+
The default styles of the TreeGrid component can be customized by dynamically adding CSS classes to cells using the `AddClass` method within the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_QueryCellInfo) event. Styles can then be defined for these classes in the application's stylesheet.
1313

1414
{% tabs %}
1515

1616
{% highlight razor %}
1717

1818
@using TreeGridComponent.Data;
19-
@using Syncfusion.Blazor.Grids;
20-
@using Syncfusion.Blazor.TreeGrid;
19+
@using Syncfusion.Blazor.Grids;
20+
@using Syncfusion.Blazor.TreeGrid;
2121

2222
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1"
2323
AllowPaging="true">

‎blazor/treegrid/how-to/using-dictionary-values-in-treegrid-data-source.md‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
---
22
layout: post
3-
title: Using dictionary as datasource in Blazor TreeGrid | Syncfusion
4-
description: Learn here all about using dictionary values in Tree Grid datasource in Syncfusion Blazor TreeGrid component and more.
3+
title: Using Dictionary as DataSource in Blazor TreeGrid | Syncfusion
4+
description: Learn how to use dictionary values in the TreeGrid DataSource in Syncfusion Blazor TreeGrid component.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Using dictionary values as datasource in Blazor TreeGrid Component
11-
12-
The dictionary values can be assigned in the Tree Grid's data source by accessing them using **KeyValuePair** data type inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) component
13-
14-
This is demonstrated in the below sample code where **Designation** is defined as Dictionary value and it is accessed inside the template property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) using **KeyValuePair** data type. The key value is compared with the **TaskId** column value and based on that the value is displayed.
10+
# Using Dictionary values as DataSource in Blazor TreeGrid Component
1511

12+
Dictionary values can be assigned to the Tree Grid's data source by accessing them using **KeyValuePair** data type inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) component.
1613

14+
The following sample demonstrates how **Designation** is defined as a dictionary and accessed inside the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) using **KeyValuePair** is compared with the **TaskId** column value, and the corresponding value is displayed.
1715

1816
```cshtml
19-
2017
@using TreeGridComponent.Data;
21-
@using Syncfusion.Blazor.Grids;
22-
@using Syncfusion.Blazor.TreeGrid;
18+
@using Syncfusion.Blazor.Grids;
19+
@using Syncfusion.Blazor.TreeGrid;
2320
2421
2522
<SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" AllowPaging="true"

0 commit comments

Comments
 (0)