From 4ed77cca4dd1569eff60144fc251dc60d1b6b0fc Mon Sep 17 00:00:00 2001 From: sivakumar Date: Thu, 13 Nov 2025 16:45:31 +0530 Subject: [PATCH 1/8] 991215: Updated the UG document for the TreeView and dashboard layout. --- blazor/dashboard-layout/accessibility.md | 19 ++-- ...ll-panels-rendered-at-the-same-position.md | 10 +- .../getting-started-with-web-app.md | 65 ++++++------ blazor/dashboard-layout/getting-started.md | 55 +++++----- .../dashboard-layout/images/panel-overlap.png | Bin 0 -> 13793 bytes .../images/presistence-sample.png | Bin 0 -> 13603 bytes .../dragging-moving-of-panels.md | 16 +-- .../floating-of-panels.md | 2 +- .../resizing-of-panels.md | 2 +- .../panels/position-sizing-of-panels.md | 96 ++---------------- .../panels/setting-header-of-panels.md | 12 +-- .../dashboard-layout/responsive-adaptive.md | 6 +- blazor/dashboard-layout/seo.md | 9 +- .../dashboard-layout/setting-size-of-cells.md | 26 +++-- blazor/dashboard-layout/state-persistence.md | 24 +++-- blazor/dashboard-layout/style.md | 16 +-- 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/getting-started-webapp.md | 4 +- blazor/treeview/getting-started.md | 4 +- 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 34 files changed, 364 insertions(+), 379 deletions(-) create mode 100644 blazor/dashboard-layout/images/panel-overlap.png create mode 100644 blazor/dashboard-layout/images/presistence-sample.png create mode 100644 blazor/treeview/images/check-uncheck.png create mode 100644 blazor/treeview/images/checkednodes.png diff --git a/blazor/dashboard-layout/accessibility.md b/blazor/dashboard-layout/accessibility.md index 0f18b09f34..245940bef3 100644 --- a/blazor/dashboard-layout/accessibility.md +++ b/blazor/dashboard-layout/accessibility.md @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor Dashboard Layout Component -The [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component has been designed keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, by applying the prompt `WAI-ARIA` roles, states, and properties. This component is characterized by ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT). +The [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component is designed with a strong focus on accessibility, adhering to the [WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications. It applies appropriate WAI-ARIA roles, states, and properties to ensure intuitive navigation and interaction for users relying on assistive technologies (AT). -The Blazor Dashboard Layout 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 component follows established accessibility guidelines and standards, including the [ADA (Americans with Disabilities Act)](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2 (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG22/) standards. It also incorporates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility features. The accessibility compliance for the Blazor Dashboard Layout component is outlined below. @@ -39,25 +39,26 @@ The accessibility compliance for the Blazor Dashboard Layout component is outlin
No - The component does not meet the requirement.
-## WAI-ARIA attributes +## WAI-ARIA Attributes -The Blazor Dashboard Layout component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following ARIA attributes are used in the Dashboard Layout component: +The Blazor Dashboard Layout component integrates [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to enhance accessibility. The following ARIA attributes are used within the Dashboard Layout component: | **Attributes** | **Purpose** | | --- | --- | | role=presentation | Indicates the role as a presentation for the table when the `showGridLines` property is enabled. | | aria-grabbed | Indicates whether the attribute is set to `true`. It has been selected for dragging. If this attribute is set to `false`, the element can be grabbed for a drag-and-drop operation, but will not be currently grabbed.| -## Keyboard interaction +## Keyboard Interaction Keyboard support is not applicable for the Dashboard Layout. -## Ensuring accessibility +## Ensuring Accessibility -The Blazor Dashboard Layout 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 Dashboard Layout component are verified through automated testing using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool. -The accessibility compliance of the Dashboard Layout component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/dashboardlayout) in a new window to evaluate the accessibility of the Dashboard Layout component with accessibility tools. -## See also +A sample demonstrating the accessibility compliance of the Dashboard Layout component is available. Open the [sample](https://blazor.syncfusion.com/accessibility/dashboardlayout) in a new window to evaluate its accessibility using various tools. + +## See Also * [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md b/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md index 5df8723988..4d71f1e484 100644 --- a/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md +++ b/blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md @@ -1,6 +1,6 @@ --- layout: post -title: Preventing Panel Overlap in Blazor Dashboard Layout Component | Syncfusion +title: Prevent Panel Overlap in Blazor Dashboard | Syncfusion description: Check out and learn how to preventing panel overlap in the Syncfusion Blazor Dashboard Layout component. platform: Blazor control: Dashboard Layout @@ -9,9 +9,11 @@ documentation: ug # Preventing Panel Overlap in Blazor Dashboard Layout -When rendering [DashboardLayoutPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html) components dynamically, it is important to assign a unique [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Id) to each panel. The **Id** property is used internally by the Dashboard Layout component to uniquely identify and manage panels. If multiple panels are assigned the same **Id**, they will be treated as the same instance, and render in the same position (e.g., Row = 0, Column = 0). Assigning unique **Ids** ensures that each panel is rendered independently in its specified location. +When dynamically rendering [DashboardLayoutPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html) components, panels may overlap if not configured correctly. This issue typically occurs when multiple panels are assigned the same [`Id`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Id) property. The Dashboard Layout component uses this `Id` internally to uniquely identify and manage each panel's position and state. If `Id` values are duplicated, the component treats these panels as the same instance, causing them to render in the same location (e.g., Row = 0, Column = 0) and visually overlap. -Here is an example of how to assign unique **Ids** to each panel: +To ensure each panel renders independently in its specified location, assign a unique `Id` to every `DashboardLayoutPanel`. + +Here is an example demonstrating how to assign unique `Id` values to dynamically generated panels: ```cshtml @@ -60,3 +62,5 @@ Here is an example of how to assign unique **Ids** to each panel: ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryNOLepGKtuKUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor DashboardLayout](../images/panel-overlap.png) \ No newline at end of file diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index f6e3e688ed..8bfecc1a92 100644 --- a/blazor/dashboard-layout/getting-started-with-web-app.md +++ b/blazor/dashboard-layout/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Blazor Dashboard Layout in Web App description: Checkout and learn about the documentation for getting started with Blazor Dashboard Layout Component in Blazor Web App. platform: Blazor -component: Dashboard Layout +control: Dashboard Layout documentation: ug --- -# Getting Started with Blazor Dashboard Layout Component in Web App +# Getting Started with Dashboard Layout Component in a Blazor Web App -This section briefly explains about how to include [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section describes how to include the Syncfusion [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -19,19 +19,19 @@ This section briefly explains about how to include [Blazor Dashboard Layout](htt * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## Create a New Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) during the creation of your Blazor Web Application. ## Install Syncfusion® Blazor Layouts and Themes NuGet in the Blazor Web App To add **Blazor Dashboard Layout** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If the Blazor Web App uses the `WebAssembly or Auto` render modes, ensure the Syncfusion® Blazor component NuGet packages are installed in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -52,11 +52,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## Create a New Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) during the creation of your Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,7 +74,7 @@ N> For more information on creating a **Blazor Web App** with various interactiv ## Install Syncfusion® Blazor Layouts and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If the Blazor Web App uses the `WebAssembly or Auto` render modes, ensure the Syncfusion® Blazor component NuGet packages are installed in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -118,7 +118,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace. Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, Need to register the Syncfusion® Blazor service in both **~/Program.cs** files (Server and Client projects). {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, project will contain a single **~/Program.cs** file. So, register the Syncfusion® Blazor Service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -173,9 +173,9 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Reference the theme stylesheet within the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file. These resources are accessed from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). ```html @@ -191,9 +191,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor Dashboard Layout component +## Add Syncfusion® Blazor Dashboard Layout Component -Add the Syncfusion® Blazor Dashboard Layout component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows: +Add the Syncfusion® Blazor Dashboard Layout component in `.razor` file inside the `Pages` folder. If the interactivity location for your web app is set to `Per page/component`, define a render mode at the top of your component, as shown below: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Dashboard Layout | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto`, `WebAssembly`, or `Server`, the render mode will be configured in the `App.razor` file by default and does not need to be added to individual components. {% tabs %} {% highlight razor %} @@ -232,17 +232,15 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} -## Defining panels +## Defining Panels -A Dashboard Layout can be rendered with multiple panels to design a template with its basic properties. +The Dashboard Layout component can be rendered with multiple panels, each designed with basic properties. Each panel typically consists of a header and a content section. These sections are defined using the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) properties, respectively. -A Dashboard Layout panel consists of two sections, which are Header and Content section. [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) is used to render the Header section and [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) is used to render the content section. +Panels are interactive, supporting functionalities such as dragging, floating, and resizing. -Also, it is easy to interact with the panels by dragging, floating, and resizing functionality of panels. +### Panels with Simple Data -### Panels with simple data - -A Dashboard Layout panel is rendered with simple data. The header of a panel is defined by [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and content of a panel is defined by [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate). +A basic Dashboard Layout panel can display simple data. The panel's header is defined by [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and its content by the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate). {% tabs %} {% highlight razor %} @@ -276,11 +274,11 @@ The Dashboard Layout with simple content will be rendered in the web browser as {% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %} -### Panels with components +### Panels with Components -A Dashboard Layout can be rendered with the components like the chart, grids, maps, gauge, and more as a content of Dashboard Layout panel. +A Dashboard Layout can also host complex UI components such as charts, grids, maps, or gauges within its panels. -These complex data (components) are placed as the panel content by assigning the corresponding component element as the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) of the panel. +These components are placed as panel content by assigning the corresponding Blazor component element as the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) of the panel. {% tabs %} {% highlight razor %} @@ -444,20 +442,19 @@ These complex data (components) are placed as the panel content by assigning the {% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSDIVjTEDbFVUJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.png)" %} -N> While using the **SfRangeNavigator** component in this sample, ensure that the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) NuGet package is installed in your project. You can install the package from [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). +N> When using the **SfRangeNavigator** component in this sample, ensure that the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) NuGet package is installed in your project. You can install the package from [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To get started quickly with designing a Blazor Dashboard Layout with UI Components, you can check the video below. {% youtube "youtube:https://www.youtube.com/watch?v=KOetW4f6_v4" %} -By default, the Dashboard Layout component is rendered with auto adjustable and [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) according to the parent dimensions. +By default, the Dashboard Layout component is rendered with auto-adjustable and [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) panels according to the parent dimensions. N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout). -## See also +## See Also 1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) - +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/dashboard-layout/getting-started.md b/blazor/dashboard-layout/getting-started.md index 8bbbb49777..a9c73d3be4 100644 --- a/blazor/dashboard-layout/getting-started.md +++ b/blazor/dashboard-layout/getting-started.md @@ -7,11 +7,11 @@ control: Dashboard Layout documentation: ug --- -# Getting Started with Blazor Dashboard Layout Component +# Getting Start with Blazor Dashboard Layout in WebAssembly App -This section briefly explains about how to include [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component into a Blazor WebAssembly App using Visual Studio and Visual Studio Code. -To get started quickly with Blazor Dashboard Layout component, check on the following video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout) sample: +To get started quickly with the Blazor Dashboard Layout component, watch the following video or refer to the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout) sample: {% youtube "youtube:https://www.youtube.com/watch?v=K6i0KU7tbLQ" %} @@ -24,13 +24,13 @@ To get started quickly with Blazor Dashboard Layout component, check on the foll * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio +## Create a New Blazor WebAssembly App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** project using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Layouts and Themes NuGet in the App -To add **Blazor Dashboard Layout** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor Dashboard Layout** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -51,9 +51,9 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor WebAssembly App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). @@ -127,20 +127,24 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. +Reference the theme stylesheet within the `` section and the script reference at the end of the `` in the **~/index.html** file. These resources are accessed from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). ```html .... - +.... + + .... + + ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor Dashboard Layout component +## Add Blazor Dashboard Layout Component Add the Syncfusion® Blazor Dashboard Layout component in the **~/Pages/Index.razor** file. @@ -165,17 +169,15 @@ N> There is no need to assign default value for panels. Refer to the [Panels](./ {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %} -## Defining panels - -A Dashboard Layout can be rendered with multiple panels to design a template with its basic properties. +## Defining Panels -A Dashboard Layout panel consists of two sections, which are Header and Content section. [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) is used to render the Header section and [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) is used to render the content section. +The Dashboard Layout component renders multiple panels, each designed using basic properties. Each panel consists of two sections: a header and a content section. These are defined using the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) properties, respectively. -Also, it is easy to interact with the panels by dragging, floating, and resizing functionality of panels. +Panels are interactive, supporting functionalities such as dragging, floating, and resizing. -### Panels with simple data +### Panels with Simple Data -A Dashboard Layout panel is rendered with simple data. The header of a panel is defined by [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate) and content of a panel is defined by [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate). +A basic Dashboard Layout panel can display simple data. The panel's header is defined by [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate), and its content by the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate). {% tabs %} {% highlight razor %} @@ -209,11 +211,11 @@ The Dashboard Layout with simple content will be rendered in the web browser as {% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %} -### Panels with components +### Panels with Components -A Dashboard Layout can be rendered with the components like the chart, grids, maps, gauge, and more as a content of Dashboard Layout panel. +A Dashboard Layout can also host complex UI components such as charts, grids, maps, or gauges within its panels. -These complex data (components) are placed as the panel content by assigning the corresponding component element as the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) of the panel. +These components are placed as panel content by assigning the corresponding Blazor component element as the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate) of the panel. {% tabs %} {% highlight razor %} @@ -382,13 +384,12 @@ To get started quickly with designing a Blazor Dashboard Layout with UI Componen {% youtube "youtube:https://www.youtube.com/watch?v=KOetW4f6_v4" %} -By default, the Dashboard Layout component is rendered with auto adjustable and [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) according to the parent dimensions. +By default, the Dashboard Layout component is rendered with auto-adjustable and [responsive](https://blazor.syncfusion.com/documentation/dashboard-layout/responsive-adaptive) panels according to the parent dimensions. -## See also +## See Also * [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) - \ No newline at end of file +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/dashboard-layout/images/panel-overlap.png b/blazor/dashboard-layout/images/panel-overlap.png new file mode 100644 index 0000000000000000000000000000000000000000..9c804453ac3105acc2c806643098738180198090 GIT binary patch literal 13793 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 I{@~gF0x@^nH~;_u literal 0 HcmV?d00001 diff --git a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md index 0df62ff3b8..d556f12fde 100644 --- a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md @@ -9,11 +9,11 @@ documentation: ug # Drag and Drop in Blazor Dashboard Layout Component -The Dashboard Layout component is provided with dragging functionality to drag and reorder the panels within the layout. While dragging a panel, a holder will be highlighted below the panel indicating the panel placement on panel drop. This helps the users to decide whether to place the panel in the current position or revert to previous position without disturbing the layout. +The Dashboard Layout component provides built-in drag-and-drop functionality, enabling users to reorder and rearrange panels dynamically within the layout. As a panel is dragged, a placeholder area is highlighted, indicating the potential placement location when the panel is dropped. This visual feedback assists users in determining optimal panel positioning. -If one or more panels collide while dragging, then the colliding panels will be pushed towards left, right, top, or bottom direction where an adaptive space for the collided panel is available. The position changes of these collided panels will be updated dynamically during dragging of a panel, so the users can conclude whether to place the panel in the current position or not. +When multiple panels collide during a drag operation, the colliding panels are automatically adjusted by being pushed to the left, right, top, or bottom to create adaptive space for the moving panel. These positional adjustments are updated in real-time, allowing users to anticipate the final layout before releasing the dragged panel. -N> The complete panel will act as the handler for dragging the panel such that the dragging action occurs on clicking anywhere over a panel. +N> By default, the entire panel acts as the draggable handle, meaning a dragging action can be initiated by clicking anywhere on the panel. ```cshtml @@ -46,15 +46,15 @@ N> The complete panel will act as the handler for dragging the panel such that t ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The above sample demonstrates dragging and pushing of panels. For example, while dragging the panel 0 over panel 1, these panels get collided and push the panel 1 towards the feasible direction, so that, the panel 0 gets placed in the panel 1 position. +The sample above demonstrates both dragging and the automatic pushing of panels. For instance, when panel 0 is dragged over panel 1, they collide, and panel 1 is pushed to a feasible direction, allowing panel 0 to occupy its new position. -The following output demonstrates the dragging functionality of dashboard component. +The following output illustrates the dragging functionality of the dashboard component: ![Drag and Drop Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-and-drop.gif) -## Customizing the dragging handler +## Customizing the Drag Handle -The dragging handler for the panels can be customized using the [`DraggableHandle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_DraggableHandle) property to restrict the dragging action within a particular element in the panel. +The draggable handle for panels can be customized using the [`DraggableHandle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_DraggableHandle) property. This property allows you to restrict the dragging action to a specific element within the panel, rather than the entire panel. ```cshtml @@ -91,6 +91,6 @@ The dragging handler for the panels can be customized using the [`DraggableHandl ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVyjoVZzbiwbNQP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following output demonstrates customizing the dragging handler of the panels, where the dragging action of panel occurs only with the header of the panel. +The following output demonstrates customizing the dragging handle, where panels can only be dragged by interacting with their header section. ![Customizing Dragging Handler of Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-handler-of-panels.gif) \ No newline at end of file diff --git a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md index 3174752292..2555246dfd 100644 --- a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md @@ -9,7 +9,7 @@ documentation: ug # Floating Panels in Blazor Dashboard Layout Component -The Dashboard Layout component is also provided with the panel floating functionality that can be enabled or disabled using the [`AllowFloating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowFloating) property. The floating functionality of the component allows to effectively use the entire layout for the panel’s placement. If the floating functionality is enabled, the panels within the layout will float upwards automatically to occupy the empty cells available in previous rows. +The DashboardLayout component includes a panel floating functionality controlled by the [`AllowFloating`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowFloating) property. When enabled, this feature ensures effective utilization of the entire layout space for panel placement. Panels within the layout will automatically float upwards to occupy any empty cells available in preceding rows, thus maintaining a compact and optimized dashboard arrangement. ```cshtml diff --git a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md index e0ef78d761..979d433ff4 100644 --- a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md +++ b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md @@ -9,7 +9,7 @@ documentation: ug # Resizing Panels in Blazor Dashboard Layout Component -The Dashboard Layout component is also provided with the panel resizing functionality, which can be enabled or disabled using the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowResizing) property. This functionality allows you to resize the panels dynamically through UI interactions using the resizing handlers, which control the panel resizing in various directions. +The Dashboard Layout component provides panel resizing functionality, which can be enabled or disabled using the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowResizing) property. This feature allows users to dynamically adjust panel dimensions through UI interactions using various resizing handlers. ```cshtml diff --git a/blazor/dashboard-layout/panels/position-sizing-of-panels.md b/blazor/dashboard-layout/panels/position-sizing-of-panels.md index 423c92f37b..979d433ff4 100644 --- a/blazor/dashboard-layout/panels/position-sizing-of-panels.md +++ b/blazor/dashboard-layout/panels/position-sizing-of-panels.md @@ -1,98 +1,26 @@ --- layout: post -title: Size and Position in Blazor Dashboard Layout Component | Syncfusion -description: Checkout and learn here all about size and position in Syncfusion Blazor Dashboard Layout component and more. +title: Resizing Panels in Blazor Dashboard Layout Component | Syncfusion +description: Checkout and learn here all about resizing panels in Syncfusion Blazor Dashboard Layout component and more. platform: Blazor control: Dashboard Layout documentation: ug --- -# Size and Position in Blazor Dashboard Layout Component +# Resizing Panels in Blazor Dashboard Layout Component -Panels are the basic building blocks of the Dashboard Layout component. They act as a container for the data to be visualized or presented. - -The following table represents all the available panel properties and the corresponding functionalities: - -| **PanelObject** | **Default Value** | **Description** | -| --- | --- | --- | -| Id | null | Specifies the ID value of the panel. | -| Row | 0 | Specifies the row value in which the panel to be placed. | -| Column | 0 | Specifies the column value in which the panel to be placed. | -| SizeX | 1 | Specifies the width of the panel in cells count. | -| SizeY | 1 | Specifies the height of the panel in cells count. | -| MinSizeX | 1 | Specifies the minimum width of the panel in cells count. | -| MinSizeY | 1 | Specifies the minimum height of the panel in cells count. | -| MaxSizeX | null | Specifies the maximum width of the panel in cells count. | -| MaxSizeY | null | Specifies the maximum height of the panel in cells count. | -| HeaderTemplate | null | Specifies the header template of the panel. | -| ContentTemplate | null | Specifies the content template of the panel. | -| CssClass | null | Specifies the CSS class name that can be appended with each panel element.| - -## Positioning of panels - -The panels within the layout can be easily positioned or ordered using the [`Row`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row) and [`Column`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column) properties of the panels. Positioning of panels will be beneficial to represent the data in any desired order. +The Dashboard Layout component provides panel resizing functionality, which can be enabled or disabled using the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowResizing) property. This feature allows users to dynamically adjust panel dimensions through UI interactions using various resizing handlers. ```cshtml @using Syncfusion.Blazor.Layouts - - - -
1
 - - -
2
 - - -
3
 - - -
4
 - - -
5
 - - -
6
 - - - - - - -``` - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -The following screenshot shows the positioning of panels within the Dashboard Layout using the row and column properties of the panels. - -![Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.png) - -## Sizing of panels - -A panel's size can be varied easily by defining the [`SizeX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX) and [`SizeY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY) properties. - -* `SizeX` property defines the width of a panel in cells count. -* `SizeY` property defines the height of a panel in cells count. - -These properties are helpful in designing a dashboard, where the content of each panel may vary in size. - -```cshtml - -@using Syncfusion.Blazor.Layouts - - +
0
 - +
1
 @@ -101,12 +29,6 @@ These properties are helpful in designing a dashboard, where the content of each
3
 - -
4
 - - -
5
 - @@ -119,8 +41,8 @@ These properties are helpful in designing a dashboard, where the content of each ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVAsBVwTABPvxgH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following screenshot shows the sizing of panels within the Dashboard Layout using the SizeX and SizeY properties of the panels. +![Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif) -![Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.png) \ No newline at end of file +N> Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by defining the required directions with the [`ResizableHandles`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResizableHandles) property. \ No newline at end of file diff --git a/blazor/dashboard-layout/panels/setting-header-of-panels.md b/blazor/dashboard-layout/panels/setting-header-of-panels.md index 18bc3734e4..ecf319681d 100644 --- a/blazor/dashboard-layout/panels/setting-header-of-panels.md +++ b/blazor/dashboard-layout/panels/setting-header-of-panels.md @@ -7,12 +7,12 @@ control: Dashboard Layout documentation: ug --- -# Header and Content in Blazor Dashboard Layout Component +# Header and Content Templates in Blazor Dashboard Layout Component -Basically, Dashboard Layout Component have two templates to render the data in panels. +The Blazor Dashboard Layout component utilizes two primary templates for rendering data within its panels: -* [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate): To render data or any HTML template as the content. -* [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate): A word or phrase that summarizes the panel’s content can be added as the header on the top of each panel. +* [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_ContentTemplate): Used to render data or any HTML structure as the main content of a panel. +* [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_HeaderTemplate): Enables the display of a word or phrase that summarizes the panel's content, positioned at the top of each panel. ```cshtml @@ -53,6 +53,6 @@ Basically, Dashboard Layout Component have two templates to render the data in p ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following output demonstrates the Header and content of Panels using templates. +The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels: -![Blazor Dashboard Layout with Header.](images/blazor-admin-template-layout-with-header.png) \ No newline at end of file +![Blazor Dashboard Layout with Header.](../images/blazor-admin-template-layout-with-header.png) \ No newline at end of file diff --git a/blazor/dashboard-layout/responsive-adaptive.md b/blazor/dashboard-layout/responsive-adaptive.md index f434a2a9ba..508afe4d70 100644 --- a/blazor/dashboard-layout/responsive-adaptive.md +++ b/blazor/dashboard-layout/responsive-adaptive.md @@ -9,9 +9,9 @@ documentation: ug # Responsive and Adaptive Layout in Blazor Dashboard Layout Component -The component is provided with built-in responsive support, where panels within the layout get adjusted based on their parent element's dimensions to accommodate any resolution, which relieves the burden of building responsive dashboards. +The Blazor Dashboard Layout component offers built-in responsive support, automatically adjusting panels based on their parent element's dimensions. This eliminates the need for manual configuration of responsive dashboards across various resolutions. -The Dashboard Layout is designed to automatically adapt with lower resolutions by transforming the entire layout into a stacked one. So that, the panels will be displayed in a vertical column. By default, whenever the screen resolution meets **600px or lower** resolutions this layout transformation occurs. This transformation can be modified for any user defined resolution by defining the [`MediaQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_MediaQuery) property of the component. +The Dashboard Layout is designed to adapt to lower resolutions by transforming itself into a stacked layout, where panels are displayed in a single vertical column. By default, this layout transformation occurs when the screen resolution is **600px or lower**. You can customize this breakpoint for any desired resolution by defining the [`MediaQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_MediaQuery) property of the component. ```cshtml @@ -47,4 +47,4 @@ The Dashboard Layout is designed to automatically adapt with lower resolutions b ![Responsive and Adaptive Layout in Blazor DashboardLayout](images/blazor-dashboard-layout-cell-space.png) -The above sample demonstrates usage of the `MediaQuery` property to turn out the layout into a stacked one in user defined resolution. Here, whenever the window size reaches 700px or lesser, the layout becomes a stacked layout. \ No newline at end of file +The sample above demonstrates the usage of the `MediaQuery` property to transform the layout into a stacked view at a user-defined resolution. Here, when the window size reaches 700px or less, the layout automatically switches to a stacked arrangement. \ No newline at end of file diff --git a/blazor/dashboard-layout/seo.md b/blazor/dashboard-layout/seo.md index e2fe920666..6d7c2c4c8f 100644 --- a/blazor/dashboard-layout/seo.md +++ b/blazor/dashboard-layout/seo.md @@ -7,9 +7,11 @@ control: Dashboard Layout documentation: ug --- -# SEO Analysis Dashboard in Blazor Dashboard Layout Component +# SEO Analysis in Blazor Dashboard Layout Component -The Blazor Dashboard Layout component is used for creating dynamic and responsive layouts in Blazor applications. This documentation provides a comprehensive guide on how to utilize the Dashboard Layout component for real-time SEO data analysis within the context of a Blazor application. +The Blazor Dashboard Layout component is highly effective for creating dynamic and responsive dashboards in Blazor applications. This guide demonstrates how to build a real-time SEO (Search Engine Optimization) data analysis dashboard by integrating various Syncfusion Blazor components within the Dashboard Layout. + +This complex example showcases how to combine an `SfDashboardLayout` with `SfSidebar`, `SfAccumulationChart`, `SfChart`, and `SfGrid` components to present a comprehensive view of SEO metrics. ```cshtml @@ -653,8 +655,7 @@ The Blazor Dashboard Layout component is used for creating dynamic and responsiv ``` -To add UI components to Blazor Dashboard Layout component, you can check on this video. +To integrate UI components into the Blazor Dashboard Layout component effectively, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=KOetW4f6_v4" %} - diff --git a/blazor/dashboard-layout/setting-size-of-cells.md b/blazor/dashboard-layout/setting-size-of-cells.md index 0a56496157..6cce416db6 100644 --- a/blazor/dashboard-layout/setting-size-of-cells.md +++ b/blazor/dashboard-layout/setting-size-of-cells.md @@ -1,6 +1,6 @@ --- layout: post -title: Configuring the Grid Layout in Blazor Dashboard Layout | Syncfusion +title: Configure Grid Layout in Blazor Dashboard | Syncfusion description: Learn here all about Configuring the Grid Layout in Syncfusion Blazor Dashboard Layout component and more. platform: Blazor control: Dashboard Layout @@ -9,16 +9,16 @@ documentation: ug # Configuring the Grid Layout in Blazor Dashboard Layout Component -The **Dashboard Layout** is a grid structured component, which can be split into subsections of equal size known as cells. +The **Dashboard Layout** component is built upon a grid structure, which is divided into equally sized subsections known as cells. | **Properties** | **Description** | | --- | --- | | Columns | Specifies the total number of cells in each row. | | CellAspectRatio | Specifies the height of cells to any desired size. | -## Modifying cell size +## Modifying Cell Size -The size of grid cells can be modified to the required size using the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) and [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) properties. +The size of individual grid cells can be modified to suit your design requirements using the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) and [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) properties. ```cshtml @@ -52,17 +52,15 @@ The size of grid cells can be modified to the required size using the [`Columns` {% previewsample "https://blazorplayground.syncfusion.com/embed/LDrUMrBmpWKQAbtE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -In the above sample, width of the parent element is divided into five equal cells based on the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) property value resulting the width of each cell as 100px. +In the sample above, the width of the parent element is divided into five equal cells based on the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) property value. The `CellAspectRatio` is set to `2`, meaning for every 100px of cell width, the height will be 50px (width / height = 2). -The height of these cells will be 50px based on the CellAspectRatio value 100/50 (that is for every 100px of width, 50px will be the height of the cell). - -The following output demonstrates the setting of [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) and [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) properties in the dashboard component. +The following output demonstrates the effect of setting [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) and [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) properties in the Dashboard Layout: ![Changing Cell Size of Blazor Dashboard Layout](images/blazor-dashboard-layout-cell-size.png) -## Setting cell spacing +## Setting Cell Spacing -The spacing between each panel in a row and column can be defined using the [`CellSpacing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellSpacing) property. Adding space between the panels will make the layout effective and provides a clear data representation. +The spacing between individual panels in both rows and columns can be defined using the [`CellSpacing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellSpacing) property. Adding spacing between panels significantly enhances layout clarity and provides a cleaner representation of your data. ```cshtml @@ -96,13 +94,13 @@ The spacing between each panel in a row and column can be defined using the [`Ce {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLKMBhQpMKkevti?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following output demonstrates the neat and clear representation of data by setting the `cellSpacing` property in dashboard component. +The following output demonstrates the clear representation of data achieved by setting the `CellSpacing` property in the Dashboard Layout component: ![Blazor Dashboard Layout with Cell Spacing](images/blazor-dashboard-layout-cell-space.png) -## Graphical representation of grid layout +## Graphical Representation of Grid Layout -These cells combinedly form a grid-structured layout, which will be hidden initially. This grid-structured layout can be made visible by enabling the [`ShowGridLines`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ShowGridLines) property, which clearly shows the cells split-up within the layout. These gridlines are helpful in panels sizing and placement within the layout during initial designing of a dashboard. +The underlying grid structure of the Dashboard Layout is initially hidden. This grid can be made visible by enabling the [`ShowGridLines`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ShowGridLines) property. Visualizing these grid lines is particularly helpful during the initial design phase for accurately sizing and positioning panels within the layout. ```cshtml @@ -136,6 +134,6 @@ These cells combinedly form a grid-structured layout, which will be hidden initi {% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKMhBQzsTMyoHg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The following output demonstrates the gridlines indicating the cells split-up of the layout and the data containers placed over these cells are known as panels. +The following output illustrates the visible gridlines, indicating the cell division of the layout, with data containers (panels) placed over these cells: ![Blazor Dashboard Layout with GridLines](images/blazor-dashboard-layout-gridlines.png) \ No newline at end of file diff --git a/blazor/dashboard-layout/state-persistence.md b/blazor/dashboard-layout/state-persistence.md index 43340a4985..8cb6b82d21 100644 --- a/blazor/dashboard-layout/state-persistence.md +++ b/blazor/dashboard-layout/state-persistence.md @@ -9,13 +9,13 @@ documentation: ug # State Persistence in Blazor Dashboard Layout Component -State persistence allows users to save and restore the Dashboard Layout state. This ensures that users' custom layouts remain unchanged even after refreshing the page or navigating to a different view. +State persistence allows users to save and restore the layout of the Blazor Dashboard Layout component. This feature ensures that custom panel positions, sizes, and arrangements remain intact even after a page refresh or navigating away and returning, providing a consistent user experience. -## Enabling persistence in Dashboard Layout +## Enabling Persistence in Dashboard Layout State persistence allowed Dashboard Layout component to retain the panel positions [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column), [Row](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row), width ([SizeX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX)), and height ([SizeY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY)) values in the [localStorage](https://www.w3schools.com/html/html5_webstorage.asp) for state maintenance even if the browser is refreshed or if you move to the next page within the browser. This action is handled through the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_EnablePersistence) property which is set to `false` by default. When it is set to `true`, the panel positions `Column`, `Row`, width (`SizeX`), and height (`SizeY`) values of the Dashboard Layout component will be retained even after refreshing the page. -N> Dashboard Layout component [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ID) is essential to set state persistence. Because the data will be persisted based on the component `ID`. +N> The Dashboard Layout component's [`ID`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ID) is crucial for state persistence, as data is stored and retrieved based on this unique identifier. ```cshtml @@ -55,16 +55,19 @@ N> Dashboard Layout component [ID](https://help.syncfusion.com/cr/blazor/Syncfus ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoNuhoTaPLpvwa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Handling Blazor Dashboard Layout state manually +The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels: -The Blazor Dashboard Layout component allows you to manage its state manually using built-in persistence methods. This enables save, load, and reset the panel positions explicitly based on user interactions. +![Blazor Dashboard Layout.](images/blazor-admin-template-layout-with-header.png) -The [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_GetPersistDataAsync) method retrieves the current state of the Dashboard Layout as a string, which is suitable for sending them over network and storing in database. +## Handling Blazor Dashboard Layout State Manually -The [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_SetPersistDataAsync) method is used to restore a previously saved Dashboard Layout state. +The Blazor Dashboard Layout component provides built-in methods to manage its state explicitly, allowing you to save, load, and reset panel configurations programmatically based on user interactions or application logic. -The [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResetPersistDataAsync) method reset the Dashboard Layout state to its original state. This will clear persisted data in window local storage and renders Dashboard Layout with its original property values. +* [`GetPersistDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_GetPersistDataAsync): This method retrieves the current state of the Dashboard Layout as a string. The string format makes it suitable for storage in a database, a file, or for transmission over a network. +* [`SetPersistDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_SetPersistDataAsync): Use this method to restore a previously saved Dashboard Layout state by passing the state string obtained from `GetPersistDataAsync`. +* [`ResetPersistDataAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResetPersistDataAsync): This method resets the Dashboard Layout state to its original, default configuration. It also clears any persisted data from the browser's local storage for that component. ```cshtml @@ -126,4 +129,7 @@ The [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } } -``` \ No newline at end of file +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVyZkBIfEuZVDNy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor Dashboard Layout.](images/presistence-sample.png) \ No newline at end of file diff --git a/blazor/dashboard-layout/style.md b/blazor/dashboard-layout/style.md index c87df00734..40f9ddb15b 100644 --- a/blazor/dashboard-layout/style.md +++ b/blazor/dashboard-layout/style.md @@ -11,9 +11,9 @@ documentation: ug The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. -## Customizing the Dashboard Layout panel header +## Customizing the Dashboard Layout Panel Header -Use the following CSS to customize the Dashboard Layout panel header. +Use the following CSS to customize the header section of the Dashboard Layout panels. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header { @@ -23,9 +23,9 @@ Use the following CSS to customize the Dashboard Layout panel header. } ``` -## Customizing the Dashboard Layout panel content +## Customizing the Dashboard Layout Panel Content -Use the following CSS to customize the Dashboard Layout panel content. +Apply the following CSS to customize the main content area of the Dashboard Layout panels. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content { @@ -34,9 +34,9 @@ Use the following CSS to customize the Dashboard Layout panel content. } ``` -## Customizing the Dashboard Layout panel resize icon +## Customizing the Dashboard Layout Panel Resize Icon -Use the following CSS to customize the Dashboard Layout resize icon. +The resize icon that appears in the corner of resizable panels can also be customized. Use the following CSS to modify its appearance. ```css .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-double{ @@ -47,9 +47,9 @@ Use the following CSS to customize the Dashboard Layout resize icon. } ``` -## Customizing the Dashboard Layout panel background +## Customizing the Dashboard Layout Background -Use the following CSS to customize the Dashboard Layout panel background. +Modify the overall background of the Dashboard Layout component using the CSS below. This targets the main container of the dashboard. ```css .e-dashboardlayout.e-control.e-responsive { 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..17b376e7ae 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 user names 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/getting-started-webapp.md b/blazor/treeview/getting-started-webapp.md index c91652259d..0158d820f9 100644 --- a/blazor/treeview/getting-started-webapp.md +++ b/blazor/treeview/getting-started-webapp.md @@ -314,6 +314,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/treeview/getting-started.md b/blazor/treeview/getting-started.md index 6b7ea83e58..3b9407a49d 100644 --- a/blazor/treeview/getting-started.md +++ b/blazor/treeview/getting-started.md @@ -262,6 +262,6 @@ Add the Syncfusion® Blazor TreeView compone ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) 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: Thu, 13 Nov 2025 16:58:20 +0530 Subject: [PATCH 2/8] 991215: Updated the UG document for the TreeView and dashboard layout. --- 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/getting-started-webapp.md | 26 +++--- .../treeview/getting-started-with-maui-app.md | 16 ++-- .../getting-started-with-server-app.md | 24 ++--- blazor/treeview/getting-started.md | 18 ++-- 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/add-remove-node.png | Bin 0 -> 8681 bytes blazor/treeview/images/child-nodes.png | Bin 0 -> 16372 bytes blazor/treeview/images/data-binding.png | Bin 0 -> 13847 bytes blazor/treeview/images/edit-node.png | Bin 0 -> 7555 bytes blazor/treeview/images/multiselect.png | Bin 0 -> 9484 bytes blazor/treeview/images/select-allnode.png | Bin 0 -> 13450 bytes .../images/template-add-remove-node.png | Bin 0 -> 5951 bytes blazor/treeview/images/tooltip-template.png | Bin 0 -> 35339 bytes blazor/treeview/images/tooltip.png | Bin 0 -> 8824 bytes blazor/treeview/integration.md | 22 +++-- blazor/treeview/multiple-selection.md | 7 +- blazor/treeview/navigation.md | 18 ++-- blazor/treeview/node-customization.md | 43 +++++---- blazor/treeview/node-editing.md | 52 +++++++---- blazor/treeview/node-selection.md | 60 +++++++------ blazor/treeview/searching-and-filtering.md | 3 +- blazor/treeview/sorting.md | 2 +- blazor/treeview/styles.md | 10 +-- blazor/treeview/template.md | 6 +- blazor/treeview/virtualization.md | 4 +- 38 files changed, 335 insertions(+), 353 deletions(-) create mode 100644 blazor/treeview/images/add-remove-node.png create mode 100644 blazor/treeview/images/child-nodes.png create mode 100644 blazor/treeview/images/data-binding.png create mode 100644 blazor/treeview/images/edit-node.png create mode 100644 blazor/treeview/images/multiselect.png create mode 100644 blazor/treeview/images/select-allnode.png create mode 100644 blazor/treeview/images/template-add-remove-node.png create mode 100644 blazor/treeview/images/tooltip-template.png create mode 100644 blazor/treeview/images/tooltip.png diff --git a/blazor/treeview/accessibility.md b/blazor/treeview/accessibility.md index 074073419c..e3fa334919 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 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 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 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 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: +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: | **Attributes** | **Purpose** | | --- | --- | @@ -51,9 +51,9 @@ The Blazor TreeView component implements the [WAI-ARIA Tree View pattern](https: | 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 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: +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. | Windows | Mac | Description | |------|----|-----| @@ -69,12 +69,12 @@ The Blazor TreeView component adheres to the [WAI-ARIA keyboard interaction guid | Space | space | Checks the current node. | | Ctrl + A | ⌘ + A | Selects all nodes. | -## Ensuring Accessibility +## Ensuring accessibility -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 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 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 17b376e7ae..8287d250d2 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** involves verifying the identity of a user or system. This typically occurs through methods such as user names and passwords, biometrics, or security tokens. +**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. -**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. +**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. -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. +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. -The following example demonstrates a Blazor Server App configured with authentication, ensuring that the entire TreeView component is only accessible to authenticated users. +In the below example, the Blazor Server App is equipped with authentication, which ensures that only authorized users can access the TreeView. ```cshtml @using Syncfusion.Blazor.Navigations diff --git a/blazor/treeview/check-box.md b/blazor/treeview/check-box.md index 9bc3f1cc59..85875991d4 100644 --- a/blazor/treeview/check-box.md +++ b/blazor/treeview/check-box.md @@ -9,17 +9,16 @@ documentation: ug # CheckBox in Blazor TreeView Component -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. +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. ## AutoCheck in Blazor TreeView Component -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. +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. -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. +* 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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -101,13 +100,11 @@ For independent checked states, allowing child nodes to be checked or unchecked } ``` -{% 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 -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -188,11 +185,10 @@ A specific node is checked by setting the [`IsChecked`](https://help.syncfusion. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZreMtWrAblXlpWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Check nodes using CheckedNodes property +## Check nodes through API -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -277,13 +273,10 @@ The Blazor TreeView component enables checking specific nodes upon initial rende } } ``` -{% 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 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 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 example demonstrates the usage of these methods within the context of a button click event. @@ -384,13 +377,9 @@ The example demonstrates the usage of these methods within the context of a butt } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrICXiVgusUIOKg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor TreeView](./images/check-uncheck.png) +## Get checked nodes -## 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -541,13 +530,11 @@ 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 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -641,11 +628,10 @@ The Blazor TreeView component facilitates single selection of nodes with checkbo } ``` -{% 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 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -748,11 +734,10 @@ The Blazor TreeView component can render checkboxes before each node when [`Show ``` -{% 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 bd0e48209d..887f475bb9 100644 --- a/blazor/treeview/data-binding.md +++ b/blazor/treeview/data-binding.md @@ -11,28 +11,26 @@ 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. -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. +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. -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. +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. -A video demonstrating how to bind list data and service URLs to the Syncfusion® Blazor TreeView component is available: +To bind list data and service URLs to the Syncfusion® Blazor TreeView component , you can check on this video. {% 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.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: +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. * Hierarchical data * Self-referential data -### Hierarchical Data +### Hierarchical data -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. +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. 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. @@ -120,13 +118,11 @@ 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. @@ -219,11 +215,9 @@ 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. @@ -276,9 +270,8 @@ 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. @@ -354,11 +347,10 @@ 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 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`. +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`. The `DataManager` that acts as an interface between the service endpoint and the TreeView requires the following information to interact with service endpoint properly. @@ -378,11 +370,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 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -410,11 +402,11 @@ The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table are ``` -### 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 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. +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. -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -441,7 +433,6 @@ The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table are } ``` -{% 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) @@ -556,9 +547,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. 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -630,9 +621,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 @@ -932,7 +923,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. @@ -1131,9 +1122,9 @@ namespace WebApplication1.Server.Controllers ### Configure Blazor TreeView component using 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`. +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. -N> CRUD operations are performed in the TreeView component using the context menu. +N> The CRUD operation has been performed in the TreeView component using the context menu. ```csharp @@ -1257,11 +1248,11 @@ N> CRUD operations are performed in the TreeView component using the context men 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. @@ -1374,9 +1365,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. When `LoadOnDemand` is set to `false`, all tree nodes are rendered during the initial component 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 in the Blazor TreeView component, but when it is set to false, all the tree nodes are rendered at the initial 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. @@ -1485,9 +1476,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 further enhances performance and reduces data transmission when working with large datasets. +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. In this example, a tree node is being rendered with 25 levels of child nodes. @@ -1719,9 +1710,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 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations diff --git a/blazor/treeview/drag-and-drop.md b/blazor/treeview/drag-and-drop.md index 7b3bc5216c..68fbe58f42 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 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 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 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. | -* 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. +* 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. 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,13 +113,12 @@ N> In the [**OnNodeDragged**](https://help.syncfusion.com/cr/blazor/Syncfusion.B ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyMZsBJDLnhwpw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - ![Drag and Drop Node in Blazor TreeView](./images/blazor-treeview-drag-drop-node.png) -## Multiple-Node Drag and Drop +## Multiple-node drag and drop + +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. -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 @@ -208,12 +207,11 @@ To enable dragging and dropping of multiple nodes, enable both the [`AllowMultiS } ``` -{% 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. @@ -277,13 +275,12 @@ 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 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -493,15 +490,14 @@ The Blazor TreeView component includes built-in drag and drop support, allowing ``` -{% 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 for Individual node +## Restrict drag and drop to individual node -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. +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. -For example, in the following code snippet, dragging is prevented for the "Inbox" TreeView node when its `ID` is "1". +For example, in the following code snippet, the drag and drop is prevented for the **Inbox** TreeView node. ```cshtml @using Syncfusion.Blazor.Navigations @@ -570,7 +566,7 @@ For example, in the following code snippet, dragging is prevented for the "Inbox ``` -## 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 99ea5b0869..6753bdc972 100644 --- a/blazor/treeview/events.md +++ b/blazor/treeview/events.md @@ -15,9 +15,7 @@ N> All the events should be provided in a single **TreeViewEvents** component. ## 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. +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 ```cshtml @using Syncfusion.Blazor.Navigations @@ -82,9 +80,9 @@ The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigati ``` -## DataBound Event +## DataBound -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -149,9 +147,9 @@ The [`DataBound`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Naviga ``` -## DataSourceChanged Event +## DataSourceChanged -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -216,9 +214,9 @@ The [`DataSourceChanged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ``` -## Destroyed Event +## Destroyed -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -283,9 +281,9 @@ The [`Destroyed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Naviga ``` -## NodeChecked Event +## NodeChecked -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). +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -350,9 +348,9 @@ The [`NodeChecked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navi ``` -## NodeChecking Event +## NodeChecking -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -417,7 +415,7 @@ The [`NodeChecking`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Nav ``` -## NodeClicked Event +## NodeClicked 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. @@ -484,9 +482,9 @@ The Blazor TreeView component's [NodeClicked](https://help.syncfusion.com/cr/bla ``` -## NodeCollapsed Event +## NodeCollapsed -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -551,9 +549,10 @@ The [`NodeCollapsed`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Na ``` -## NodeCollapsing Event +## NodeCollapsing + -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -618,9 +617,9 @@ The [`NodeCollapsing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.N ``` -## NodeDropped Event +## NodeDropped -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -685,9 +684,9 @@ The [`NodeDropped`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navi ``` -## NodeEdited Event +## NodeEdited -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -752,9 +751,9 @@ The [`NodeEdited`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navig ``` -## NodeEditing Event +## NodeEditing -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -819,9 +818,9 @@ The [`NodeEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navi ``` -## NodeExpanded Event +## NodeExpanded -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -886,9 +885,9 @@ The [`NodeExpanded`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Nav ``` -## NodeExpanding Event +## NodeExpanding -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -953,9 +952,9 @@ The [`NodeExpanding`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Na ``` -## NodeSelected Event +## NodeSelected -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1020,9 +1019,9 @@ The [`NodeSelected`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Nav ``` -## NodeSelecting Event +## NodeSelecting -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1087,7 +1086,7 @@ The [`NodeSelecting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Na ``` -## OnActionFailure Event +## OnActionFailure 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. @@ -1144,9 +1143,9 @@ The Blazor TreeView component's [OnActionFailure](https://help.syncfusion.com/cr ``` -## OnKeyPress Event +## OnKeyPress -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1211,9 +1210,9 @@ The [`OnKeyPress`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navig ``` -## OnNodeDragged Event +## OnNodeDragged -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1278,9 +1277,9 @@ The [`OnNodeDragged`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Na ``` -## OnNodeDragStart Event +## OnNodeDragStart -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1345,9 +1344,9 @@ The [`OnNodeDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -## OnNodeDragStop Event +## OnNodeDragStop -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). +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1412,7 +1411,7 @@ The [`OnNodeDragStop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.N ``` -## OnNodeRender Event +## OnNodeRender 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 ad6e3dcccb..8de823fc5d 100644 --- a/blazor/treeview/expand-collaspe-actions.md +++ b/blazor/treeview/expand-collaspe-actions.md @@ -9,11 +9,15 @@ documentation: ug # Expand/Collapse Actions in Blazor 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." +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. -## Expand Nodes through Data Binding +If you use the **Expanded** field, you can map it directly in the data source. -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -95,11 +99,10 @@ Specific nodes can be programmatically expanded upon TreeView initialization by } ``` -{% 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. @@ -183,11 +186,10 @@ 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 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -336,18 +338,14 @@ The Blazor TreeView component provides the `ExpandedNodes` property for two-way } ``` -{% 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 @@ -441,17 +439,16 @@ The following examples demonstrate using these methods with buttons to control t } ``` -{% 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 determines the action that triggers node expansion or collapse. Available options include: +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, * **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 @@ -508,9 +505,8 @@ 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. @@ -609,11 +605,10 @@ 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, 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 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 following example, the expanded nodes are collapsed while the **Gospel** node is expanded. @@ -709,7 +704,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. @@ -803,15 +798,13 @@ In the following example, the expand action for the **Discover Music** node is c ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVesNWVfsWLrBOI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Animation on Expand/Collapse Node +## 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 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 [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. -Both expand and collapse APIs offer the following properties: +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. **Duration** - specifies the duration to animate. **Easing** - specifies the animation timing function. @@ -877,4 +870,3 @@ Both expand and collapse APIs offer the following properties: } ``` -{% 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/getting-started-webapp.md b/blazor/treeview/getting-started-webapp.md index 0158d820f9..9bb51951e8 100644 --- a/blazor/treeview/getting-started-webapp.md +++ b/blazor/treeview/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor TreeView in Blazor Web App -This section briefly explains about how to include [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. {% tabcontents %} @@ -19,11 +19,11 @@ This section briefly explains about how to include [Blazor TreeView](https://www * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## Create a New Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +A **Blazor Web App** is created using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +The corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) need to be configured when creating a Blazor Web Application. ![Create Blazor Web App](images/blazor-create-web-app.png) @@ -31,9 +31,9 @@ You need to configure the corresponding [Interactive render mode](https://learn. To add **Blazor TreeView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly or Auto` render modes are utilized in the Blazor Web App need to be install Syncfusion® Blazor component NuGet packages are installed within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -56,7 +56,7 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +A **Blazor Web App** is created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). @@ -74,10 +74,10 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, install Syncfusion® Blazor component NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). To determine the installed version of the SDK, execute the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux): {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -134,7 +134,7 @@ This command creates new Blazor Web App and places it in a new directory called Here's an example of how to add **Blazor Treeview** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, install Syncfusion® Blazor component NuGet packages within the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -169,7 +169,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files (`server` and `client` projects) of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -222,7 +222,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. ## Add Syncfusion® Blazor TreeView component diff --git a/blazor/treeview/getting-started-with-maui-app.md b/blazor/treeview/getting-started-with-maui-app.md index f0e7416236..ee6d2dc46a 100644 --- a/blazor/treeview/getting-started-with-maui-app.md +++ b/blazor/treeview/getting-started-with-maui-app.md @@ -7,9 +7,9 @@ control: TreeView documentation: ug --- -# Getting Started with Blazor TreeView component +# Getting Started with Blazor TreeView Component -This section explains you through the step-by-step process of integrating the Syncfusion® Blazor TreeView component into your Blazor MAUI application using both Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion® Blazor TreeView component into a Blazor MAUI application using both Visual Studio and Visual Studio Code. {% tabcontents %} @@ -21,7 +21,7 @@ To use the MAUI project templates, install the Mobile development with the .NET ## Create a new Blazor MAUI App in Visual Studio -You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +A Blazor MAUI App is created using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Syncfusion® Blazor Navigations and Themes NuGet in the app @@ -48,7 +48,7 @@ To use the MAUI project templates, install the Mobile development with the .NET ## Create a new Blazor MAUI App in Visual Studio Code -You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +A Blazor MAUI App is created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Blazor Navigations and Themes NuGet in the App @@ -123,7 +123,7 @@ namespace MauiBlazorWindow; {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. @@ -137,9 +137,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. -## Add Blazor TreeView component +## Add Blazor TreeView Component Add the Syncfusion® Blazor TreeView component in the **~/Pages/Index.razor** file. @@ -216,7 +216,7 @@ To run the Blazor DataGrid in a Blazor Android MAUI application using the Androi Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. -N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> If any errors are encountered while using the Android Emulator, refer to the following link for troubleshooting guidance: [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). ![Blazor TreeView Component](./images/blazor-treeview.png) diff --git a/blazor/treeview/getting-started-with-server-app.md b/blazor/treeview/getting-started-with-server-app.md index e1dd3f8d8f..d1dde32433 100644 --- a/blazor/treeview/getting-started-with-server-app.md +++ b/blazor/treeview/getting-started-with-server-app.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor TreeView Component in Blazor Server App -This section briefly explains about how to include [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component into a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. -To get start quickly with Blazor TreeView, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeView) sample: +To quickly get started with Blazor TreeView, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeView) sample: {% tabcontents %} @@ -23,11 +23,11 @@ To get start quickly with Blazor TreeView, you can check on this [GitHub](https: ## Create a new Blazor App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio). +A **Blazor Server App** is created using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio). ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor TreeView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor TreeView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -50,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code). +A **Blazor Server App** is created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code). -Alternatively, you can create a server application using the following command in the terminal(Ctrl+`). +Alternatively, a server application is created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -91,7 +91,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). To determine the installed version of the SDK, execute the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux): {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -149,7 +149,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Server App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -170,7 +170,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: @@ -190,9 +190,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. -## Add Blazor TreeView component +## Add Blazor TreeView Component Add the Syncfusion® Blazor TreeView component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. diff --git a/blazor/treeview/getting-started.md b/blazor/treeview/getting-started.md index 3b9407a49d..b50408ad96 100644 --- a/blazor/treeview/getting-started.md +++ b/blazor/treeview/getting-started.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor TreeView Component in Blazor WASM App -This section briefly explains about how to include [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview) component into a Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. To get started quickly with Blazor TreeView, check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeView) sample. @@ -25,11 +25,11 @@ To get started quickly with Blazor TreeView, check on this [GitHub](https://gith ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +A **Blazor WebAssembly App** is created using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App -To add **Blazor TreeView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor TreeView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).Alternatively, the Package Manager Console can be used to install the required NuGet package. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -52,9 +52,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). +A **Blazor WebAssembly App** is created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, a WebAssembly application is created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -70,7 +70,7 @@ cd BlazorApp ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -93,7 +93,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). To determine the installed version of the SDK, execute the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux): {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -116,7 +116,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor Navigations and Themes NuGet in the App @@ -189,7 +189,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. ## Add Blazor TreeView component diff --git a/blazor/treeview/how-to/accordion-tree.md b/blazor/treeview/how-to/accordion-tree.md index 675366aa9b..50d8c3f9c3 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 -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -214,6 +214,4 @@ An accordion is a UI pattern where a list of items allows one item to be expande ``` -{% 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 3d6b63b665..d497100c9e 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 -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. + 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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -190,6 +190,4 @@ Checkboxes in the TreeView can be checked and unchecked by clicking the tree nod } ``` -{% 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 f1bf0b1d9f..12f5c9fd9b 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,17 +1,15 @@ --- layout: post -title: Customize TreeView expand & collapse icons in Blazor | Syncfusion +title: Customize the expand & collapse icons in Blazor TreeView | 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 Expand and Collapse Icons in Blazor TreeView Component +# Customize the expand and collapse icons in Blazor TreeView Component -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -139,13 +137,11 @@ The following example demonstrates how to customize the expand and collapse icon ``` -{% 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 Position and Color +## Customize expand/collapse icon's position and color -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`. +The expand or collapse icon's position and color can also customized using following CSS. ```cshtml @using Syncfusion.Blazor.Navigations @@ -340,13 +336,11 @@ The position and color of the expand or collapse icons are customized using CSS. ``` -{% 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 Padding Between Text, Expand/Collapse Icons, and Custom Icons +## Increase the padding between the text, expand/collapse icon and custom icons -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. +The padding between the text, expand or collapse icon and custom icons can be increased using the following CSS in the above sample. ```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 448a0a7386..4663ebae56 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,11 +7,9 @@ control: TreeView documentation: ug --- -# Customize Tree Nodes Based on Levels in Blazor TreeView Component +# Customize the 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 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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -139,6 +137,4 @@ The following example demonstrates customizing node appearance at various levels ``` -{% 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 811f4c78d5..eccc3df475 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: Retrieve Node Data by ID in Blazor TreeView | Syncfusion +title: Get all child nodes through parentID 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 --- -# Retrieve Node Data by ID in Blazor TreeView Component +# Get all child nodes through parentID in Blazor TreeView Component -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`. +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. ```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 ceae582125..76e649f0a5 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: 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. +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. platform: Blazor control: TreeView documentation: ug --- -# Retrieve Node IconCss Dynamically in Blazor TreeView Component +# Get iconCss dynamically in Blazor TreeView Component -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. +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. ```csharp @@ -98,6 +98,4 @@ bound `IconCss` class dynamically. Using the [`GetTreeData`](https://help.syncfu ``` -{% 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 407267c7ac..ac793bbea7 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 text when renaming TreeView nodes in Blazor | Syncfusion +title: Validate the text when renaming the tree node in TreeView | 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 Text When Renaming Tree Nodes in Blazor TreeView +# Validate the text when renaming the tree node in Blazor TreeView -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. +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. ```cshtml @using Syncfusion.Blazor.Navigations @@ -120,6 +120,4 @@ Node text is validated during the editing process using the [`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/add-remove-node.png b/blazor/treeview/images/add-remove-node.png new file mode 100644 index 0000000000000000000000000000000000000000..04f9cda9ea74d9239223b6e4c9ce3da8586f6fd6 GIT binary patch literal 8681 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 CpRvRM literal 0 HcmV?d00001 diff --git a/blazor/treeview/images/child-nodes.png b/blazor/treeview/images/child-nodes.png new file mode 100644 index 0000000000000000000000000000000000000000..03d331021ee590fcfded1a6d10c7b3dfd5d10ded GIT binary patch literal 16372 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 R22X%RLseU)@aChZ{{yOO&YA!K literal 0 HcmV?d00001 diff --git a/blazor/treeview/images/data-binding.png b/blazor/treeview/images/data-binding.png new file mode 100644 index 0000000000000000000000000000000000000000..342f31cacdc0695de7d182628aa0dfa26bcbcb27 GIT binary patch literal 13847 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 literal 0 HcmV?d00001 diff --git a/blazor/treeview/images/edit-node.png b/blazor/treeview/images/edit-node.png new file mode 100644 index 0000000000000000000000000000000000000000..f0119c0b3d2f190588cd9f5189f891e21454c619 GIT binary patch literal 7555 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 literal 0 HcmV?d00001 diff --git a/blazor/treeview/images/multiselect.png b/blazor/treeview/images/multiselect.png new file mode 100644 index 0000000000000000000000000000000000000000..984d63daf01ed0ce40e293beb3d53670cc4be8af GIT binary patch literal 9484 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 bE^m>90pcOiY{0c8Ads?xI;2d_?A^ZswlKO& literal 0 HcmV?d00001 diff --git a/blazor/treeview/integration.md b/blazor/treeview/integration.md index df265cae1d..bcc7010775 100644 --- a/blazor/treeview/integration.md +++ b/blazor/treeview/integration.md @@ -13,11 +13,10 @@ A Context Menu, Badge, Sidebar, Error boundary components, and Icon library can ## Context Menu in Blazor TreeView Component -The Blazor TreeView component allows integration of a context menu to perform operations such as adding, removing, and renaming nodes. +The Blazor TreeView component integrates seamlessly with a context menu to perform operations such as adding, removing, and renaming nodes. This is demonstrated in an example where the TreeView operations are manipulated in the `ItemSelected` event of the context menu. - ```cshtml @using Syncfusion.Blazor.Navigations @@ -249,12 +248,12 @@ This is demonstrated in an example where the TreeView operations are manipulated } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZheMDMKCfviYktD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Context Menu in Blazor TreeView Component](./images/blazor-treeview-node-with-context-menu.png) -## Badge +## Badge Integration -The Blazor TreeView component can integrate with the Badge component and allows for customizing the node structure using the [`NodeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewTemplates-1.html#Syncfusion_Blazor_Navigations_TreeViewTemplates_1_NodeTemplate) tag, which allows for creating a tree node with any custom structure, such as a web mail folder with a name and unread message count using the Badge component. +The Blazor TreeView component integrates with the Syncfusion Badge component, enabling customization of the node structure. This is achieved using the [`NodeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewTemplates-1.html#Syncfusion_Blazor_Navigations_TreeViewTemplates_1_NodeTemplate) tag, which facilitates the creation of a tree node with any custom structure, such as a web mail folder displaying a name and unread message count using the Badge component. ```cshtml @using Syncfusion.Blazor.Lists @@ -415,10 +414,10 @@ The Blazor TreeView component can integrate with the Badge component and allows ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXreitsqiTbQmSBM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Badge integration in Blazor TreeView](./images/blazor-treeview-badge-integration.png) -## Icons Library +## Icons Library Integration The Blazor TreeView component has the built-in option to customize each node's appearance with Icons by mapping the [**IconCss**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_IconCss) fields. @@ -573,14 +572,12 @@ The Blazor TreeView component has the built-in option to customize each node's a ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBIWZsKWoisIIxY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Icons integration in Blazor TreeView](./images/blazor-treeview-Icon-integration.png) ## Navigation within Sidebar -The Blazor TreeView component's [**NavigateUrl**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_NavigateUrl) field is used to navigate from one page to other pages using TreeView node selection. - -In this example, TreeView's `NavigateUrl` is mapped to move one page to another page inside the Sidebar component. +The Blazor TreeView component's [`NavigateUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldSettings-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldSettings_1_NavigateUrl) field is used for navigation between pages. This example maps `NavigateUrl` to facilitate page transitions when the TreeView is embedded within a Sidebar component. ```cshtml @using Syncfusion.Blazor.Navigations @@ -985,4 +982,5 @@ In the sample provided, the code snippet for the [Error Boundary component](http } } -``` \ No newline at end of file + +``` diff --git a/blazor/treeview/multiple-selection.md b/blazor/treeview/multiple-selection.md index 46e8f00699..4c36338362 100644 --- a/blazor/treeview/multiple-selection.md +++ b/blazor/treeview/multiple-selection.md @@ -9,9 +9,9 @@ documentation: ug # MultiSelection in Blazor TreeView Component -Selection provides an interactive support and highlights the node that is selected. Selection can be done through simple mouse down or keyboard interaction. The TreeView also supports selection of multiple nodes by setting [`AllowMultiSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowMultiSelection) to **true**. To multi-select, 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. +The TreeView component offers interactive selection capabilities, visually highlighting the currently selected node(s). Selection is performed via mouse interaction or keyboard navigation. The TreeView also supports selecting multiple nodes by setting the [`AllowMultiSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowMultiSelection) property to `true`. Users can perform multi-selection by pressing and holding the Ctrl key while clicking desired nodes, or by pressing and holding the Shift key and clicking to select a range of nodes. -In the following example, the `AllowMultiSelection` property is enabled. +The following example demonstrates multi-selection with the `AllowMultiSelection` property enabled. N> Multi selection is not applicable through touch interactions. @@ -109,5 +109,6 @@ N> Multi selection is not applicable through touch interactions. } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthICXWgCerHXKMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![MultiSelection in Blazor TreeView](./images/blazor-treeview-multi-selection.png) \ No newline at end of file +![MultiSelection in Blazor TreeView](./images/multiselect.png) \ No newline at end of file diff --git a/blazor/treeview/navigation.md b/blazor/treeview/navigation.md index a7bdd11706..134f743bfa 100644 --- a/blazor/treeview/navigation.md +++ b/blazor/treeview/navigation.md @@ -79,10 +79,11 @@ In the Blazor TreeView component, use the [**NavigateUrl**](https://help.syncfus } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyWXsKsofaKFFo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Full row navigation in Blazor TreeView Component +## Full Row Navigation in Blazor TreeView Component -The TreeView [FullRowNavigable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_FullRowNavigable) property is used to make the entire TreeView node navigable instead of text element in the Blazor TreeView component. +The [`FullRowNavigable`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_FullRowNavigable) property allows the entire TreeView node area, rather than just the text element, to be clickable and navigable in the Blazor TreeView component. ```cshtml @using Syncfusion.Blazor.Navigations @@ -143,10 +144,11 @@ The TreeView [FullRowNavigable](https://help.syncfusion.com/cr/blazor/Syncfusion } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeMjMgWyoQVXTq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Handle processing on node click in Blazor TreeView Component +## Handle Processing on Node Click in Blazor TreeView Component -In the Blazor TreeView component, when clicking on the TreeView node, you can get the TreeView nodes' id, text, and parent id using the [NodeClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeClicked) event. +When a node in the Blazor TreeView component is clicked, its ID, text, and parent ID are retrieved using 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 @@ -256,9 +258,9 @@ In the Blazor TreeView component, when clicking on the TreeView node, you can ge ``` -## Tree node as hyperlink in Blazor TreeView Component +## Tree Node as Hyperlink in Blazor TreeView Component -The [**NavigateUrl**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_NavigateUrl) property is used to navigate from one page to other pages on tree node selection. Using the CSS styles, you can customize the TreeView node as a hyperlink. +The [**NavigateUrl**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_NavigateUrl) property is used to navigate between pages upon tree node selection. Custom CSS styles are applied to visually customize the TreeView node to appear as a hyperlink. ```cshtml @@ -330,10 +332,11 @@ The [**NavigateUrl**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Na ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVyiDMgMIHAZHOb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## NavigateUrl with Built-in URLs -The functionality of the href attribute in the Blazor TreeView component's [`NavigateUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_NavigateUrl) property has been updated to align with Blazor routing standards. Instead of rendering a traditional anchor tag with an href, the component now uses the [NavigationManager.NavigateTo](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.navigationmanager.navigateto?view=aspnetcore-9.0) method to programmatically navigate to the specified URL. +The functionality of the `href` attribute in the Blazor TreeView component's [`NavigateUrl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_NavigateUrl) property is aligned with Blazor routing standards. Instead of rendering a traditional anchor tag, the component now uses the [NavigationManager.NavigateTo](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.navigationmanager.navigateto?view=aspnetcore-9.0) method to programmatically navigate to the specified URL. However, when using the built-in URLs from the NuGet package (for example, **MicrosoftIdentity/Account/SignOut** from **Microsoft.Identity.Web.UI**), these URLs may not function properly in the application. To resolve this, you need to prevent the default navigation functionality by setting [`args.Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeSelectEventArgs.html#Syncfusion_Blazor_Navigations_NodeSelectEventArgs_Cancel) to **true** and then use the [NavigationManager.NavigateTo](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.navigationmanager.navigateto?view=aspnetcore-9.0) method within the [NodeSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelecting) event, as shown below: @@ -405,3 +408,4 @@ However, when using the built-in URLs from the NuGet package (for example, **Mic } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVyMNiKiecLpEyW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/treeview/node-customization.md b/blazor/treeview/node-customization.md index bf6956c439..13fc50ad10 100644 --- a/blazor/treeview/node-customization.md +++ b/blazor/treeview/node-customization.md @@ -7,11 +7,11 @@ control: TreeView documentation: ug --- -# Node customization in Blazor TreeView Component +# Node Customization in Blazor TreeView Component -The TreeView nodes in the Blazor TreeView component can be customised based on your needs. +The TreeView nodes in the Blazor TreeView component can be customized based on your needs. -In TreeView component, you can customise the appearance of each node with images by mapping the [**ImageUrl**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ImageUrl) field, enable or disable wrapping the text using the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowTextWrap) property, enable or disable the nodes on initial load or dynamically, show or hide the nodes on initial load or dynamically, and enable or customise the tooltip for tree nodes, and more. +The TreeView component offers customization for the appearance of each node. This includes using images by mapping the [**ImageUrl**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_ImageUrl) field, enable or disable wrapping the text using the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowTextWrap) property, enable or disable the nodes on initial load or dynamically, show or hide the nodes on initial load or dynamically, and enable or customize the tooltip for tree nodes, and more. ## Images in Blazor TreeView Component @@ -161,10 +161,11 @@ The Blazor TreeView component has the built-in option to customize each node's a } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVSMDigsIlAHSne?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Wrapping Text in Blazor TreeView Component -The [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowTextWrap) property is used to enable or disable wrapping the text in the TreeView node. When this property is set to true, the TreeView node's text content will wrap to the next line when its text content exceeds the width of the TreeView node. +The [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowTextWrap) property is used to enable or disable text wrapping within TreeView nodes. When set to `true`, text will wrap to the next line if it exceeds the width of the TreeView node. The default value of the `AllowTextWrap` property is false. @@ -225,10 +226,11 @@ The default value of the `AllowTextWrap` property is false. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXByMDMgWSPkEWvC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Enable or Disable individual node on load in Blazor TreeView Component +## Enable or Disable Individual Node on Load in Blazor TreeView Component -In the Blazor TreeView component, you are able to disable individual nodes on initial rendering by passing the particular node id inside the [DisableNodesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_DisableNodesAsync_System_String___) method in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_Created) event. You can enable the disabled node by reverting the changes in the `Created` event. +Individual nodes are disabled on initial rendering by passing their IDs to the [`DisableNodesAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_DisableNodesAsync_System_String___) method within the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_Created) event handler. Disabled nodes can be re-enabled by modifying the logic in the `Created` event or by using `EnableNodesAsync` later. ```cshtml @@ -292,11 +294,11 @@ In the Blazor TreeView component, you are able to disable individual nodes on in } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLyMXsUsyYSAomx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Enable or disable individual node programmatically in Blazor TreeView Component - -In the Blazor TreeView component, you are able to enable or disable individual nodes dynamically by passing the particular node id inside the [EnableNodeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_EnableNodesAsync_System_String___) and [DisableNodesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_DisableNodesAsync_System_String___) methods with a button click. +## Enable or Disable Individual Node Programmatically in Blazor TreeView Component +Individual nodes are enabled or disabled dynamically by passing their IDs to the [`EnableNodesAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_EnableNodesAsync_System_String___) and [`DisableNodesAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_DisableNodesAsync_System_String___) methods, typically triggered by a button click. ```cshtml @using Syncfusion.Blazor.Navigations @@ -368,10 +370,11 @@ In the Blazor TreeView component, you are able to enable or disable individual n } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVIitiKinXtmohD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Show or Hide an individual node on load in Blazor TreeView Component +## Show or Hide an Individual Node on Load in Blazor TreeView Component -In the Blazor TreeView component, you can show or hide particular TreeView nodes on initial rendering by adding or removing them from the data source. +To show or hide particular TreeView nodes on initial rendering, add or remove them from the data source. ```cshtml @using Syncfusion.Blazor.Navigations @@ -439,9 +442,9 @@ In the Blazor TreeView component, you can show or hide particular TreeView nodes } ``` -## Show or Hide an individual node Programmatically in Blazor TreeView Component +## Show or Hide an Individual Node Programmatically in Blazor TreeView Component -In the Blazor TreeView component, you can show or hide particular TreeView nodes dynamically on a button click by adding or removing them from the data source. +Particular TreeView nodes are shown or hidden dynamically on a button click by adding or removing them from the data source, followed by a UI update. ```cshtml @using Syncfusion.Blazor.Navigations @@ -525,7 +528,7 @@ In the Blazor TreeView component, you can show or hide particular TreeView nodes ## Enable Tooltip in Blazor TreeView Component -The TreeView component allows to set tooltip option to tree nodes using the **Tooltip** property. +The TreeView component provides a straightforward way to enable tooltips for tree nodes using the [`Tooltip`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Tooltip) property. ```cshtml @using Syncfusion.Blazor.Navigations @@ -610,10 +613,12 @@ The TreeView component allows to set tooltip option to tree nodes using the **To } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVIsDigMkgFfzRJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![ToolTip in Blazor TreeView](./images/tooltip.png) -## Customize nodes Tooltip in Blazor TreeView Component +## Customize Nodes Tooltip in Blazor TreeView Component -In the Blazor TreeView component, you are unable to customize the native tooltip element. But you can customize using the Blazor Tooltip component inside the TreeView node template and setting the Tooltip [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property. +While native tooltip elements might offer limited customization, the Blazor Tooltip component allows for extensive customization of tooltips. It is integrated within the TreeView node template by setting the Tooltip [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property to apply the tooltip to desired elements. ```cshtml @using Syncfusion.Blazor.Navigations @@ -771,10 +776,12 @@ In the Blazor TreeView component, you are unable to customize the native tooltip ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLyMNMqsOQjSsJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![ToolTip Template in Blazor TreeView](./images/tooltip-template.png) -## Get all nodes in Blazor TreeView Component +## Get all Nodes in Blazor TreeView Component -In the Blazor TreeView component, you can get all TreeView node details 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 following code example demonstrates how to get the TreeView node's text values by clicking the button. +All TreeView node details are retrieved 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 following code example demonstrates how to retrieve and display the `FolderName` (text) values of all TreeView nodes when a button is clicked. ```cshtml @using Syncfusion.Blazor.Navigations diff --git a/blazor/treeview/node-editing.md b/blazor/treeview/node-editing.md index 4015e95397..23ccab0a35 100644 --- a/blazor/treeview/node-editing.md +++ b/blazor/treeview/node-editing.md @@ -9,9 +9,9 @@ documentation: ug # Node Editing in Blazor TreeView Component -The Blazor TreeView allows to edit nodes by setting the [`AllowEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowEditing) property to **true**. To directly edit the nodes in place, **double click** the TreeView node or **select** the node and press **F2** key. +The Blazor TreeView allows node editing by setting the [`AllowEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowEditing) property to `true`. Nodes are directly edited in place by **double-clicking** the TreeView node or by **selecting** the node and pressing the F2 key. -When editing is completed by focus out or by pressing the **Enter** key, the modified node’s text saves automatically. If you do not want to save the modified node’s text in TreeView node, press **Escape** key. It does not save the edited text to the TreeView node. +When editing is completed by focusing out or by pressing the Enter key, the modified node’s text saves automatically. To discard changes, press the Escape key, which prevents saving the edited text to the TreeView node. * Node editing can also be performed programmatically by using the [BeginEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_BeginEditAsync_System_String_) method. On passing the node ID or element through this method, the edit textbox will be created for the particular node thus allowing us to edit it. @@ -124,14 +124,15 @@ When editing is completed by focus out or by pressing the **Enter** key, the mod } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByiDWqMuupOrPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Node Editing in Blazor TreeView](./images/blazor-treeview-node-editing.png) -## CRUD operations +## CRUD Operations The Blazor TreeView component provides dynamic options for adding, removing, and renaming nodes. -To perform CRUD operations on the Blazor TreeView component, you can check on this video. +A video demonstrating CRUD operations on the Blazor TreeView component is available: {% youtube "youtube:https://www.youtube.com/watch?v=b0rTqUIhAhc" %} @@ -376,10 +377,11 @@ The example provided demonstrates how to use the `ItemSelected` event of the con } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyMtMKLDjzDfze?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![CRUD operation using list in Blazor TreeView](./images/blazor-treeview-node-with-context-menu.png) -### Add or remove node programmatically +### Add or Remove Node Programmatically The Blazor TreeView component allows for the dynamic addition or removal of specific nodes by manipulating the data source. This can be achieved by using appropriate methods to update the data source. @@ -581,8 +583,10 @@ The Blazor TreeView component allows for the dynamic addition or removal of spec } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLeWtCULXCrLgvq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Add or Remove node in Blazor TreeView](./images/add-remove-node.png) -### Add or remove node Programmatically with template +### Add or Remove Node Programmatically with Template The Blazor TreeView component with template support also allows for the dynamic addition or removal of specific nodes by manipulating the data source. This can be achieved by using appropriate methods to update the data source. @@ -794,8 +798,10 @@ The Blazor TreeView component with template support also allows for the dynamic ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyWXCUrtVeSfmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Blazor TreeView](./images/template-add-remove-node.png) -### Add node through popup +### Add Node through Popup In the Blazor TreeView component, it is possible to add a new tree node using a Dialog popup window. This can be done by using appropriate methods to add new items to the data source in the popup. @@ -999,8 +1005,9 @@ In the Blazor TreeView component, it is possible to add a new tree node using a } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBoijiALtpvzYks?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Edit a node programmatically +### Edit a Node Programmatically The Blazor TreeView component enables dynamic editing of specific nodes. This can be accomplished by passing the selected node's ID to the [BeginEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_BeginEditAsync_System_String_) method of the TreeView component. @@ -1182,10 +1189,12 @@ The Blazor TreeView component enables dynamic editing of specific nodes. This ca } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoCtCgrNyGxtWK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Edit node in Blazor TreeView](./images/edit-node.png) -### Edit a node with template +### Edit a Node with Template -The Blazor TreeView component with template enables dynamic editing of specific nodes. This can be accomplished by passing the selected node's ID to the [BeginEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_BeginEditAsync_System_String_) method of the TreeView component. +The Blazor TreeView component, when using a `NodeTemplate`, enables dynamic editing of specific nodes. This is accomplished by passing the selected node's ID to the [`BeginEditAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_BeginEditAsync_System_String_) method of the TreeView component. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1375,10 +1384,11 @@ The Blazor TreeView component with template enables dynamic editing of specific ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNryMNCgLXnwolsg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Read-only TreeView +## Read-Only TreeView -The Blazor TreeView component can be set to read-only mode by disabling certain features or handling events that trigger actions, such as disabling the context menu, handling item selected, item expand, and item collapse events, and disabling the editable property of the TreeView component, which will prevent for adding, removing, or editing nodes. +A Blazor TreeView component is set to read-only mode by disabling specific features or handling events that typically trigger actions. This includes disabling the context menu, handling item selection, and managing item expand/collapse events. Disabling the `AllowEditing` property of the TreeView component prevents adding, removing, or editing nodes. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1454,10 +1464,11 @@ The Blazor TreeView component can be set to read-only mode by disabling certain } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheMXWgVjmRLeoY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Restrict Node Editing for Specific Node -In the Blazor TreeView component, it is possible to prevent editing of a specific node by setting the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeEditEventArgs.html#Syncfusion_Blazor_Navigations_NodeEditEventArgs_Cancel) argument to true in the [NodeEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEditing) event. +Node editing for a specific node is prevented by setting the [`Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeEditEventArgs.html#Syncfusion_Blazor_Navigations_NodeEditEventArgs_Cancel) argument to `true` within the [`NodeEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEditing) event. An example of this can be seen in the provided code snippet, where the node editing is prevented for the **Johnson** TreeView node. @@ -1666,10 +1677,11 @@ An example of this can be seen in the provided code snippet, where the node edit } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroiXsUBDlpeMwA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Get index of editing node +## Get Index of Editing Node -In the Blazor TreeView component, you can obtain the index value of the editing node by using the [NodeEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEditing) event. To access the TreeView data, you can use the [GetTreeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method and store it in a variable. Then, you can use a for loop to check if the id of the current data item matches the id of the node being edited. If it does, it is the index of the edited node. +The index value of an editing node is obtained using the [`NodeEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEditing) event. To access the TreeView data, utilize the [`GetTreeData`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method and store it in a variable. Then, iterate through the data to find the matching node ID, which provides the index of the edited node. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1881,7 +1893,7 @@ In the Blazor TreeView component, you can obtain the index value of the editing ``` -## Prevent node editing on node double-click +## Prevent Node Editing on Node Double-Click In the Blazor TreeView component, you have the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_AllowEditing) property, which enables editing a node's text by either double-clicking on the TreeView node or pressing the F2 key. When the `AllowEditing` property is set to true, the TreeView allows for editing a node by either double-clicking on the node or navigating to the node and pressing the F2 key. However, when the property is set to false, the TreeView only allows for reading the node's text. @@ -1948,12 +1960,13 @@ The default value of `AllowEditing` property is false. } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVIMDigVDOtuNue?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Cancel the edit action +## Cancel the Edit Action -In the Blazor TreeView component, it is possible to cancel the edit action by setting the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeEditEventArgs.html#Syncfusion_Blazor_Navigations_NodeEditEventArgs_Cancel) argument to true in the [NodeEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEditing) event. +The edit action is canceled by setting the [`Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeEditEventArgs.html#Syncfusion_Blazor_Navigations_NodeEditEventArgs_Cancel) argument to `true` within the [`NodeEditing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeEditing) event. -An example of this can be seen in the provided code snippet, where the node editing is canceled for all the TreeView nodes. +An example of this can be seen in the provided code snippet, where node editing is canceled for all TreeView nodes. ```cshtml @using Syncfusion.Blazor.Navigations @@ -2155,3 +2168,4 @@ An example of this can be seen in the provided code snippet, where the node edit } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLysZCUVjEueZbk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/treeview/node-selection.md b/blazor/treeview/node-selection.md index 1e8366524f..9f762b7fdf 100644 --- a/blazor/treeview/node-selection.md +++ b/blazor/treeview/node-selection.md @@ -9,13 +9,11 @@ documentation: ug # Node Selection in Blazor TreeView Component -You can select a node in the Blazor TreeView component by clicking on the corresponding nodes. In the TreeView component, the [**Selected**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Selected) field or [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property is used to perform node selection. +Node selection in the Blazor TreeView component occurs by clicking the corresponding nodes. The [**Selected**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Selected) field or [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property is used to perform node selection. -If you use the **Selected** field, you can map it directly in the data source. +When using the `Selected` field, you can directly map it within your data source. The `SelectedNodes` property further offers two-way binding for more dynamic control over selection. -In the TreeView component, the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property provides two-way binding. - -## Select nodes through data binding +## Select Nodes through Data Binding The Blazor TreeView component enables the selection of specific nodes during initialization by utilizing the [**Selected**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Selected) field, where setting it to true for a node in the data source will select the corresponding node in the user interface. @@ -104,12 +102,13 @@ The Blazor TreeView component enables the selection of specific nodes during ini } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthIWNWKhiiVUngi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Select nodes through data binding](./images/blazor-treeview-select-nodes-through-data-binding.png) +![Select nodes through data binding](./images/data-binding.png) -## Select nodes through API +## Select Nodes through API -The Blazor TreeView component provides the capability to select specific nodes during initialization or dynamically through the two-way binding provided by the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property. This property allows for the selection of particular nodes by passing in an array collection of the corresponding node IDs as strings. +The Blazor TreeView component provides the capability to select specific nodes dynamically or during initialization through the two-way bound [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property. To select particular nodes, pass an array of their corresponding string IDs to this property. ```cshtml @using Syncfusion.Blazor.Navigations @@ -194,10 +193,12 @@ The Blazor TreeView component provides the capability to select specific nodes d } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVysDiALMMnYUXd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Select nodes through API](./images/data-binding.png) -## Select all nodes programmatically +## Select all Nodes Programmatically -In the Blazor TreeView component, you can select all the nodes using a button click. Based on the requirement, you can add the needed selected TreeView nodes in an empty List and assign them to the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property. +All nodes in the Blazor TreeView component can be selected using a button click. Based on the requirement, the necessary TreeView node IDs are added to an empty List and assigned to the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property. ### Parent nodes @@ -303,12 +304,13 @@ Here, selected all TreeView parent nodes by clicking a button. If the nodes have } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByCjMABihnMnxr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Parent nodes](./images/blazor-treeview-parent-node-selection.png) -### Child nodes +### Child Nodes -Here, selected all TreeView child nodes by clicking a button. If the nodes do not have child nodes, added those node IDs in the SelectedItems list and assigned that value to the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property. +To select only child nodes in the TreeView, retrieve all nodes and add the IDs of nodes that do not have children (leaf nodes) to a `SelectedItems` list. Then, assign this list to the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property. ```cshtml @using Syncfusion.Blazor.Navigations @@ -410,10 +412,11 @@ Here, selected all TreeView child nodes by clicking a button. If the nodes do no } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLIMjCUrigsqVBH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Child nodes](./images/blazor-treeview-child-node-selection.png) +![Child nodes](./images/child-nodes.png) -## Get selected nodes +## Get Selected Nodes The Blazor TreeView component provides the capability to select specific nodes during initialization or dynamically through the two-way binding provided by the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property. This property allows for the selection of particular nodes by passing in an array collection of the corresponding node IDs as strings. 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 SelectedNodes 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. @@ -567,6 +570,7 @@ The Blazor TreeView component provides the capability to select specific nodes d ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVyCZsALsQJGdJR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Get selected nodes](./images/blazor-treeview-get-selected-nodes.png) @@ -670,12 +674,12 @@ In the Blazor TreeView component, you can select all TreeView nodes on initial r } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVSCtsqhCFWilwv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Select all nodes on load](./images/select-allnode.png) -![Select all nodes on load](./images/blazor-treeview-select-all-nodes-onload.png) - -## Select all nodes programmatically +## Select all Nodes Programmatically -In the Blazor TreeView component, you can select all TreeView nodes using a button click. In this button click, you can add all the TreeView nodes IDs in the TreeData list and assign that to the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property to select all the nodes on the button click operation. +To select all TreeView nodes on initial rendering, utilize the TreeView component's `Created` event. This event fires upon successful component creation. Within this event, add all TreeView node IDs to a `TreeData` list and then assign this list to the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property to select all the nodes on the button click operation. ```cshtml @using Syncfusion.Blazor.Navigations @@ -775,11 +779,12 @@ In the Blazor TreeView component, you can select all TreeView nodes using a butt ``` -![Select all nodes programmatically](./images/blazor-treeview-select-all-nodes-programmatically.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLesjiUBBWsNrVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![Select all nodes programmatically](./images/select-allnode.png) -## Select individual node programmatically +## Select Individual Node Programmatically -In the Blazor TreeView component, you can select particular TreeView nodes using a button click. In this button click, you can select a particular node by passing the corresponding node IDs as strings in the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property. +To select a specific TreeView node programmatically, use a button click or other event to update the [SelectedNodes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_SelectedNodes) property with an array containing the ID of the desired node as a string.. ```cshtml @using Syncfusion.Blazor.Navigations @@ -870,12 +875,13 @@ In the Blazor TreeView component, you can select particular TreeView nodes using } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBoWXiAhhWdEIWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Select individual node programmatically](./images/blazor-treeview-select-individual-node-programmatically.png) -## Retrieve indices of selected nodes +## Retrieve Indices of Selected Nodes -In the Blazor TreeView component, you can show the index value of the selected TreeView nodes in the UI. You can obtain the index of selected items values with the help of the TreeView's [GetTreeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method in the [NodeSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelecting) event. +In the Blazor TreeView component, you can display the index value of selected TreeView nodes in the UI. The index of selected items can be obtained using the TreeView's [GetTreeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetTreeData_System_String_) method in the [NodeSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelecting) event. ```cshtml @using Syncfusion.Blazor.Navigations @@ -1042,10 +1048,11 @@ In the Blazor TreeView component, you can show the index value of the selected T } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLysNiqrLVLrOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Retrieve indices of selected nodes](./images/blazor-treeview-retrieve-indices-of-selected-nodes.png) -## Disable full row selection +## Disable Full Row Selection The Blazor TreeView component offers the [FullRowSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_FullRowSelect) property to control the selection of the entire row of a node by clicking on it. @@ -1135,8 +1142,9 @@ By default, the value of this property is true. When set to false, full-row sele } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhoMXMAVLKNrzCc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Get path of selected node +## Get Path of Selected Node In the Blazor TreeView component, you can get the parent node details when selecting child nodes by passing the selected nodes IDs and parent nodes IDs in the TreeView [GetNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_GetNode_System_String_) method in the [NodeSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelected) event. @@ -1253,7 +1261,7 @@ In the Blazor TreeView component, you can get the parent node details when selec ``` -## Cancel the node selection +## Cancel the Node Selection The Blazor TreeView component offers the ability to cancel the selection action by setting the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeSelectEventArgs.html#Syncfusion_Blazor_Navigations_NodeSelectEventArgs_Cancel) argument value as true within the [NodeSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelecting) event. This will prevent the select action from occurring within the TreeView component. diff --git a/blazor/treeview/searching-and-filtering.md b/blazor/treeview/searching-and-filtering.md index db5c175f3e..bc402acec2 100644 --- a/blazor/treeview/searching-and-filtering.md +++ b/blazor/treeview/searching-and-filtering.md @@ -9,7 +9,7 @@ documentation: ug # Searching and Filtering in Blazor TreeView Component -The Blazor TreeView component allows for searching and filtering of TreeView nodes through an external input TextBox. +The Blazor TreeView component supports filtering its nodes through an external input `TextBox` component. This allows users to dynamically narrow down the displayed nodes based on their input. ```cshtml @using Syncfusion.Blazor.Inputs @@ -299,5 +299,6 @@ The Blazor TreeView component allows for searching and filtering of TreeView nod ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrIsXMKhVJFHvwP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Searching and Filtering in Blazor TreeView Component](./images/blazor-treeview-searching-and-filtering.png) diff --git a/blazor/treeview/sorting.md b/blazor/treeview/sorting.md index 7de7c3938b..5b14c47248 100644 --- a/blazor/treeview/sorting.md +++ b/blazor/treeview/sorting.md @@ -114,4 +114,4 @@ In the following example, the `SortOrder` property is dynamically updated on the } ``` - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVICtCUhBoSVZoy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/treeview/styles.md b/blazor/treeview/styles.md index 2b2031bd88..fdb146e404 100644 --- a/blazor/treeview/styles.md +++ b/blazor/treeview/styles.md @@ -11,7 +11,7 @@ documentation: ug The following content provides the exact CSS structure that can be used to modify the component's appearance based on the user preference. -## Customizing the TreeView nodes +## Customizing the TreeView Nodes Use the following CSS to customize the TreeView nodes. @@ -24,7 +24,7 @@ Use the following CSS to customize the TreeView nodes. } ``` -## Customizing the text of TreeView nodes +## Customizing the text of TreeView Nodes Use the following CSS to customize the text of TreeView nodes. @@ -35,7 +35,7 @@ Use the following CSS to customize the text of TreeView nodes. } ``` -## Customizing the TreeView expand and collapse icons +## Customizing the TreeView Expand and Collapse icons Use the following CSS to customize the TreeView expand and collapse icons. @@ -48,7 +48,7 @@ Use the following CSS to customize the TreeView expand and collapse icons. } ``` -## Customizing the TreeView checkboxes +## Customizing the TreeView Checkboxes Use the following CSS to customize the TreeView checkboxes. @@ -63,7 +63,7 @@ Use the following CSS to customize the TreeView checkboxes. } ``` -## Customizing the TreeView nodes based on levels +## Customizing the TreeView Nodes based on levels Use the following CSS to customize the TreeView nodes based on levels. diff --git a/blazor/treeview/template.md b/blazor/treeview/template.md index e36670c613..b9760caf00 100644 --- a/blazor/treeview/template.md +++ b/blazor/treeview/template.md @@ -11,7 +11,7 @@ documentation: ug The Blazor TreeView component allows to customize the look of TreeView nodes using the `NodeTemplate` property. The [`NodeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewTemplates-1.html#Syncfusion_Blazor_Navigations_TreeViewTemplates_1_NodeTemplate) tag is nested inside the TreeViewTemplates tag, where the custom structure for TreeView can be defined. Inside the NodeTemplate tag, a generic type context property is used to access the tree node details. -To customize Blazor TreeView items easily using a template and the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CssClass) property, you can check on this video. +To customize Blazor TreeView items easily using a template and the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_CssClass) property, refer to this video: {% youtube "youtube:https://www.youtube.com/watch?v=LQlFt9d5E34" %} @@ -163,10 +163,11 @@ In the following sample, employee information such as employee photo, name, and } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrICtCABhRfFWww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor TreeView with Template](./images/blazor-treeview-template.png) -## Apply template to Header +## Apply Template to Header The Blazor TreeView component provides the ability to customize the appearance of its nodes through the use of the [`NodeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewTemplates-1.html#Syncfusion_Blazor_Navigations_TreeViewTemplates_1_NodeTemplate) property. This property is nested within the [`TreeViewTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewTemplates-1.html) tag, which defines the custom structure for the TreeView. However, in this section this template is only applied to parent nodes. @@ -325,5 +326,6 @@ The Blazor TreeView component provides the ability to customize the appearance o ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htheCZiqVVQMJDpI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor TreeView with Header Template](./images/blazor-treeview-template-header.png) diff --git a/blazor/treeview/virtualization.md b/blazor/treeview/virtualization.md index a0f2537ca0..dd87004360 100644 --- a/blazor/treeview/virtualization.md +++ b/blazor/treeview/virtualization.md @@ -9,8 +9,9 @@ documentation: ug # Virtualization in Blazor TreeView Component -The TreeView supports UI Virtualization to improve the performance for a large amount of data. This feature initially gathers all the data, but doesn’t render out the entire data source on initial rendering. It loads the N number of items in the initial rendering and the remaining set number of items will load on each scrolling action in the TreeView container. To setup the Virtualization, define the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_EnableVirtualization) as true and TreeView container height by [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_Height) property. +The Blazor TreeView component supports UI virtualization to enhance performance when handling a large amount of data. This feature optimizes rendering by initially gathering all data but only rendering a subset of it (a specific number of items, N) during the initial load. The remaining items are then loaded dynamically as the user scrolls within the TreeView container. +To enable virtualization, set the [`EnableVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_EnableVirtualization) property to `true` and define a fixed [`Height`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_Height) for the TreeView container. The following sample shows the example of Virtualization. ```cshtml @@ -78,6 +79,7 @@ The following sample shows the example of Virtualization. } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVSCNsUVVQcEAYN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor TreeView with Virtualization](./images/virtualization.gif) From 6b03af1209a8692484b3592701a116052c6cdd46 Mon Sep 17 00:00:00 2001 From: sivakumar Date: Thu, 13 Nov 2025 18:28:17 +0530 Subject: [PATCH 3/8] 991215: Updated the UG document for the TreeView and dashboard layout. --- blazor/treeview/getting-started-webapp.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/treeview/getting-started-webapp.md b/blazor/treeview/getting-started-webapp.md index 9bb51951e8..84ed752b70 100644 --- a/blazor/treeview/getting-started-webapp.md +++ b/blazor/treeview/getting-started-webapp.md @@ -314,6 +314,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file From 7db7930141bee9c5d15c0ad812e4d1350923359c Mon Sep 17 00:00:00 2001 From: sivakumar Date: Thu, 13 Nov 2025 18:29:59 +0530 Subject: [PATCH 4/8] 991215: Updated the UG document for the TreeView and dashboard layout. --- blazor/treeview/getting-started.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/treeview/getting-started.md b/blazor/treeview/getting-started.md index b50408ad96..42349c9bb1 100644 --- a/blazor/treeview/getting-started.md +++ b/blazor/treeview/getting-started.md @@ -262,6 +262,6 @@ Add the Syncfusion® Blazor TreeView compone ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) From 90a844ce8ebf22ddb54d5b8c8d351f620e726841 Mon Sep 17 00:00:00 2001 From: sivakumar Date: Thu, 13 Nov 2025 18:40:10 +0530 Subject: [PATCH 5/8] 991215: Updated the UG document for the TreeView and dashboard layout. --- 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 ++++++----- 7 files changed, 175 insertions(+), 138 deletions(-) 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..17b376e7ae 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 user names 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 From 7984ad201a01f3b4f086612d9b5a13c1ca6fb60a Mon Sep 17 00:00:00 2001 From: sivakumar Date: Thu, 13 Nov 2025 18:42:25 +0530 Subject: [PATCH 6/8] 991215: Updated the UG document for the TreeView and dashboard layout. --- 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 +++++--- 7 files changed, 41 insertions(+), 23 deletions(-) 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 From 06579fd563ead85a1e4570c1cc9e5431419a4647 Mon Sep 17 00:00:00 2001 From: sivakumar Date: Thu, 13 Nov 2025 18:49:11 +0530 Subject: [PATCH 7/8] 991215: Updated the UG document for the TreeView and dashboard layout. --- .../panels/position-sizing-of-panels.md | 96 +++++++++++++++++-- 1 file changed, 87 insertions(+), 9 deletions(-) diff --git a/blazor/dashboard-layout/panels/position-sizing-of-panels.md b/blazor/dashboard-layout/panels/position-sizing-of-panels.md index 979d433ff4..3e4cc1a07a 100644 --- a/blazor/dashboard-layout/panels/position-sizing-of-panels.md +++ b/blazor/dashboard-layout/panels/position-sizing-of-panels.md @@ -1,26 +1,98 @@ --- layout: post -title: Resizing Panels in Blazor Dashboard Layout Component | Syncfusion -description: Checkout and learn here all about resizing panels in Syncfusion Blazor Dashboard Layout component and more. +title: Size and Position in Blazor Dashboard Layout Component | Syncfusion +description: Checkout and learn here all about size and position in Syncfusion Blazor Dashboard Layout component and more. platform: Blazor control: Dashboard Layout documentation: ug --- -# Resizing Panels in Blazor Dashboard Layout Component +# Size and Position of Panels in Blazor Dashboard Layout Component -The Dashboard Layout component provides panel resizing functionality, which can be enabled or disabled using the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowResizing) property. This feature allows users to dynamically adjust panel dimensions through UI interactions using various resizing handlers. +Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation. + +Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation. + +| **Panel Property** | **Default Value** | **Description** | +| --- | --- | --- | +| Id | null | Specifies the ID value of the panel. | +| Row | 0 | Specifies the row value in which the panel to be placed. | +| Column | 0 | Specifies the column value in which the panel to be placed. | +| SizeX | 1 | Specifies the width of the panel in cells count. | +| SizeY | 1 | Specifies the height of the panel in cells count. | +| MinSizeX | 1 | Specifies the minimum width of the panel in cells count. | +| MinSizeY | 1 | Specifies the minimum height of the panel in cells count. | +| MaxSizeX | null | Specifies the maximum width of the panel in cells count. | +| MaxSizeY | null | Specifies the maximum height of the panel in cells count. | +| HeaderTemplate | null | Specifies the header template of the panel. | +| ContentTemplate | null | Specifies the content template of the panel. | +| CssClass | null | Specifies the CSS class name that can be appended with each panel element.| + +## Positioning of Panels + +Panels within the layout can be precisely positioned and ordered using the [`Row`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row) and [`Column`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column) properties of each `DashboardLayoutPanel`. This capability is essential for arranging data in any desired layout or order. ```cshtml @using Syncfusion.Blazor.Layouts - + + + +
1
 + + +
2
 + + +
3
 + + +
4
 + + +
5
 + + +
6
 + + + + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +The following screenshot illustrates panel positioning within the Dashboard Layout, utilizing the `Row` and `Column` properties: + +![Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.png) + +## Sizing of Panels + +A panel's size can be easily adjusted by defining its [`SizeX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX) and [`SizeY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY) properties. + +* `SizeX`: Defines the width of a panel in cells count. +* `SizeY`: Defines the height of a panel in cells count. + +These properties are invaluable when designing dashboards where the content and layout of each panel may vary significantly in size, allowing for flexible and responsive designs. + +```cshtml + +@using Syncfusion.Blazor.Layouts + +
0
 - +
1
 @@ -29,6 +101,12 @@ The Dashboard Layout component provides panel resizing functionality, which can
3
 + +
4
 + + +
5
 + @@ -41,8 +119,8 @@ The Dashboard Layout component provides panel resizing functionality, which can ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVAsBVwTABPvxgH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif) +The following screenshot demonstrates the sizing of panels within the Dashboard Layout, using the `SizeX` and `SizeY` properties: -N> Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by defining the required directions with the [`ResizableHandles`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResizableHandles) property. \ No newline at end of file +![Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.png) \ No newline at end of file From 46451aa4f71658b99e3c24c399a53d0382901821 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Fri, 14 Nov 2025 10:56:37 +0530 Subject: [PATCH 8/8] Updated outdated information in Blazor UG --- blazor/appearance/themes.md | 2 -- blazor/ui-kit/build-your-first-blazor-app-with-blocks.md | 8 ++++---- blazor/visual-studio-integration/overview.md | 4 +--- blazor/visual-studio-integration/template-studio.md | 2 +- 4 files changed, 6 insertions(+), 10 deletions(-) diff --git a/blazor/appearance/themes.md b/blazor/appearance/themes.md index 29340da1fb..8eb2517954 100644 --- a/blazor/appearance/themes.md +++ b/blazor/appearance/themes.md @@ -757,8 +757,6 @@ It is important to note that the Material 3 theme uses CSS variables. To overrid } ``` -N> If you are using **Visual Studio 2019**, please use the `includePath` property instead of `loadPaths` as the latter does not support the Web Compiler for VS 2019. However, we highly recommend using the **Web Compiler 2022+** for **Visual Studio 2022**. For more information, please refer to the [discussion link here](https://github.com/failwyn/WebCompiler/issues/24). - N> If you come across the **'Can't find stylesheet to import'** error, ensure that you have installed the [Syncfusion® Blazor Themes](https://www.npmjs.com/package/@syncfusion/blazor-themes) NPM package in the project's directory rather than the solution's directory. The following shows the importing theme path for the overall theme. diff --git a/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md b/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md index 9b4f11e247..4e58e57d52 100644 --- a/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md +++ b/blazor/ui-kit/build-your-first-blazor-app-with-blocks.md @@ -77,13 +77,13 @@ If the **Tailwind CSS** theme is selected, follow these steps to configure it. - For **light mode**: ```html - + ``` - For **dark mode**: ```html - + ``` 4. **Optional**: To use the font icons prepared for **Tailwind CSS**, include the following CDN link: @@ -127,13 +127,13 @@ If the **Bootstrap 5.3** theme is selected, follow these steps to configure it. - For **light mode**: ```html - + ``` - For **dark mode**: ```html - + ``` 4. **Optional**: To use the font icons prepared for **Bootstrap 5.3**, include the following CDN link: diff --git a/blazor/visual-studio-integration/overview.md b/blazor/visual-studio-integration/overview.md index 82b645d3f2..188cfecab2 100644 --- a/blazor/visual-studio-integration/overview.md +++ b/blazor/visual-studio-integration/overview.md @@ -9,12 +9,10 @@ documentation: ug # Overview of Blazor extension for Visual Studio -The Syncfusion® Blazor extension for Visual Studio streamlines working with Syncfusion® Blazor components by configuring the required Syncfusion® NuGet packages and themes. Separate extensions are available for Visual Studio 2022 and Visual Studio 2019. +The Syncfusion® Blazor extension for Visual Studio streamlines working with Syncfusion® Blazor components by configuring the required Syncfusion® NuGet packages and themes. Separate extensions are available for Visual Studio 2022. [Download the Visual Studio 2022 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.BlazorVSExtension) -[Download the Visual Studio 2019 extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension) - The Syncfusion® Blazor extension provides the following add-ins in Visual Studio: [Project template](template-studio): Creates Syncfusion® Blazor applications with required configuration for development with Syncfusion®Visual Blazor component. diff --git a/blazor/visual-studio-integration/template-studio.md b/blazor/visual-studio-integration/template-studio.md index 9d2016e64c..a05fa0d82b 100644 --- a/blazor/visual-studio-integration/template-studio.md +++ b/blazor/visual-studio-integration/template-studio.md @@ -13,7 +13,7 @@ Syncfusion® provides the Blazor Template St The steps below will assist you to create your **Syncfusion Blazor Application** through **Visual Studio 2022**: -> **Note:** The Syncfusion® Blazor extensions for Visual Studio 2019 are available only for Essential Studio® versions 20.3.0.56 and earlier. +> **Note:** The Syncfusion® Blazor extensions for Visual Studio 2022 are available only for Essential Studio® versions 20.3.0.56 and earlier. N> Before use the Syncfusion® Blazor Project Template, check whether the Syncfusion® Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If it is not installed, follow the steps in the [download and installation](https://blazor.syncfusion.com/documentation/visual-studio-integration/download-and-installation) topic.