Skip to content

Commit 5671270

Browse files
thavasianandthavasianand
authored
Merge pull request #6680 from syncfusion-content/983239-HowTo4
983239: How to folder 5 files updated
2 parents 42d71c9 + 9f689ec commit 5671270

File tree

5 files changed

+44
-38
lines changed

5 files changed

+44
-38
lines changed

‎blazor/treegrid/how-to/prevent-default-treegrid-action.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
---
22
layout: post
33
title: Prevent default Grid action in Blazor TreeGrid Component | Syncfusion
4-
description: Learn here all about how to prevent default Tree Grid action in Syncfusion Blazor TreeGrid component and more.
4+
description: Learn how to prevent default actions such as Add in the Syncfusion Blazor TreeGrid component using the RowCreating event.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Prevent default Tree Grid action in Blazor TreeGrid Component
10+
# Prevent Default TreeGrid Action in Blazor TreeGrid Component
1111

12-
The default Tree Grid actions can be prevented by canceling them in the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowCreating) event.
12+
Default actions in the Blazor TreeGrid component can be prevented by canceling them within the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowCreating) event
1313

14-
This is demonstrated in the below sample code where the `Add` operation is prevented by setting `Cancel` argument value of the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowCreating) event to **false**.
14+
The following example demonstrates how to prevent the `Add` operation by setting the `Cancel` argument of the [RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowCreating) event to `true`.
1515

1616
{% tabs %}
1717

1818
{% highlight razor %}
1919

2020
@using TreeGridComponent.Data;
21-
@using Syncfusion.Blazor.Grids;
22-
@using Syncfusion.Blazor.TreeGrid;
21+
@using Syncfusion.Blazor.Grids;
22+
@using Syncfusion.Blazor.TreeGrid;
2323

2424
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId"
2525
TreeColumnIndex="1" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Edit","Update", "Cancel" })">
@@ -87,4 +87,4 @@ public class TreeData
8787

8888
{% endhighlight %}
8989

90-
{% endtabs %}
90+
{% endtabs %}

‎blazor/treegrid/how-to/render-treegrid-inside-tab-with-specific-height.md‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
---
22
layout: post
33
title: Blazor TreeGrid Component inside the Tab | Syncfusion
4-
description: Learn here all about rendering Blazor TreeGrid component inside the Tab with specific height and more.
4+
description: Learn how to render the Blazor TreeGrid component inside a Tab with a specific height and avoid layout issues.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Render Blazor TreeGrid Component inside the Tab with specific height
10+
# Render Blazor TreeGrid Component inside the Tab with Specific Height
1111

12-
By default, Tree Grid will occupy the entire space of the parent element when the Tree Grid [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) property is defined as 100%. But if the similar Tree Grid is rendered inside the Tab control, it will consider the entire page and render the Tree Grid without horizontal scroller.
12+
By default, the TreeGrid occupies the full space of its parent element when 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 are set to `100%`. However, when the TreeGrid is rendered inside a Tab control, it may incorrectly calculate its dimensions based on the entire page, resulting in layout issues such as the absence of a horizontal scrollbar.
13+
14+
To resolve this, ensure that the parent container of the TreeGrid (inside the Tab) has a defined height. This allows the TreeGrid to correctly render with scrollbars and proper layout.
1315

1416
{% tabs %}
1517

1618
{% highlight razor %}
1719

1820
@using TreeGridComponent.Data;
19-
@using Syncfusion.Blazor.Grids;
20-
@using Syncfusion.Blazor.TreeGrid;
21+
@using Syncfusion.Blazor.Grids;
22+
@using Syncfusion.Blazor.TreeGrid;
2123
@using Syncfusion.Blazor.Navigations
2224

2325
<div style="height:300px">
@@ -111,7 +113,7 @@ namespace TreeGridComponent.Data {
111113
public DateTime? StartDate { get; set; }
112114
public DateTime? EndDate { get; set; }
113115
public int? Duration { get; set; }
114-
public String Progress { get; set; }
116+
public string Progress { get; set; }
115117
public string Priority { get; set; }
116118
public bool Approved { get; set; }
117119
public int Resources { get; set; }

‎blazor/treegrid/how-to/row-cell-index.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
---
22
layout: post
3-
title: Get index value of selected rowcell in Blazor TreeGrid | Syncfusion
4-
description: Learn here all about how to get index value of selected rowcell in Syncfusion Blazor TreeGrid component and more.
3+
title: Get Index Value of Selected Row Cell in Blazor TreeGrid | Syncfusion
4+
description: Learn how to get the index value of a selected row cell in the Syncfusion Blazor TreeGrid component and more.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Get index value of selected row cell in Blazor TreeGrid Component
10+
# Get Index Value of Selected Row Cell in Blazor TreeGrid Component
1111

12-
The index value of a selected row cell or row is got by using the [GetSelectedRowCellIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_GetSelectedRowCellIndexesAsync) method of the Tree Grid component.
12+
The index value of a selected row or cell in the Blazor TreeGrid component can be retrieved using the [GetSelectedRowCellIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_GetSelectedRowCellIndexesAsync) method of the TreeGrid component.
1313

14-
This is demonstrated in the below sample code where the [GetSelectedRowCellIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_GetSelectedRowCellIndexesAsync) method is called on button click which returns the selected row cell indexes,
14+
The following example demonstrates how to use the [GetSelectedRowCellIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_GetSelectedRowCellIndexesAsync) method on a button click to return the selected row cell indexes.
1515

1616
{% tabs %}
1717

1818
{% highlight razor %}
1919

2020
@using TreeGridComponent.Data;
21-
@using Syncfusion.Blazor.Buttons
22-
@using Syncfusion.Blazor.Grids;
23-
@using Syncfusion.Blazor.TreeGrid;
21+
@using Syncfusion.Blazor.Buttons;
22+
@using Syncfusion.Blazor.Grids;
23+
@using Syncfusion.Blazor.TreeGrid;
2424

2525
<SfButton OnClick="SelectedRowCellIndex" CssClass="e-primary" IsPrimary="true" Content="Get selected rowcell index"></SfButton>
2626

@@ -87,4 +87,4 @@ public class TreeData
8787

8888
{% endtabs %}
8989

90-
N> For getting the row cell index value, the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSelectionSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSelectionSettings_Mode) property of the [TreeGridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSelectionSettings.html) component should be set as **Cell**.
90+
> Note: To retrieve the row cell index value, the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSelectionSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridSelectionSettings_Mode) property of the [TreeGridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridSelectionSettings.html) component must be set to **Cell**.

‎blazor/treegrid/how-to/select-treegrid-rows-based-on-condition.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
---
22
layout: post
3-
title: Select rows based on certain condition in Blazor TreeGrid | Syncfusion
4-
description: Learn here all about selecting rows based on certain condition in Syncfusion Blazor TreeGrid component and more.
3+
title: Select Rows based on certain condition in Blazor TreeGrid | Syncfusion
4+
description: Learn how to select rows based on specific conditions in the Syncfusion Blazor TreeGrid component using SelectRowsAsync and event hooks.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Select rows based on certain condition in Blazor TreeGrid Component
10+
# Select Rows based on certain condition in Blazor TreeGrid Component
1111

12-
Specific rows in the Tree Grid can be selected based on some conditions by using the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_SelectRowsAsync_System_Int32___) method in the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_DataBound) event of the Tree Grid component.
12+
Specific rows in the TreeGrid can be selected based on conditions using the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_SelectRowsAsync_System_Int32___) method inside the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_DataBound) event of the TreeGrid component.
1313

14-
This is demonstrated in the below sample code where the index value of Tree Grid rows with **Duration** column value greater than 6 are stored in the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowDataBound) event and then selected in the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_DataBound) event.
14+
The following example demonstrates how to select rows where the **Duration** column value is greater than 6. The row indexes are collected in the [RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_RowDataBound) event and selected during the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_DataBound) event.
1515

1616
{% tabs %}
1717

1818
{% highlight razor %}
1919

2020
@using TreeGridComponent.Data;
21-
@using Syncfusion.Blazor.Grids;
22-
@using Syncfusion.Blazor.TreeGrid;
21+
@using Syncfusion.Blazor.Grids;
22+
@using Syncfusion.Blazor.TreeGrid;
2323

2424
<SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
2525
<TreeGridSelectionSettings Type=SelectionType.Multiple></TreeGridSelectionSettings>

‎blazor/treegrid/how-to/show-or-hide-columns-in-dialog-editing.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
---
22
layout: post
3-
title: Show or Hide columns in Dialog editing in Blazor TreeGrid | Syncfusion
4-
description: Learn here all about how to show or hide columns in Dialog editing in Syncfusion Blazor TreeGrid component and more.
3+
title: Show or Hide Columns in Dialog Editing in Blazor TreeGrid | Syncfusion
4+
description: Learn how to show or hide specific columns during dialog editing in the Syncfusion Blazor TreeGrid component and more.
55
platform: Blazor
6-
control: Tree Grid
6+
control: TreeGrid
77
documentation: ug
88
---
99

10-
# Show or Hide columns in Dialog editing in Blazor TreeGrid Component
10+
# Show or Hide Columns in Dialog Editing in Blazor TreeGrid Component
1111

12-
The hidden columns can be shown or visible columns' editor can be hidden in the dialog while editing the Tree Grid record. This can be achieved by **Template**. In the following example, the Tree Grid columns' `Progress` are rendered as hidden column and `Priority` as visible column. In the edit mode, the `Progress` column is changed to visible state and `Priority` column to hidden state.
12+
Column visibility in the Blazor TreeGrid component during dialog editing can be dynamically controlled using **Template** customization. This approach enables hidden columns to be displayed and visible columns to be hidden when editing a record.
13+
14+
In the following example:
15+
- The `Progress` column is initially hidden but made visible during editing.
16+
- The `Priority` column is initially visible but hidden during editing.
1317

1418
{% tabs %}
1519

0 commit comments

Comments
 (0)