Skip to content

Commit 7984ad2

Browse files
sivakumars3442sivakumars3442
committed
991215: Updated the UG document for the TreeView and dashboard layout.
1 parent 90a844c commit 7984ad2

7 files changed

+41
-23
lines changed

‎blazor/treeview/how-to/accordion-tree.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Customize Blazor TreeView as Accordion | Syncfusion
3+
title: Customize Blazor TreeView as Accordion | Syncfusion
44
description: Learn here all about how to Customize TreeView as accordion in Syncfusion Blazor TreeView component and more.
55
platform: Blazor
66
control: TreeView
77
documentation: ug
88
---
99

10-
# Customize TreeView as accordion in Blazor TreeView Component
10+
# Customize TreeView as Accordion in Blazor TreeView Component
1111

12-
Accordion is an interface where a list of items can be collapsed or expanded, but only one list can be collapsed or expanded at a time. Customize the TreeView to make it behave as an accordion. Refer to the following code sample to create an accordion tree.
12+
An accordion is a UI pattern where a list of items allows one item to be expanded at a time, while others remain collapsed. Customize the TreeView to behave as an accordion. The following code sample demonstrates how to create an accordion tree.
1313

1414
```cshtml
1515
@using Syncfusion.Blazor.Navigations
@@ -214,4 +214,6 @@ Accordion is an interface where a list of items can be collapsed or expanded, bu
214214
</style>
215215
```
216216

217+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoMjCBqcFBIQiH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
218+
217219
![Customizing Blazor TreeView as Accordion](../images/blazor-treeview-with-custom-accordion.png)

‎blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Check/uncheck on clicking the tree node text in Blazor TreeView
1111

12-
The checkboxes of the TreeView can be checked and unchecked by clicking the tree node using the [`NodeClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeClicked) event of TreeView.
12+
Checkboxes in the TreeView can be checked and unchecked by clicking the tree node's text, utilizing the [`NodeClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeClicked) event.
1313

1414
```cshtml
1515
@using Syncfusion.Blazor.Navigations
@@ -190,4 +190,6 @@ documentation: ug
190190
}
191191
```
192192

193+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLesXsrAwEkrazW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
194+
193195
![Checking or Unchecking CheckBox in Blazor TreeView](../images/blazor-treeview-checkbox.png)

‎blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
---
22
layout: post
3-
title: Customize the expand & collapse icons in Blazor TreeView | Syncfusion
3+
title: Customize TreeView expand & collapse icons in Blazor | Syncfusion
44
description: Learn here all about how to customize the expand and collapse icons in Syncfusion Blazor TreeView component and more.
55
platform: Blazor
66
control: TreeView
77
documentation: ug
88
---
99

10-
# Customize the expand and collapse icons in Blazor TreeView Component
10+
# Customize Expand and Collapse Icons in Blazor TreeView Component
1111

12-
TreeView expand and collapse icons could be customized by using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CssClass) property of TreeView. Refer to the sample to customize expand or collapse icons.
12+
TreeView expand and collapse icons are customized using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CssClass) property of the TreeView component.
13+
14+
The following example demonstrates how to customize the expand and collapse icons.
1315

1416
```cshtml
1517
@using Syncfusion.Blazor.Navigations
@@ -137,11 +139,13 @@ TreeView expand and collapse icons could be customized by using the [`CssClass`]
137139
138140
```
139141

142+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSsjMrKbjcuFLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
143+
140144
![Customizing Expand and Collapse Icon in Blazor TreeView](../images/blazor-treeview-customize-expand-collapse-icon.png)
141145

142-
## Customize expand/collapse icon's position and color
146+
## Customize Expand/Collapse Icon Position and Color
143147

144-
The expand or collapse icon's position and color can also customized using following CSS.
148+
The position and color of the expand or collapse icons are customized using CSS. Additionally, custom icons for nodes are added using the `IconCss` property of `TreeViewFieldsSettings`.
145149

146150
```cshtml
147151
@using Syncfusion.Blazor.Navigations
@@ -336,11 +340,13 @@ The expand or collapse icon's position and color can also customized using follo
336340
</style>
337341
```
338342

343+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMDMrKbiQKRCm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
344+
339345
![Customizing Icon Position and Color in Blazor TreeView](../images/blazor-treeview-custom-icons-position-and-color.png)
340346

341-
## Increase the padding between the text, expand/collapse icon and custom icons
347+
## Increase Padding Between Text, Expand/Collapse Icons, and Custom Icons
342348

343-
The padding between the text, expand or collapse icon and custom icons can be increased using the following CSS in the above sample.
349+
The spacing between the text, expand/collapse icons, and custom element icons is increased by adjusting the following CSS properties within the previous sample's style block.
344350

345351
```csharp
346352

‎blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ control: TreeView
77
documentation: ug
88
---
99

10-
# Customize the tree nodes based on levels in Blazor TreeView Component
10+
# Customize Tree Nodes Based on Levels in Blazor TreeView Component
1111

12-
The tree nodes can be customized level wise by adding custom [**CssClass**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CssClass) to the component and enabling styles.
12+
The tree nodes can be customized level wise by adding custom [**CssClass**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CssClass) to the component and enabling styles. The Syncfusion Blazor TreeView automatically applies CSS classes like `e-level-0`, `e-level-1`, `e-level-2`, and so on, to nodes at different depths, allowing for precise styling.
13+
14+
The following example demonstrates customizing node appearance at various levels.
1315

1416
```cshtml
1517
@using Syncfusion.Blazor.Navigations
@@ -137,4 +139,6 @@ The tree nodes can be customized level wise by adding custom [**CssClass**](http
137139
138140
```
139141

142+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhIWNihKvBuqmZc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
143+
140144
![Customizing Nodes based on Levels in Blazor TreeView](../images/blazor-treeview-with-custom-nodes.png)

‎blazor/treeview/how-to/get-all-child-nodes.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Get all child nodes through parentID in Blazor TreeView | Syncfusion
3+
title: Retrieve Node Data by ID in Blazor TreeView | Syncfusion
44
description: Learn here more about how to get all child nodes through parentID in Syncfusion Blazor TreeView component and more.
55
platform: Blazor
66
control: TreeView
77
documentation: ug
88
---
99

10-
# Get all child nodes through parentID in Blazor TreeView Component
10+
# Retrieve Node Data by ID in Blazor TreeView Component
1111

12-
This section shows how to get the child nodes from corresponding Parent ID. Using the [`GetTreeData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method, the node details of the TreeView is achieved.
12+
This section demonstrates how to retrieve the data of a specific tree node, including its immediate children, using its unique identifier (Node ID). The [`GetTreeData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method is utilized to obtain the node's data based on its `NodeId`.
1313

1414
```cshtml
1515
@using Syncfusion.Blazor.Navigations

‎blazor/treeview/how-to/get-dynamic-icon.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Get iconCss dynamically in Blazor TreeView Component | Syncfusion
4-
description: Learn here all about how to get iconCss dynamically in TreeView in Syncfusion Blazor TreeView component and more.
3+
title: Retrieve Node IconCss Dynamically in Blazor TreeView | Syncfusion
4+
description: Learn how to dynamically retrieve the IconCss class bound to a TreeView node upon user interaction in the Syncfusion Blazor TreeView component.
55
platform: Blazor
66
control: TreeView
77
documentation: ug
88
---
99

10-
# Get iconCss dynamically in Blazor TreeView Component
10+
# Retrieve Node IconCss Dynamically in Blazor TreeView Component
1111

12-
In the TreeView component, get the original bound data using the [`GetTreeData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method. For this method, if the id of the tree node is passed, it returns the corresponding node information, or otherwise the overall tree nodes information will be returned. This method can be used to get the bound IconCss class in the [`NodeChecking`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecking) event.
12+
bound `IconCss` class dynamically. Using the [`GetTreeData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method. For this method, if the id of the tree node is passed, it returns the corresponding node information, or otherwise the overall tree nodes information will be returned. This method can be used to get the bound IconCss class in the [`NodeChecking`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecking) event.
1313

1414
```csharp
1515

@@ -98,4 +98,6 @@ In the TreeView component, get the original bound data using the [`GetTreeData`]
9898
</style>
9999
```
100100

101+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMNCBAPAkNGNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
102+
101103
![Blazor TreeView with Dynamic Icon](../images/blazor-treeview-dynamic-icon.png)

‎blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Validate the text when renaming the tree node in TreeView | Syncfusion
3+
title: Validate text when renaming TreeView nodes in Blazor | Syncfusion
44
description: Learn here all about validating the text when renaming the tree node in Syncfusion Blazor TreeView component and more.
55
platform: Blazor
66
control: TreeView
77
documentation: ug
88
---
99

10-
# Validate the text when renaming the tree node in Blazor TreeView
10+
# Validate Text When Renaming Tree Nodes in Blazor TreeView
1111

12-
The tree node text could be validated while editing using [`NodeEdited`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEdited) event of the TreeView. Following is an example that shows how to validate and prevent empty values in tree node.
12+
Node text is validated during the editing process using the [`NodeEdited`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEdited) event of the TreeView. This event allows inspection of the new text value and, if necessary, cancellation of the edit operation. The following example demonstrates how to validate and prevent empty values in a tree node's text.
1313

1414
```cshtml
1515
@using Syncfusion.Blazor.Navigations
@@ -120,4 +120,6 @@ The tree node text could be validated while editing using [`NodeEdited`](https:/
120120
121121
```
122122

123+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDresjCVKbokLFvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
124+
123125
![Renaming Tree Node in Blazor TreeView](../images/blazor-treeview-rename-tree-node.png)

0 commit comments

Comments
 (0)