syncfusion-blazor-dashboard-layout

# Implementing Dashboard Layout with Syncfusion Blazor The Syncfusion Blazor Dashboard Layout component provides a comprehensive solution for building responsive, interactive dashboards. This skill guides you through creating flexible panel-based layouts with advanced features including drag-and-drop, resizing, state persistence, and adaptive responsive design. ## When to Use This Skill Use this skill when you need to: - Create dashboard or grid-based panel layouts - Enable users to rearrange panels through drag-and-drop - Allow panel resizing with size constraints - Build responsive layouts that adapt to different screen sizes - Save and restore user layout configurations - Create complex multi-panel displays with headers and dynamic content - Customize panel styling and appearance - Prevent panel overlapping in dynamic scenarios ## Component Overview **SfDashboardLayout** creates a grid-based dashboard where panels represent resizable, draggable containers organized on a configurable grid. Key capabilities: - **Grid-based positioning** using Row and Column properties - **Flexible sizing** with width (SizeX) and height (SizeY) in cell units - **Size constraints** with MinSizeX, MaxSizeX, MinSizeY, MaxSizeY properties - **Drag-and-drop** with automatic collision handling and panel pushing - **Resizing** with customizable resize handles in multiple directions - **Floating panels** that automatically move up to fill empty spaces - **State persistence** to localStorage with programmatic save/load/reset - **Templates** for headers and dynamic content - **Responsive design** with media query breakpoints for mobile adaptation - **Cell-based grid** with configurable columns, cell aspect ratio, and spacing ## Documentation and Navigation Guide **Getting Started** 📄 [references/getting-started.md](references/getting-started.md) - Setting up Dashboard Layout in WebAssembly and Server apps - NuGet package installation (Syncfusion.Blazor.Layouts, Syncfusion.Blazor.Themes) - Configuring namespaces and Syncfusion services - Adding stylesheet and script resources - Creating first dashboard with basic panels **Core Layout Configuration** 📄 [references/panel-positioning-sizing.md](references/panel-positioning-sizing.md) - Panel Row and Column positioning - Setting panel dimensions with SizeX and SizeY - Min/Max size constraints (MinSizeX, MaxSizeX, MinSizeY, MaxSizeY) - Panel ID management and unique identification - Understanding cell-based grid system **Interactive Features** 📄 [references/drag-drop-functionality.md](references/drag-drop-functionality.md) - Enabling drag-and-drop rearrangement - Automatic collision detection and panel pushing - Customizing drag handles with DraggableHandle property - Using CSS selectors for drag-handle targeting - Placeholder visualization during drag operations 📄 [references/resizing-floating-panels.md](references/resizing-floating-panels.md) - Enabling panel resizing with AllowResizing property - Customizing resize directions with ResizableHandles property - Floating panels with AllowFloating to utilize empty space - Floating behavior and automatic upward panel movement **Grid Configuration & Styling** 📄 [references/grid-configuration-styling.md](references/grid-configuration-styling.md) - Configuring grid with Columns property - Cell aspect ratio with CellAspectRatio property - Cell spacing with CellSpacing property (row and column gaps) - Visualizing grid with ShowGridLines property - CSS customization of panel headers, content, and backgrounds - CSS classes: .e-panel-header, .e-panel-content, .e-resize **Responsive & Adaptive Design** 📄 [references/responsive-adaptive-design.md](references/responsive-adaptive-design.md) - Built-in responsive support for different screen sizes - MediaQuery property for custom breakpoints - Automatic stacking layout at low resolutions (default 600px) - Mobile-friendly configurations - Responsive behavior without manual configuration **Panel Templates & Headers** 📄 [references/panel-templates-headers.md](references/panel-templates-headers.md) - HeaderTemplate for panel titles and headers - ContentTemplate for panel main content - CssClass property for custom styling - Rendering HTML and components within panels - Empty space rendering prevention **State Management & Persistence** 📄 [references/state-persistence.md](references/state-persistence.md) - Enabling persistence with EnablePersistence property - localStorage integration for automatic save/restore - GetPersistDataAsync for retrieving current state as string - SetPersistDataAsync for restoring saved state - ResetPersistDataAsync for clearing saved state - Component ID requirement for persistence **API Reference** 📄 [references/api-reference.md](references/api-reference.md) - Complete SfDashboardLayout component API documentation - All 14 properties with types, defaults, and accepted values - All 11 methods with parameters, return types, and descriptions - All 8 events with argument types and usage examples - DashboardLayoutPanel component properties (17 total) - PanelModel class properties for programmatic panel data - Event argument classes with complete examples - ResizableHandle enumeration with all 8 direction values - Working code examples for every property and method - Cross-references to related documentation **Advanced Scenarios & Troubleshooting** 📄 [references/advanced-scenarios.md](references/advanced-scenarios.md) - Preventing panel overlap with unique IDs in dynamic rendering - All panels at same position configuration - Performance optimization for complex layouts - Complex multi-panel display patterns - Troubleshooting common issues and edge cases ## Quick Start Example ```csharp @using Syncfusion.Blazor.Layouts <SfDashboardLayout CellSpacing="@(new double[]{10, 10})" Columns="5"> <DashboardLayoutPanels> <DashboardLayoutPanel> <HeaderTemplate><div>Panel 1</div></HeaderTemplate> <ContentTemplate><div>Your content here</div></ContentTemplate> </DashboardLayoutPanel> <DashboardLayoutPanel SizeX=2 SizeY=2 Column=1> <HeaderTemplate><div>Panel 2</div></HeaderTemplate> <ContentTemplate><div>Your content here</div></ContentTemplate> </DashboardLayoutPanel> <DashboardLayoutPanel SizeY=2 Column=3> <HeaderTemplate><div>Panel 3</div></HeaderTemplate> <ContentTemplate><div>Your content here</div></ContentTemplate> </DashboardLayoutPanel> </DashboardLayoutPanels> </SfDashboardLayout> <style> .e-panel-header { background-color: rgba(0, 0, 0, .1); text-align: center; } .e-panel-content { text-align: center; margin-top: 10px; } </style> ``` ## Common Patterns **Basic 3-Panel Dashboard** ```csharp <SfDashboardLayout CellSpacing="@(new double[]{10, 10})" Columns="6"> <DashboardLayoutPanels> <DashboardLayoutPanel SizeX=2> <HeaderTemplate><div>Metrics</div></HeaderTemplate> <ContentTemplate><div>250,000</div></ContentTemplate> </DashboardLayoutPanel> <DashboardLayoutPanel SizeX=2 Column=2> <HeaderTemplate><div>Users</div></HeaderTemplate> <ContentTemplate><div>45,200</div></ContentTemplate> </DashboardLayoutPanel> <DashboardLayoutPanel SizeX=2 Column=4> <HeaderTemplate><div>Revenue</div></HeaderTemplate> <ContentTemplate><div>$125,000</div></ContentTemplate> </DashboardLayoutPanel> </DashboardLayoutPanels> </SfDashboardLayout> ``` **With Drag-Drop and Resizing** ```csharp <SfDashboardLayout CellSpacing="@(new double[]{10, 10})" Columns="6" AllowDragging="true" AllowResizing="true"> <!-- Panel definitions --> </SfDashboardLayout> ``` **Responsive Mobile Layout** ```csharp <SfDashboardLayout CellSpacing="@(new double[]{10, 10})" Columns="5" MediaQuery="max-width:600px"> <!-- Automatically stacks to single column below 600px --> </SfDashboardLayout> ``` **State Persistence Pattern** ```csharp <SfDashboardLayout ID="dashboard" EnablePersistence="true" CellSpacing="@(new double[]{10, 10})"> <!-- Automatically saves to localStorage on changes --> </SfDashboardLayout> ``` ## Key Properties Reference | Property | Purpose | Common Values | |----------|---------|----------------| | **Columns** | Number of grid cells per row | 4, 5, 6, 12 | | **Row** | Panel vertical position (0-based) | 0, 1, 2, ... | | **Column** | Panel horizontal position (0-based) | 0, 1, 2, ... | | **SizeX** | Panel width in cells | 1, 2, 3, ... | | **SizeY** | Panel height in cells | 1, 2, 3, ... | | **MinSizeX/MinSizeY** | Minimum size constraints | 1, 2, ... | | **MaxSizeX/MaxSizeY** | Maximum size constraints | null (unlimited) or specific value | | **CellSpacing** | Gap between panels (row, column) | [10, 10], [20, 20] | | **CellAspectRatio** | Height-to-width ratio | 1, 2, 0.5 | | **AllowDragging** | Enable panel rearrangement | true, false | | **AllowResizing** | Enable panel resizing | true, false | | **AllowFloating** | Auto-fill empty spaces | true, false | | **DraggableHandle** | CSS selector for drag area | ".e-panel-header" | | **ResizableHandles** | Resize directions | "e" (east), "south-east", etc. | | **MediaQuery** | Mobile breakpoint | "max-width:600px" | | **EnablePersistence** | Save state to localStorage | true, false | | **ID** | Unique component ID (required for persistence) | "dashboard", "layout1" | ## Use Case Examples **Data Analytics Dashboard** Use dashboard grid with Charts, Grids, and metrics panels. Enable resizing so users can focus on important metrics. **Admin Control Panel** Combine multiple Syncfusion components (grids, charts, forms) in panels. Persist layout so admin preferences are remembered. **SEO Monitoring Dashboard** Display analytics metrics and charts using dashboard grid. Use floating panels to automatically optimize space as panels are moved. **Personal Workspace** Let users customize their layout completely with drag-drop, resizing, and persistence to create their ideal workspace. **Responsive Mobile Dashboard** Design for desktop, automatically adapts to single-column stacked layout on mobile using MediaQuery breakpoints.