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/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 0000000000..9c804453ac Binary files /dev/null and b/blazor/dashboard-layout/images/panel-overlap.png differ diff --git a/blazor/dashboard-layout/images/presistence-sample.png b/blazor/dashboard-layout/images/presistence-sample.png new file mode 100644 index 0000000000..64c66142b4 Binary files /dev/null and b/blazor/dashboard-layout/images/presistence-sample.png differ 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..3e4cc1a07a 100644 --- a/blazor/dashboard-layout/panels/position-sizing-of-panels.md +++ b/blazor/dashboard-layout/panels/position-sizing-of-panels.md @@ -7,13 +7,13 @@ control: Dashboard Layout documentation: ug --- -# Size and Position in Blazor Dashboard Layout Component +# Size and Position of 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. +Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation. -The following table represents all the available panel properties and the corresponding functionalities: +Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation. -| **PanelObject** | **Default Value** | **Description** | +| **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. | @@ -28,9 +28,9 @@ The following table represents all the available panel properties and the corres | 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 +## 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. +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 @@ -70,18 +70,18 @@ The panels within the layout can be easily positioned or ordered using the [`Row {% 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. +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 +## 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. +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` property defines the width of a panel in cells count. -* `SizeY` property defines the height of a panel in cells count. +* `SizeX`: Defines the width of a panel in cells count. +* `SizeY`: 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. +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 @@ -121,6 +121,6 @@ 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" %} -The following screenshot shows the sizing of panels within the Dashboard Layout using the SizeX and SizeY properties of the panels. +The following screenshot demonstrates the sizing of panels within the Dashboard Layout, using the `SizeX` and `SizeY` properties: ![Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.png) \ 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..84ed752b70 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 6b7ea83e58..42349c9bb1 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 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/add-remove-node.png b/blazor/treeview/images/add-remove-node.png new file mode 100644 index 0000000000..04f9cda9ea Binary files /dev/null and b/blazor/treeview/images/add-remove-node.png differ diff --git a/blazor/treeview/images/check-uncheck.png b/blazor/treeview/images/check-uncheck.png new file mode 100644 index 0000000000..c3fa47be89 Binary files /dev/null and b/blazor/treeview/images/check-uncheck.png differ diff --git a/blazor/treeview/images/checkednodes.png b/blazor/treeview/images/checkednodes.png new file mode 100644 index 0000000000..835b683b51 Binary files /dev/null and b/blazor/treeview/images/checkednodes.png differ diff --git a/blazor/treeview/images/child-nodes.png b/blazor/treeview/images/child-nodes.png new file mode 100644 index 0000000000..03d331021e Binary files /dev/null and b/blazor/treeview/images/child-nodes.png differ diff --git a/blazor/treeview/images/data-binding.png b/blazor/treeview/images/data-binding.png new file mode 100644 index 0000000000..342f31cacd Binary files /dev/null and b/blazor/treeview/images/data-binding.png differ diff --git a/blazor/treeview/images/edit-node.png b/blazor/treeview/images/edit-node.png new file mode 100644 index 0000000000..f0119c0b3d Binary files /dev/null and b/blazor/treeview/images/edit-node.png differ diff --git a/blazor/treeview/images/multiselect.png b/blazor/treeview/images/multiselect.png new file mode 100644 index 0000000000..984d63daf0 Binary files /dev/null and b/blazor/treeview/images/multiselect.png differ diff --git a/blazor/treeview/images/select-allnode.png b/blazor/treeview/images/select-allnode.png new file mode 100644 index 0000000000..8b742e647c Binary files /dev/null and b/blazor/treeview/images/select-allnode.png differ diff --git a/blazor/treeview/images/template-add-remove-node.png b/blazor/treeview/images/template-add-remove-node.png new file mode 100644 index 0000000000..13002d61aa Binary files /dev/null and b/blazor/treeview/images/template-add-remove-node.png differ diff --git a/blazor/treeview/images/tooltip-template.png b/blazor/treeview/images/tooltip-template.png new file mode 100644 index 0000000000..d47dbd7a82 Binary files /dev/null and b/blazor/treeview/images/tooltip-template.png differ diff --git a/blazor/treeview/images/tooltip.png b/blazor/treeview/images/tooltip.png new file mode 100644 index 0000000000..1787b6d9f1 Binary files /dev/null and b/blazor/treeview/images/tooltip.png differ 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) 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.