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..e4619b932b 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) diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index f6e3e688ed..9015dfb08d 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,18 +442,18 @@ 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) diff --git a/blazor/dashboard-layout/getting-started.md b/blazor/dashboard-layout/getting-started.md index 8bbbb49777..71be7e7e68 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,9 +384,9 @@ 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) 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..6c7868e6c1 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,7 +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 {