syncfusion-blazor-dashboard-layout

What this skill does

# 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">
    <!-- Auto