From 9a7b0c4f6a1440b60a479cccd6a19dabf6926acb Mon Sep 17 00:00:00 2001 From: praveensf4999 Date: Sun, 12 Oct 2025 16:59:33 +0530 Subject: [PATCH 1/2] 984382: Updated the UG document for the TreeView Component --- blazor/treeview/accessibility.md | 16 ++-- .../authorization-and-authentication.md | 8 +- blazor/treeview/check-box.md | 51 +++++++---- blazor/treeview/data-binding.md | 73 ++++++++------- blazor/treeview/drag-and-drop.md | 32 ++++--- blazor/treeview/events.md | 83 +++++++++--------- blazor/treeview/expand-collaspe-actions.md | 50 ++++++----- blazor/treeview/how-to/accordion-tree.md | 8 +- ...checkbox-on-clicking-the-tree-node-text.md | 4 +- ...customize-the-expand-and-collapse-icons.md | 20 +++-- ...ustomize-the-tree-nodes-based-on-levels.md | 8 +- blazor/treeview/how-to/get-all-child-nodes.md | 6 +- blazor/treeview/how-to/get-dynamic-icon.md | 10 ++- ...te-the-text-when-renaming-the-tree-node.md | 8 +- blazor/treeview/images/check-uncheck.png | Bin 0 -> 15652 bytes blazor/treeview/images/checkednodes.png | Bin 0 -> 11817 bytes 16 files changed, 216 insertions(+), 161 deletions(-) create mode 100644 blazor/treeview/images/check-uncheck.png create mode 100644 blazor/treeview/images/checkednodes.png diff --git a/blazor/treeview/accessibility.md b/blazor/treeview/accessibility.md index e3fa334919..074073419c 100644 --- a/blazor/treeview/accessibility.md +++ b/blazor/treeview/accessibility.md @@ -11,7 +11,7 @@ documentation: ug The [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component has been designed keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) specifications, and applies WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. -The Blazor TreeView component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor TreeView component aligns with established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards. It implements [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) to achieve high accessibility compliance. The accessibility compliance for the Blazor TreeView component is outlined below. @@ -39,9 +39,9 @@ The accessibility compliance for the Blazor TreeView component is outlined below
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes -The Blazor TreeView component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) patterns to meet the accessibility. The following ARIA attributes are used in the TreeView component: +The Blazor TreeView component implements the [WAI-ARIA Tree View pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) to ensure comprehensive accessibility. The following ARIA attributes are used within the TreeView component's structure: | **Attributes** | **Purpose** | | --- | --- | @@ -51,9 +51,9 @@ The Blazor TreeView component followed the [WAI-ARIA](https://www.w3.org/WAI/ARI | aria-grabbed | Indicates the selected state on drag-and-drop of node. | | aria-level | Indicates the level of node in TreeView. | -## Keyboard interaction +## Keyboard Interaction -The Blazor TreeView component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the TreeView component. +The Blazor TreeView component adheres to the [WAI-ARIA keyboard interaction guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction), providing robust keyboard navigation. This enables efficient use for individuals who rely on assistive technologies or prefer keyboard-only interaction. The component supports the following keyboard shortcuts: | Windows | Mac | Description | |------|----|-----| @@ -69,12 +69,12 @@ The Blazor TreeView component followed the [keyboard interaction](https://www.w3 | Space | space | Checks the current node. | | Ctrl + A | ⌘ + A | Selects all nodes. | -## Ensuring accessibility +## Ensuring Accessibility -The Blazor TreeView component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing. +The accessibility levels of the Blazor TreeView component are verified through regular automated testing using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool. The accessibility compliance of the TreeView component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/treeview) in a new window to evaluate the accessibility of the TreeView component with accessibility tools. -## See also +## See Also * [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/treeview/authorization-and-authentication.md b/blazor/treeview/authorization-and-authentication.md index 8287d250d2..d75618a3de 100644 --- a/blazor/treeview/authorization-and-authentication.md +++ b/blazor/treeview/authorization-and-authentication.md @@ -9,13 +9,13 @@ documentation: ug # Authorization and Authentication in Blazor TreeView Component -**Authentication** is the process of verifying the identity of a user or system. This is typically done by requiring a username and password, but can also include other forms of verification such as biometric data or security tokens. +**Authentication** involves verifying the identity of a user or system. This typically occurs through methods such as usernames and passwords, biometrics, or security tokens. -**Authorization**, on the other hand, is the process of determining whether a user or system has access to a particular resource or action. Once a user's identity has been authenticated, the system can then determine whether they are authorized to perform a specific action or access a specific resource. This is often done by comparing the user's credentials or permissions against a set of rules or policies. +**Authorization** determines whether an authenticated user or system possesses the necessary permissions to access a specific resource or perform a particular action. After a user's identity is authenticated, the system evaluates their credentials or permissions against a set of established rules or policies to grant or deny access. -Provides a sample of Authorization and Authentication that explains how authorized users can access the TreeView. The below blog also includes steps to create a [Blazor Server App with Authentication](https://www.syncfusion.com/blogs/post/easy-steps-create-a-blazor-server-app-with-authentication.aspx), ensuring easy setup and configuration. +This section provides an example of implementing authorization and authentication to restrict access to the Blazor TreeView component to authorized users. The provided blog post details the steps for creating a [Blazor Server App with Authentication](https://www.syncfusion.com/blogs/post/easy-steps-create-a-blazor-server-app-with-authentication.aspx), facilitating easy setup and configuration for this example. -In the below example, the Blazor Server App is equipped with authentication, which ensures that only authorized users can access the TreeView. +The following example demonstrates a Blazor Server App configured with authentication, ensuring that the entire TreeView component is only accessible to authenticated users. ```cshtml @using Syncfusion.Blazor.Navigations diff --git a/blazor/treeview/check-box.md b/blazor/treeview/check-box.md index 85875991d4..9bc3f1cc59 100644 --- a/blazor/treeview/check-box.md +++ b/blazor/treeview/check-box.md @@ -9,16 +9,17 @@ documentation: ug # CheckBox in Blazor TreeView Component -The Blazor TreeView component allows to check more than one node in TreeView by enabling the [ShowCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ShowCheckBox) property. When this property is enabled, checkbox appears before each TreeView node text. +The Blazor TreeView component enables multiple node selection through checkboxes by activating the [`ShowCheckBox`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ShowCheckBox) property. When this property is enabled, a checkbox appears before the text of each TreeView node. ## AutoCheck in Blazor TreeView Component -By default, the checkbox state of parent and child nodes are dependent on each other. For independent checked state, achieve it using the [AutoCheck](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AutoCheck) property. +By default, the checked states of parent and child nodes are dependent. This means: +* If not all child nodes are checked, the parent node will display as partially checked (in an intermediate state). +* If all child nodes are checked, the parent node will display as fully checked. +* When a parent node is checked, its child nodes will also become checked. -* If not all child nodes are checked, the parent node will display as partially checked (intermediate state). -* If all child nodes are checked, the parent node will display as fully checked. -* When a parent node is checked, its child nodes will also display as checked. +For independent checked states, allowing child nodes to be checked or unchecked without affecting their parents (and vice-versa), use the [`AutoCheck`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AutoCheck) property. Set `AutoCheck` to `false` to achieve independent states. ```cshtml @using Syncfusion.Blazor.Navigations @@ -100,11 +101,13 @@ By default, the checkbox state of parent and child nodes are dependent on each o } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSitCBUvmzMcKy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor TreeView with CheckBox](./images/blazor-treeview-checkbox.png) -## Check nodes through data binding +## Check Nodes through Data Binding -You can check a specific node by setting the [**IsChecked**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_IsChecked) field to true for the corresponding node in the data source, which specifies the field for the checked state of the TreeView node. +A specific node is checked by setting the [`IsChecked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_IsChecked) field to `true` for the corresponding node in the data source. This field specifies the checked state of the TreeView node. ```cshtml @using Syncfusion.Blazor.Navigations @@ -185,10 +188,11 @@ You can check a specific node by setting the [**IsChecked**](https://help.syncfu } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZreMtWrAblXlpWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Check nodes through API +## Check nodes using CheckedNodes property -The Blazor TreeView component enables the ability to check specific nodes upon initial rendering or dynamically through the two-way binding provided by the [CheckedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CheckedNodes) property. This property allows for the checkbox selection of nodes by passing in an array collection of node IDs as strings. +The Blazor TreeView component enables checking specific nodes upon initial rendering or dynamically via the two-way bound [`CheckedNodes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CheckedNodes) property. This property accepts an array of node IDs (as strings) to control checkbox selection. ```cshtml @using Syncfusion.Blazor.Navigations @@ -273,10 +277,13 @@ The Blazor TreeView component enables the ability to check specific nodes upon i } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMZsVqvvPrMXI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor TreeView](./images/checkednodes.png) -## Check and Uncheck all nodes +## Check and Uncheck All Nodes -The Blazor TreeView component offers the ability to check all unchecked nodes within the component by utilizing the [CheckAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CheckAllAsync_System_String___) method. Additionally, specific nodes can be selected by passing in an array of unchecked nodes. The [UncheckAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_UncheckAllAsync_System_String___) method also exists to uncheck all previously checked nodes within the component, and specific nodes can be deselected by passing in an array of checked nodes. +The Blazor TreeView component offers the ability to check all unchecked nodes within the component by utilizing the [CheckAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CheckAllAsync_System_String___) method. Additionally, specific nodes are selected by passing an array of their IDs to this method. The [`UncheckAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_UncheckAllAsync_System_String___) method performs the opposite action, unchecking all previously checked nodes, or specific nodes if an array of checked node IDs is passed. The example demonstrates the usage of these methods within the context of a button click event. @@ -377,9 +384,13 @@ The example demonstrates the usage of these methods within the context of a butt } } ``` -## Get checked nodes +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrICXiVgusUIOKg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor TreeView](./images/check-uncheck.png) -The Blazor TreeView component provides the capability to pre-select specific nodes during initialization through the use of the [CheckedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CheckedNodes) property. Additionally, the component offers the [GetTreeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method, which allows for retrieval of the updated data source and subsequent refreshing of the TreeView. By passing the CheckedNodes of specific TreeView nodes as arguments to this method, the updated data source of only those nodes will be returned. If no arguments are passed, the entire updated data source of the TreeView will be returned. +## Get Checked Nodes + +The Blazor TreeView component provides the capability to pre-select specific nodes during initialization through the [`CheckedNodes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CheckedNodes) property. Additionally, the component offers the [`GetTreeData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method, which allows for retrieval of the updated data source. By passing the IDs of specific TreeView nodes (obtained from `CheckedNodes`) as arguments to this method, the updated data source of only those nodes will be returned. If no arguments are passed, the entire updated data source of the TreeView will be returned. ```cshtml @using Syncfusion.Blazor.Navigations @@ -530,11 +541,13 @@ The Blazor TreeView component provides the capability to pre-select specific nod ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVyCtMrKkBdTNdz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Get checked nodes](./images/blazor-treeview-get-checked-nodes.png) -## Single selection with CheckBox +## Single Selection with CheckBox -The Blazor TreeView component allows for single selection of nodes with checkboxes by utilizing the [UncheckAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_UncheckAllAsync_System_String___) method during the [NodeChecking](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecking) event to uncheck previously checked nodes. +The Blazor TreeView component facilitates single selection of nodes with checkboxes by utilizing the [`UncheckAllAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_UncheckAllAsync_System_String___) method within the [`NodeChecking`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecking) event. This approach programmatically unchecks all previously selected nodes when a new node is checked. ```cshtml @using Syncfusion.Blazor.Navigations @@ -628,10 +641,11 @@ The Blazor TreeView component allows for single selection of nodes with checkbox } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIiNCBAEUoTLhN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Hide CheckBox for parent nodes +## Hide CheckBox for Parent Nodes -The Blazor TreeView component allows for the rendering of checkboxes before each node by enabling the [ShowCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ShowCheckBox) property. However, if the application requires checkboxes to only be rendered for child nodes, the checkbox for the parent node can be removed by customizing the CSS. +The Blazor TreeView component can render checkboxes before each node when [`ShowCheckBox`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ShowCheckBox) is enabled. To display checkboxes only for child nodes, the checkboxes for parent nodes can be removed by applying custom CSS. ```cshtml @using Syncfusion.Blazor.Navigations @@ -734,10 +748,11 @@ The Blazor TreeView component allows for the rendering of checkboxes before each ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosZWBgaTqlQtr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Hide CheckBox for parent nodes](./images/blazor-treeview-remove-parent-checkbox.png) -## Cancel the check action +## Cancel the Check Action The Blazor TreeView component offers the ability to cancel the check action by setting the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeCheckEventArgs.html#Syncfusion_Blazor_Navigations_NodeCheckEventArgs_Cancel) argument value as true within the [NodeChecking](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecking) event. This will prevent the check action from occurring within the TreeView component. diff --git a/blazor/treeview/data-binding.md b/blazor/treeview/data-binding.md index 887f475bb9..bd0e48209d 100644 --- a/blazor/treeview/data-binding.md +++ b/blazor/treeview/data-binding.md @@ -11,26 +11,28 @@ documentation: ug The Blazor TreeView component provides the option to load data either from the local data sources or from remote data services. This can be done through [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property that is a member of the [`TreeViewFieldsSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldsSettings-1.html) property. The `DataSource` property supports list of objects and `DataManager`. It also supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of `DataManager` adaptors. -Blazor TreeView has `load on demand` (Lazy load), by default. It reduces the bandwidth size when consuming huge data. It loads first level nodes initially, and when parent node is expanded, loads the child nodes based on the `ParentID/Child` member. +The Blazor TreeView features "load on demand" (lazy loading) by default, which minimizes bandwidth usage when handling large datasets. It initially loads only the first-level nodes. Child nodes are loaded when a parent node is expanded, based on the [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_ParentID) or [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_Child) member. -By default, the [`LoadOnDemand`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) is set to true. By disabling this property, all the tree nodes are rendered at the beginning itself. The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_DataBound) event can be used to perform actions. This event will be triggered once the data source is populated in the TreeView. +By default, the [`LoadOnDemand`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) property is set to `true`. Disabling this property renders all tree nodes at once at the beginning. The [`DataBound`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_DataBound) event triggers once the data source is populated in the TreeView, allowing for post-data-binding actions. -To bind list data and service URLs to the Syncfusion® Blazor TreeView component , you can check on this video. +A video demonstrating how to bind list data and service URLs to the Syncfusion® Blazor TreeView component is available: {% youtube "youtube:https://www.youtube.com/watch?v=yvzewBlBRrI" %} -## Local data +## Local Data -To bind local data to the Blazor TreeView, assign a list of objects to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property. The Blazor TreeView component requires three fields ([`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text), and [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ParentID)) to render local data source. When mapper fields are not specified, it takes the default values as the mapping fields. Local data source can also be provided as an instance of the [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started). It supports two kinds of local data binding methods. +To bind local data to the Blazor TreeView, assign a list of objects to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_DataSource) property. The Blazor TreeView component primarily requires three fields—[`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_Text), and either [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_ParentID) or [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_Child)—to render data. If mapper fields are not explicitly specified, default values are used. Local data sources can also be provided as an instance of [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started). + +Two primary methods for local data binding are supported: * Hierarchical data * Self-referential data -### Hierarchical data +### Hierarchical Data -Blazor TreeView can be populated with hierarchical data source that contains nested list of objects. A hierarchical data can be directly assigned to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property, and map all the field members with corresponding keys from the hierarchical data to [`TreeViewFieldsSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldsSettings-1.html) property. +The Blazor TreeView can be populated with a hierarchical data source composed of a nested list of objects. A hierarchical data structure is directly assigned to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_DataSource) property. All field members from the hierarchical data are then mapped to the corresponding keys within the [`TreeViewFieldsSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldsSettings-1.html) property. In the following example, **Id**, **FolderName**, and **SubFolders** columns from hierarchical data have been mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text), and [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) fields, respectively. @@ -118,11 +120,13 @@ In the following example, **Id**, **FolderName**, and **SubFolders** columns fro ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMtsVUEylUdFX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor TreeView with Hierarchical Data](./images/blazor-treeview-hierarchical-data.png) N> In the Blazor TreeView component, observable collection support is provided only for the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property, not for the [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) property. The [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) property supports only the `List` data type. -### Self-referential data +### Self-Referential Data Blazor TreeView can be populated from self-referential data structure that contains list of objects with `ParentID` mapping. The self-referential data can be directly assigned to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property, and map all the field members with corresponding keys from self-referential data to [`TreeViewFieldsSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldsSettings-1.html) property. @@ -215,9 +219,11 @@ To render the root level nodes, specify the ParentID as null or no need to speci ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroWNWBAucDwMeI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor TreeView with Self-Referential Data](./images/blazor-treeview-hierarchical-data.png) -### ExpandoObject binding +### ExpandoObject Binding The Blazor TreeView is a generic component that is strongly bound to a specific model type, but in cases where the model type is unknown at compile time, the TreeView can be bound to a list of ExpandoObjects using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property. This allows the TreeView to perform all supported data operations. @@ -270,8 +276,9 @@ The Blazor TreeView is a generic component that is strongly bound to a specific } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLSWjMrAuaYSAxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### DynamicObject binding +### DynamicObject Binding The Blazor TreeView is a generic component that is strongly bound to a specific model type, but in cases where the model type is unknown at compile time, the data can be bound to the TreeView as a list of DynamicObjects. The TreeView can also perform all supported data operations on DynamicObjects when they are assigned to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property. @@ -347,10 +354,11 @@ The Blazor TreeView is a generic component that is strongly bound to a specific } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLSsNsrTZDTHpfr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Remote data +## Remote Data -Blazor TreeView can also be populated from a remote data service with the help of [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started) component and [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Query) property. It supports different kinds of data services such as OData, OData V4, Web API, URL, and JSON with the help of `DataManager` adaptors. A service data can be assigned as an instance of `DataManager` to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property. To interact with remote data source, provide the endpoint `url`. +Blazor TreeView can also be populated from a remote data service with the help of [`DataManager`](https://blazor.syncfusion.com/documentation/data/getting-started) component and [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Query) property. It supports various data services such as OData, OData V4, Web API, URL, and JSON through `DataManager` adaptors. A service data is assigned as an instance of `DataManager` to the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property. To interact with remote data source, provide the endpoint `url`. The `DataManager` that acts as an interface between the service endpoint and the TreeView requires the following information to interact with service endpoint properly. @@ -370,11 +378,11 @@ Adaptor is responsible for processing response and request from/to the service e * `WebMethodAdaptor`: Used to interact with web methods. -### Binding with OData services +### Binding with OData Services In the following example, `ODataAdaptor` is used to fetch data from remote services. The **EmployeeID**, **FirstName**, and **EmployeeID** columns from Employees table have been mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text), and [`HasChildren`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_HasChildren) fields respectively for first level nodes. -The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table have been mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ParentID), and [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text) fields respectively for second level nodes. +The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table are mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ParentID), and [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text) fields respectively for second level nodes. ```cshtml @using Syncfusion.Blazor.Navigations @@ -402,11 +410,11 @@ The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table have ``` -### Binding with OData V4 services +### Binding with OData V4 Services -In the following example, `ODataV4Adaptor` is used to fetch data from remote services. The **EmployeeID**, **FirstName**, and **EmployeeID** columns from Employees table have been mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text), and [`HasChildren`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_HasChildren) fields respectively for first level nodes. +In the following example, `ODataV4Adaptor` is used to fetch data from remote services. The **EmployeeID**, **FirstName**, and **EmployeeID** columns from Employees table are mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text), and [`HasChildren`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_HasChildren) fields respectively for first level nodes. -The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table have been mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ParentID), and [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text) fields respectively for second level nodes. +The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table are mapped to [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Id), [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ParentID), and [`Text`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Text) fields respectively for second level nodes. ```cshtml @using Syncfusion.Blazor.Navigations @@ -433,6 +441,7 @@ The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table have } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByWXirTXWroCXq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor TreeView with Remote Data](./images/blazor-treeview-remote-data.png) @@ -547,9 +556,9 @@ namespace BlazorTreeView.Controller ``` -### Sending additional parameters to the server +### Sending Additional Parameters to the Server -To add custom parameters to the data request in the Blazor TreeView component, use the addParams method of the Query class and assign the Query object with additional parameters to the TreeView's **Query** property, as demonstrated in the following sample code. +To add custom parameters to the data request in the Blazor TreeView component, use the `AddParams` method of the `Query` class. Assign the `Query` object with these additional parameters to the TreeView's [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Query) property, as demonstrated in the following sample code. ```cshtml @using Syncfusion.Blazor.Navigations @@ -621,9 +630,9 @@ To add custom parameters to the data request in the Blazor TreeView component, u ``` -## Observable collection +## Observable Collection -The Blazor TreeView component's ObservableCollection provides notifications of changes made to the collection, such as when items are added, removed, or updated. It implements INotifyCollectionChanged to notify of dynamic changes to the collection, and INotifyPropertyChanged to notify of changes to property values on the client side. +The Blazor TreeView component's `ObservableCollection` provides notifications of changes made to the collection, such as when items are added, removed, or updated. It implements `INotifyCollectionChanged` to notify of dynamic changes to the collection, and `INotifyPropertyChanged` to notify of changes to property values on the client side. ```cshtml @using Syncfusion.Blazor.Navigations @@ -923,7 +932,7 @@ namespace SQLTreeView.Shared.DataAccess ``` -### Create data access layer to perform CRUD operation +### Create Data Access Layer to Perform CRUD Operation Now, create a class named **OrganizationDataAccessLayer**, which act as the data access layer for retrieving the records from the database table. Also, add methods such as **AddEmployee**, **UpdateEmployee**, **DeleteEmployee** in the **“OrganizationDataAccessLayer.cs”** to handle the insert, update, and remove operations respectively. @@ -1122,9 +1131,9 @@ namespace WebApplication1.Server.Controllers ### Configure Blazor TreeView component using Web API adaptor -Now, the Blazor TreeView can be configured using the **‘SfDataManager’** to interact with the created Web API and consume the data appropriately. To interact with web API, use web API adaptor. +Now, the Blazor TreeView is configured using the `SfDataManager` to interact with the created Web API and consume the data appropriately. To interact with a web API, use the `WebApiAdaptor`. -N> The CRUD operation has been performed in the TreeView component using the context menu. +N> CRUD operations are performed in the TreeView component using the context menu. ```csharp @@ -1248,11 +1257,11 @@ N> The CRUD operation has been performed in the TreeView component using the con N> The fully working sample can be found [here](https://github.com/SyncfusionExamples/Blazor-treeview-entity-framework). -## Load on demand +## Load on Demand The Blazor TreeView has **load on demand** ( lazy loading ) enabled by default, which reduces the amount of data transmitted over the network when dealing with large amounts of data. It initially loads the first level nodes and, when a parent node is expanded, loads the child nodes based on the [`ParentID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ParentID)/[`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) member. The [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) property can be disabled to render all tree nodes at the start, and the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_DataBound) event can be used to perform actions after the TreeView's data source has been populated. -### Fetch data from web api on demand +### Fetch data from web API on Demand The Blazor TreeView component retrieves data from the server as needed, such as when expanding a parent node to fetch its child nodes, using the DataManager component. @@ -1365,9 +1374,9 @@ namespace BlazorTreeView.Controller ``` -### Disable load on demand +### Disable Load on Demand -By default, the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) property is enabled in the Blazor TreeView component, but when it is set to false, all the tree nodes are rendered at the initial rendering. +By default, the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) property is enabled. When `LoadOnDemand` is set to `false`, all tree nodes are rendered during the initial component rendering. In the following example, the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) property is disabled. @@ -1476,9 +1485,9 @@ namespace BlazorTreeView.Controller ``` -### Render more nodes with more levels +### Render more Nodes with more Levels -By default, the TreeView component includes performance optimization features. Additionally, the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) feature can be used to enhance performance and reduce the amount of data transmitted when working with large amounts of data. +By default, the TreeView component includes performance optimization features. Additionally, the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_LoadOnDemand) feature further enhances performance and reduces data transmission when working with large datasets. In this example, a tree node is being rendered with 25 levels of child nodes. @@ -1710,9 +1719,9 @@ In this example, a tree node is being rendered with 25 levels of child nodes. } ``` -## Render nodes with GUID +## Render Nodes with GUID -The Blazor TreeView component allows you to render tree nodes with a **GUID**. The Id field in the TreeView component is a string data type, so the GUID must be passed as a string. +The Blazor TreeView component allows the rendering of tree nodes with a `GUID`. Since the `Id` field in the TreeView component expects a string data type, the `GUID` must be passed as a string. ```cshtml @using Syncfusion.Blazor.Navigations diff --git a/blazor/treeview/drag-and-drop.md b/blazor/treeview/drag-and-drop.md index 68fbe58f42..7b3bc5216c 100644 --- a/blazor/treeview/drag-and-drop.md +++ b/blazor/treeview/drag-and-drop.md @@ -9,7 +9,7 @@ documentation: ug # Drag and Drop in Blazor TreeView Component -The Blazor TreeView component allows to drag and drop any node by setting [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowDragAndDrop) property to **true**. Nodes can be dragged and dropped at all levels of the same TreeView. +The Blazor TreeView component supports drag and drop operations for reordering nodes. This functionality is enabled by setting the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowDragAndDrop) property to `true`. Nodes can be dragged and dropped at various levels within the same TreeView. The dragged nodes can be dropped at any level by indicator lines with **line**, **plus/minus**, and **restrict** icons. It represents the exact position where the node is to be dropped as sibling or child. @@ -21,9 +21,9 @@ The following table explains the usage of indicator icons. | Minus or restrict icon |Indicates that the dragged node is not to be dropped at the hovered region. | | In between icon | Indicates that the dragged node is to be added as siblings of hovered region. | -* In order to prevent dragging action for a particular node, the [`OnNodeDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStart) event can be used which is triggered when the node drag is started. The [`OnNodeDragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragged) event is triggered when a node is being dragged. - -* The [`NodeDropped`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeDropped) event is triggered when the TreeView node is dropped on the target element successfully. +* The [`OnNodeDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStart) event triggers when a node drag operation begins. This event can be used to prevent specific nodes from being dragged. +* The [`OnNodeDragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragged) event triggers repeatedly while a node is being dragged. While this event does not provide an option to cancel the drag, its arguments can be accessed to perform actions (e.g., visual feedback based on the current drag position). +* The [`NodeDropped`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeDropped) event triggers when the TreeView node is successfully dropped onto a target element. N> In the [**OnNodeDragged**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragged) event currently there is no option to cancel the event. However the other event arguments could be accessed. @@ -113,12 +113,13 @@ N> In the [**OnNodeDragged**](https://help.syncfusion.com/cr/blazor/Syncfusion.B ``` -![Drag and Drop Node in Blazor TreeView](./images/blazor-treeview-drag-drop-node.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyMZsBJDLnhwpw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Multiple-node drag and drop +![Drag and Drop Node in Blazor TreeView](./images/blazor-treeview-drag-drop-node.png) -To drag and drop more than one node, enable the [AllowMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowMultiSelection) property along with the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowDragAndDrop) property. To perform multi-selection, press and hold **CTRL** key and click the desired nodes. To select range of nodes, press and hold the **SHIFT** key and click the nodes. +## Multiple-Node Drag and Drop +To enable dragging and dropping of multiple nodes, enable both the [`AllowMultiSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowMultiSelection) property and the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowDragAndDrop) property. Users can perform multi-selection by holding the Ctrl key and clicking individual nodes, or by holding the Shift key and clicking to select a range of nodes. ```cshtml @using Syncfusion.Blazor.Navigations @@ -207,11 +208,12 @@ To drag and drop more than one node, enable the [AllowMultiSelection](https://he } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhSsXsVfZUjOzRj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Drag and Drop Multiple Node in Blazor TreeView](./images/blazor-treeview-drag-drop-multi-node.png) -## Drag and drop within a TreeView +## Drag and Drop within a TreeView The Blazor TreeView component has built-in support for drag and drop functionality. The [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowDragAndDrop) property determines whether the TreeView allows for the drag and drop reordering of nodes. @@ -275,12 +277,13 @@ The default value of `AllowDragAndDrop` property is false. } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLyitsLTjUePIsG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Drag and drop within a TreeView](./images/blazor-treeview-drag-and-drop-within-treeview.png) -## Drag and drop between TreeViews +## Drag and Drop Between TreeViews -The Blazor TreeView component has built-in support for drag and drop functionality, allowing for nodes to be dragged and dropped on other nodes within the same or different trees using the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowDragAndDrop) property. +The Blazor TreeView component includes built-in drag and drop support, allowing nodes to be dragged and dropped between different TreeView instances. This functionality is enabled by setting the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowDragAndDrop) property to `true` on both TreeViews. ```cshtml @using Syncfusion.Blazor.Navigations @@ -490,14 +493,15 @@ The Blazor TreeView component has built-in support for drag and drop functionali ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryiDsBftpsSWPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Drag and drop between TreeViews](./images/blazor-treeview-drag-and-drop-between-treeviews.png) -## Restrict drag and drop to individual node +## Restrict Drag and Drop for Individual node -In the Blazor TreeView component, it is possible to restrict the drag and drop functionality for a specific node by setting the arguments [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DragAndDropEventArgs.html#Syncfusion_Blazor_Navigations_DragAndDropEventArgs_Cancel) value to true in the [OnNodeDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStart) event. +In the Blazor TreeView component, the drag and drop functionality for a specific node is restricted by setting the [`Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DragAndDropEventArgs.html#Syncfusion_Blazor_Navigations_DragAndDropEventArgs_Cancel) argument to `true` within the [`OnNodeDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStart) event. -For example, in the following code snippet, the drag and drop is prevented for the **Inbox** TreeView node. +For example, in the following code snippet, dragging is prevented for the "Inbox" TreeView node when its `ID` is "1". ```cshtml @using Syncfusion.Blazor.Navigations @@ -566,7 +570,7 @@ For example, in the following code snippet, the drag and drop is prevented for t ``` -## Retrieve index of drop node +## Retrieve Index of Drop node In the Blazor TreeView component, the index of the dropped node can be retrieved from the [DropIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DragAndDropEventArgs.html#Syncfusion_Blazor_Navigations_DragAndDropEventArgs_DropIndex) argument in the [OnNodeDragStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStop) event. diff --git a/blazor/treeview/events.md b/blazor/treeview/events.md index 6753bdc972..99ea5b0869 100644 --- a/blazor/treeview/events.md +++ b/blazor/treeview/events.md @@ -15,7 +15,9 @@ N> All the events should be provided in a single **TreeViewEvents** component. ## Created -The Blazor TreeView component's [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_Created) event is triggered once the TreeView has been successfully created +## Created Event + +The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_Created) event is triggered once the TreeView component has been successfully created and rendered. ```cshtml @using Syncfusion.Blazor.Navigations @@ -80,9 +82,9 @@ The Blazor TreeView component's [Created](https://help.syncfusion.com/cr/blazor/ ``` -## DataBound +## DataBound Event -The Blazor TreeView's [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_DataBound) event is triggered once the data source has been populated within the TreeView. +The [`DataBound`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_DataBound) event is triggered after the data source has been fully populated within the TreeView. ```cshtml @using Syncfusion.Blazor.Navigations @@ -147,9 +149,9 @@ The Blazor TreeView's [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusi ``` -## DataSourceChanged +## DataSourceChanged Event -The [DataSourceChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_DataSourceChanged) event in the Blazor TreeView is triggered whenever there is a change in the data source, such as through drag and drop, node editing, adding or removing a node in the TreeView. +The [`DataSourceChanged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_DataSourceChanged) event fires whenever changes occur in the TreeView's data source. This includes modifications resulting from drag-and-drop operations, node editing, adding new nodes, or removing nodes. ```cshtml @using Syncfusion.Blazor.Navigations @@ -214,9 +216,9 @@ The [DataSourceChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -## Destroyed +## Destroyed Event -The Blazor TreeView's [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_Destroyed) event is triggered when the TreeView component is completely destroyed, allowing you to confirm its destruction. +The [`Destroyed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_Destroyed) event is triggered when the TreeView component is completely disposed of. ```cshtml @using Syncfusion.Blazor.Navigations @@ -281,9 +283,9 @@ The Blazor TreeView's [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusi ``` -## NodeChecked +## NodeChecked Event -The Blazor TreeView [NodeChecked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecked) event is triggered whenever a TreeView node is successfully checked or unchecked. +The [`NodeChecked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecked) event fires whenever a TreeView node's checkbox state changes (checked or unchecked). ```cshtml @using Syncfusion.Blazor.Navigations @@ -348,9 +350,9 @@ The Blazor TreeView [NodeChecked](https://help.syncfusion.com/cr/blazor/Syncfusi ``` -## NodeChecking +## NodeChecking Event -The Blazor TreeView [NodeChecking](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecking) event is triggered before a TreeView node is checked or unchecked. +The [`NodeChecking`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeChecking) event is triggered *before* a TreeView node's checkbox state changes. ```cshtml @using Syncfusion.Blazor.Navigations @@ -415,7 +417,7 @@ The Blazor TreeView [NodeChecking](https://help.syncfusion.com/cr/blazor/Syncfus ``` -## NodeClicked +## NodeClicked Event The Blazor TreeView component's [NodeClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeClicked) event is triggered when a TreeView node is successfully clicked. @@ -482,9 +484,9 @@ The Blazor TreeView component's [NodeClicked](https://help.syncfusion.com/cr/bla ``` -## NodeCollapsed +## NodeCollapsed Event -The Blazor TreeView component's [NodeCollapsed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeCollapsed) event is triggered when a node collapses successfully. +The [`NodeCollapsed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeCollapsed) event is triggered after a TreeView node has successfully collapsed. ```cshtml @using Syncfusion.Blazor.Navigations @@ -549,10 +551,9 @@ The Blazor TreeView component's [NodeCollapsed](https://help.syncfusion.com/cr/b ``` -## NodeCollapsing - +## NodeCollapsing Event -The Blazor TreeView component's [NodeCollapsing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeCollapsing) event is triggered before the TreeView node collapses. +The [`NodeCollapsing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeCollapsing) event is triggered *before* a TreeView node collapses. ```cshtml @using Syncfusion.Blazor.Navigations @@ -617,9 +618,9 @@ The Blazor TreeView component's [NodeCollapsing](https://help.syncfusion.com/cr/ ``` -## NodeDropped +## NodeDropped Event -The Blazor TreeView component's [NodeDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeDropped) event is triggered upon successful dropping of a TreeView node onto a target element. +The [`NodeDropped`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeDropped) event fires upon the successful completion of a drag-and-drop operation, meaning a node has been dropped onto a target element. ```cshtml @using Syncfusion.Blazor.Navigations @@ -684,9 +685,9 @@ The Blazor TreeView component's [NodeDropped](https://help.syncfusion.com/cr/bla ``` -## NodeEdited +## NodeEdited Event -The [NodeEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEdited) event in the Blazor TreeView component is triggered once the TreeView node has been successfully renamed. +The [`NodeEdited`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEdited) event is triggered after a TreeView node's text has been successfully renamed. ```cshtml @using Syncfusion.Blazor.Navigations @@ -751,9 +752,9 @@ The [NodeEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigat ``` -## NodeEditing +## NodeEditing Event -The Blazor TreeView component's [NodeEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEditing) event is triggered before the TreeView node is renamed. +The [`NodeEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEditing) event is triggered *before* a TreeView node is renamed. ```cshtml @using Syncfusion.Blazor.Navigations @@ -818,9 +819,9 @@ The Blazor TreeView component's [NodeEditing](https://help.syncfusion.com/cr/bla ``` -## NodeExpanded +## NodeExpanded Event -The Blazor TreeView component's [NodeExpanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeExpanded) event is triggered upon successful expansion of a TreeView node. +The [`NodeExpanded`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeExpanded) event fires after a TreeView node has successfully expanded. ```cshtml @using Syncfusion.Blazor.Navigations @@ -885,9 +886,9 @@ The Blazor TreeView component's [NodeExpanded](https://help.syncfusion.com/cr/bl ``` -## NodeExpanding +## NodeExpanding Event -The Blazor TreeView component [NodeExpanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeExpanding) event is triggered before the TreeView node is to be expanded. +The [`NodeExpanding`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeExpanding) event is triggered *before* a TreeView node is expanded. ```cshtml @using Syncfusion.Blazor.Navigations @@ -952,9 +953,9 @@ The Blazor TreeView component [NodeExpanding](https://help.syncfusion.com/cr/bla ``` -## NodeSelected +## NodeSelected Event -The Blazor TreeView component [NodeSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelected) event is triggered when the TreeView node is selected/unselected successfully. +The [`NodeSelected`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelected) event fires when a TreeView node is successfully selected or deselected. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1019,9 +1020,9 @@ The Blazor TreeView component [NodeSelected](https://help.syncfusion.com/cr/blaz ``` -## NodeSelecting +## NodeSelecting Event -The Blazor TreeView component [NodeSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelecting) event is triggered before the TreeView node is selected/unselected. +The [`NodeSelecting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelecting) event is triggered *before* a TreeView node is selected or deselected. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1086,7 +1087,7 @@ The Blazor TreeView component [NodeSelecting](https://help.syncfusion.com/cr/bla ``` -## OnActionFailure +## OnActionFailure Event The Blazor TreeView component's [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnActionFailure) event is triggered when any TreeView action fails to produce the desired outcome. By utilizing this event, one can obtain information about the error and its root cause. In the sample provided, an incorrect URL has been given, causing the `OnActionFailure` event to be thrown. @@ -1143,9 +1144,9 @@ The Blazor TreeView component's [OnActionFailure](https://help.syncfusion.com/cr ``` -## OnKeyPress +## OnKeyPress Event -The [OnKeyPress](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnKeyPress) event of the Blazor TreeView component is triggered upon successful key press. +The [`OnKeyPress`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnKeyPress) event is triggered whenever a key is pressed while the TreeView has focus. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1210,9 +1211,9 @@ The [OnKeyPress](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigat ``` -## OnNodeDragged +## OnNodeDragged Event -The [OnNodeDragged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragged) event in the Blazor TreeView component is triggered whenever a node in the TreeView is dragged. +The [`OnNodeDragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragged) event is triggered continuously while a node is being dragged within the TreeView. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1277,9 +1278,9 @@ The [OnNodeDragged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navi ``` -## OnNodeDragStart +## OnNodeDragStart Event -The [OnNodeDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStart) event of the Blazor TreeView component is triggered when the dragging (movement) of a node within the TreeView begins. +The [`OnNodeDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStart) event is triggered just before a dragging (movement) action begins for a node within the TreeView. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1344,9 +1345,9 @@ The [OnNodeDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Na ``` -## OnNodeDragStop +## OnNodeDragStop Event -The [OnNodeDragStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStop) event of the Blazor TreeView component is triggered when the dragging of a TreeView node has stopped. +The [`OnNodeDragStop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeDragStop) event is triggered when the dragging of a TreeView node has concluded (i.e., the node has been dropped). ```cshtml @using Syncfusion.Blazor.Navigations @@ -1411,7 +1412,7 @@ The [OnNodeDragStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Nav ``` -## OnNodeRender +## OnNodeRender Event The [OnNodeRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_OnNodeRender) event of the Blazor TreeView component triggers before the TreeView node is appended to the TreeView element. diff --git a/blazor/treeview/expand-collaspe-actions.md b/blazor/treeview/expand-collaspe-actions.md index 8de823fc5d..ad6e3dcccb 100644 --- a/blazor/treeview/expand-collaspe-actions.md +++ b/blazor/treeview/expand-collaspe-actions.md @@ -9,15 +9,11 @@ documentation: ug # Expand/Collapse Actions in Blazor TreeView Component -By clicking on the respective arrow icons, you can expand or collapse the parent TreeView nodes in the Blazor TreeView component. The [**Expanded**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Expanded) field or [ExpandedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandedNodes) property can be used to perform expand action in the TreeView component. +"Parent TreeView nodes in the Blazor TreeView component can be expanded or collapsed by clicking the respective arrow icons. The [**Expanded**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Expanded) field or the [ExpandedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandedNodes) property can be used to perform expand actions within the TreeView component. When the Expanded field is utilized, it can be mapped directly in the data source. The [ExpandedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandedNodes) property in the TreeView component provides two-way binding." -If you use the **Expanded** field, you can map it directly in the data source. +## Expand Nodes through Data Binding -In the TreeView component, the [ExpandedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandedNodes) property provides two-way binding. - -## Expand nodes through data binding - -The Blazor TreeView component allows for specific nodes to be expanded upon initialization by using the [**Expanded**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Expanded) field. Setting the Expanded field to true for a parent node in the data source will expand that particular parent node in the user interface. +Specific nodes can be programmatically expanded upon TreeView initialization by utilizing the [`Expanded`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Expanded) field within the data source. Setting this field to `true` for a parent node in the data will expand that node in the user interface. ```cshtml @using Syncfusion.Blazor.Navigations @@ -99,10 +95,11 @@ The Blazor TreeView component allows for specific nodes to be expanded upon init } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSWNCrTNHHeZFa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Expand nodes through data binding](./images/blazor-treeview-expand-nodes-through-data-binding.png) -## Expand nodes through API +## Expand Nodes through API The Blazor TreeView component allows the expansion of specific nodes during initialization or dynamically through two-way binding capabilities provided by the [ExpandedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandedNodes) property. This property allows for the expansion of particular parent nodes by passing in an array collection of the corresponding node IDs as strings. @@ -186,10 +183,11 @@ The Blazor TreeView component allows the expansion of specific nodes during init } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLyWDihfXmBfBeW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Get expanded nodes +## Get Expanded Nodes -The Blazor TreeView component allows the expansion of specific nodes during initialization or dynamically through two-way binding capabilities provided by the [ExpandedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandedNodes) property. Additionally, the component offers the [GetTreeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method, which allows for retrieval of the updated data source of the TreeView. By passing the ExpandedNodes of specific TreeView nodes as arguments to this method, the updated data source of only those nodes will be returned. If no arguments are passed, the entire updated data source of the TreeView will be returned. +The Blazor TreeView component provides the `ExpandedNodes` property for two-way binding, allowing for both programmatic expansion and retrieval of currently expanded node IDs. Additionally, the [`GetTreeData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method can retrieve the updated data source. By passing the IDs of specific TreeView nodes (obtained from `ExpandedNodes`) to this method, the updated data source for those nodes is returned. If no arguments are passed, the entire updated data source of the TreeView is returned. If no arguments are passed, the entire updated data source of the TreeView will be returned. ```cshtml @using Syncfusion.Blazor.Navigations @@ -338,14 +336,18 @@ The Blazor TreeView component allows the expansion of specific nodes during init } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLSMDCVfjcEkxgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Get expanded nodes](./images/blazor-treeview-get-expanded-nodes.png) -## Expand or collapse a node programmatically +## Expand or Collapse a Node Programmatically The [ExpandAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandAllAsync_System_String___) method is used to expand all the collapsed TreeView nodes in the Blazor TreeView component. Also, you can expand the specific nodes by passing the array of collapsed nodes. Also you can change through [ExpandedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandedNodes) API or Expanded field dynamically. The [CollapseAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CollapseAllAsync_System_String___) method is used to collapse all the expanded TreeView nodes in the Blazor TreeView component. Also, collapse the specific nodes by passing the array of expanded nodes. +The following examples demonstrate using these methods with buttons to control the expansion and collapse state of specific nodes. + ```cshtml @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons @@ -439,16 +441,17 @@ The [CollapseAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.N } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSitiBfXbenDFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Expand a node on single click +## Expand a Node on Single Click -The [ExpandOn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandOn) property is used to specify the action upon which the node expands or collapses in the TreeView. The available actions are, +The [`ExpandOn`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandOn) property determines the action that triggers node expansion or collapse. Available options include: * **Click** : The expand/collapse operation happens when you single-click the node on both desktop and mobile devices. * **DoubleClick** : The expand/collapse operation happens when you double-click the node on both desktop and mobile devices. * **None** : The expand/collapse operation will not happen. -The default value of the `ExpandOn` property is DoubleClick. +The default value of the `ExpandOn` property is `DoubleClick`. ```cshtml @using Syncfusion.Blazor.Navigations @@ -505,8 +508,9 @@ The default value of the `ExpandOn` property is DoubleClick. } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDheMNWBptYXOwUq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Expand or collapse all parent nodes +## Expand or Collapse all Parent Nodes The [ExpandAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_ExpandAllAsync_System_String___) method is used to expand all the collapsed TreeView nodes in the Blazor TreeView component. @@ -605,10 +609,11 @@ The [CollapseAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.N } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhyCjshzDaRIMTD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Single Expanded Node -In the Blazor TreeView component you can Collapse all expanded nodes while expanding particular individual node using the [CollapseAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CollapseAllAsync_System_String___) method using inside the [NodeExpanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeExpanding) event. +"In the Blazor TreeView component, all expanded nodes can be collapsed while expanding a particular individual node using the [CollapseAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CollapseAllAsync_System_String___) method using inside the [NodeExpanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeExpanding) event. In the following example, the expanded nodes are collapsed while the **Gospel** node is expanded. @@ -704,7 +709,7 @@ In the following example, the expanded nodes are collapsed while the **Gospel** ``` -## Cancel the expand or collapse action +## Cancel the Expand or Collapse Action The Blazor TreeView component offers the ability to cancel the expand action by setting the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeExpandEventArgs.html#Syncfusion_Blazor_Navigations_NodeExpandEventArgs_Cancel) argument value as true within the [NodeExpanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeExpanding) event. This will prevent the expand action from occurring within the TreeView component. @@ -798,13 +803,15 @@ In the following example, the expand action for the **Discover Music** node is c ``` -## Animation on expand/collapse node +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVesNWVfsWLrBOI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Animation on Expand/Collapse Node -### Customize expand/collapse animation +### Customize Expand/Collapse Animation -The [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_Animation) property is used to speed up or slow down the expand and collapse actions in the Blazor TreeView component. +The [`Animation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_Animation) property controls the speed and visual effect of expand and collapse actions in the Blazor TreeView. The [`TreeViewNodeAnimationSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewNodeAnimationSettings.html) API, which includes [`TreeViewAnimationExpand`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewAnimationExpand.html) and [`TreeViewAnimationCollapse`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewAnimationCollapse.html), allows fine-tuning these animations. -The [TreeViewNodeAnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewNodeAnimationSettings.html) API, which includes the [TreeViewAnimationExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewAnimationExpand.html) and [TreeViewAnimationCollapse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewAnimationCollapse.html) APIs helps in setting Animation in TreeView. Both collapse and expand APIs include the below properties. +Both expand and collapse APIs offer the following properties: **Duration** - specifies the duration to animate. **Easing** - specifies the animation timing function. @@ -870,3 +877,4 @@ The [TreeViewNodeAnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfu } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoitirfWhVTKuB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/treeview/how-to/accordion-tree.md b/blazor/treeview/how-to/accordion-tree.md index 50d8c3f9c3..675366aa9b 100644 --- a/blazor/treeview/how-to/accordion-tree.md +++ b/blazor/treeview/how-to/accordion-tree.md @@ -1,15 +1,15 @@ --- layout: post -title: Customize Blazor TreeView as Accordion | Syncfusion +title: Customize Blazor TreeView as Accordion | Syncfusion description: Learn here all about how to Customize TreeView as accordion in Syncfusion Blazor TreeView component and more. platform: Blazor control: TreeView documentation: ug --- -# Customize TreeView as accordion in Blazor TreeView Component +# Customize TreeView as Accordion in Blazor TreeView Component -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -214,4 +214,6 @@ Accordion is an interface where a list of items can be collapsed or expanded, bu ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoMjCBqcFBIQiH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Customizing Blazor TreeView as Accordion](../images/blazor-treeview-with-custom-accordion.png) \ No newline at end of file diff --git a/blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md b/blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md index d497100c9e..3d6b63b665 100644 --- a/blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md +++ b/blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md @@ -9,7 +9,7 @@ documentation: ug # Check/uncheck on clicking the tree node text in Blazor TreeView - 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -190,4 +190,6 @@ documentation: ug } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLesXsrAwEkrazW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Checking or Unchecking CheckBox in Blazor TreeView](../images/blazor-treeview-checkbox.png) \ No newline at end of file diff --git a/blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md b/blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md index 12f5c9fd9b..f1bf0b1d9f 100644 --- a/blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md +++ b/blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md @@ -1,15 +1,17 @@ --- layout: post -title: Customize the expand & collapse icons in Blazor TreeView | Syncfusion +title: Customize TreeView expand & collapse icons in Blazor | Syncfusion description: Learn here all about how to customize the expand and collapse icons in Syncfusion Blazor TreeView component and more. platform: Blazor control: TreeView documentation: ug --- -# Customize the expand and collapse icons in Blazor TreeView Component +# Customize Expand and Collapse Icons in Blazor TreeView Component -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. +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. + +The following example demonstrates how to customize the expand and collapse icons. ```cshtml @using Syncfusion.Blazor.Navigations @@ -137,11 +139,13 @@ TreeView expand and collapse icons could be customized by using the [`CssClass`] ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSsjMrKbjcuFLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Customizing Expand and Collapse Icon in Blazor TreeView](../images/blazor-treeview-customize-expand-collapse-icon.png) -## Customize expand/collapse icon's position and color +## Customize Expand/Collapse Icon Position and Color -The expand or collapse icon's position and color can also customized using following CSS. +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`. ```cshtml @using Syncfusion.Blazor.Navigations @@ -336,11 +340,13 @@ The expand or collapse icon's position and color can also customized using follo ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMDMrKbiQKRCm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Customizing Icon Position and Color in Blazor TreeView](../images/blazor-treeview-custom-icons-position-and-color.png) -## Increase the padding between the text, expand/collapse icon and custom icons +## Increase Padding Between Text, Expand/Collapse Icons, and Custom Icons -The padding between the text, expand or collapse icon and custom icons can be increased using the following CSS in the above sample. +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. ```csharp diff --git a/blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md b/blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md index 4663ebae56..448a0a7386 100644 --- a/blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md +++ b/blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md @@ -7,9 +7,11 @@ control: TreeView documentation: ug --- -# Customize the tree nodes based on levels in Blazor TreeView Component +# Customize Tree Nodes Based on Levels in Blazor TreeView Component -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 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. + +The following example demonstrates customizing node appearance at various levels. ```cshtml @using Syncfusion.Blazor.Navigations @@ -137,4 +139,6 @@ The tree nodes can be customized level wise by adding custom [**CssClass**](http ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhIWNihKvBuqmZc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Customizing Nodes based on Levels in Blazor TreeView](../images/blazor-treeview-with-custom-nodes.png) \ No newline at end of file diff --git a/blazor/treeview/how-to/get-all-child-nodes.md b/blazor/treeview/how-to/get-all-child-nodes.md index eccc3df475..811f4c78d5 100644 --- a/blazor/treeview/how-to/get-all-child-nodes.md +++ b/blazor/treeview/how-to/get-all-child-nodes.md @@ -1,15 +1,15 @@ --- layout: post -title: Get all child nodes through parentID in Blazor TreeView | Syncfusion +title: Retrieve Node Data by ID in Blazor TreeView | Syncfusion description: Learn here more about how to get all child nodes through parentID in Syncfusion Blazor TreeView component and more. platform: Blazor control: TreeView documentation: ug --- -# Get all child nodes through parentID in Blazor TreeView Component +# Retrieve Node Data by ID in Blazor TreeView Component -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. +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`. ```cshtml @using Syncfusion.Blazor.Navigations diff --git a/blazor/treeview/how-to/get-dynamic-icon.md b/blazor/treeview/how-to/get-dynamic-icon.md index 76e649f0a5..ceae582125 100644 --- a/blazor/treeview/how-to/get-dynamic-icon.md +++ b/blazor/treeview/how-to/get-dynamic-icon.md @@ -1,15 +1,15 @@ --- layout: post -title: Get iconCss dynamically in Blazor TreeView Component | Syncfusion -description: Learn here all about how to get iconCss dynamically in TreeView in Syncfusion Blazor TreeView component and more. +title: Retrieve Node IconCss Dynamically in Blazor TreeView | Syncfusion +description: Learn how to dynamically retrieve the IconCss class bound to a TreeView node upon user interaction in the Syncfusion Blazor TreeView component. platform: Blazor control: TreeView documentation: ug --- -# Get iconCss dynamically in Blazor TreeView Component +# Retrieve Node IconCss Dynamically in Blazor TreeView Component -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. +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. ```csharp @@ -98,4 +98,6 @@ In the TreeView component, get the original bound data using the [`GetTreeData`] ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMNCBAPAkNGNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor TreeView with Dynamic Icon](../images/blazor-treeview-dynamic-icon.png) \ No newline at end of file diff --git a/blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md b/blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md index ac793bbea7..407267c7ac 100644 --- a/blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md +++ b/blazor/treeview/how-to/validate-the-text-when-renaming-the-tree-node.md @@ -1,15 +1,15 @@ --- layout: post -title: Validate the text when renaming the tree node in TreeView | Syncfusion +title: Validate text when renaming TreeView nodes in Blazor | Syncfusion description: Learn here all about validating the text when renaming the tree node in Syncfusion Blazor TreeView component and more. platform: Blazor control: TreeView documentation: ug --- -# Validate the text when renaming the tree node in Blazor TreeView +# Validate Text When Renaming Tree Nodes in Blazor TreeView -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -120,4 +120,6 @@ The tree node text could be validated while editing using [`NodeEdited`](https:/ ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDresjCVKbokLFvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Renaming Tree Node in Blazor TreeView](../images/blazor-treeview-rename-tree-node.png) \ No newline at end of file diff --git a/blazor/treeview/images/check-uncheck.png b/blazor/treeview/images/check-uncheck.png new file mode 100644 index 0000000000000000000000000000000000000000..c3fa47be89aab161e986103f7d54ab2339788adb GIT binary patch literal 15652 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 N$f-Ukyl?vAe*iZ+;=KR> literal 0 HcmV?d00001 diff --git a/blazor/treeview/images/checkednodes.png b/blazor/treeview/images/checkednodes.png new file mode 100644 index 0000000000000000000000000000000000000000..835b683b51ca9aefc164ea5e368696345f4025ab GIT binary patch literal 11817 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 Date: Sun, 12 Oct 2025 20:35:25 +0530 Subject: [PATCH 2/2] 984382: Updated the UG document for the TreeView Component --- blazor/treeview/authorization-and-authentication.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treeview/authorization-and-authentication.md b/blazor/treeview/authorization-and-authentication.md index d75618a3de..17b376e7ae 100644 --- a/blazor/treeview/authorization-and-authentication.md +++ b/blazor/treeview/authorization-and-authentication.md @@ -9,7 +9,7 @@ documentation: ug # Authorization and Authentication in Blazor TreeView Component -**Authentication** involves verifying the identity of a user or system. This typically occurs through methods such as usernames and passwords, biometrics, or security tokens. +**Authentication** involves verifying the identity of a user or system. This typically occurs through methods such as user names and passwords, biometrics, or security tokens. **Authorization** determines whether an authenticated user or system possesses the necessary permissions to access a specific resource or perform a particular action. After a user's identity is authenticated, the system evaluates their credentials or permissions against a set of established rules or policies to grant or deny access.