Implementing Dashboard Layout with Syncfusion Blazor

When to Use This Skill

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

@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

<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>

<SfDashboardLayout CellSpacing="@(new double[]{10, 10})" 
    Columns="6" 
    AllowDragging="true" 
    AllowResizing="true">
    <!-- Panel definitions -->
</SfDashboardLayout>

<SfDashboardLayout CellSpacing="@(new double[]{10, 10})" 
    Columns="5" 
    MediaQuery="max-width:600px">
    <!-- Automatically stacks to single column below 600px -->
</SfDashboardLayout>

<SfDashboardLayout ID="dashboard" EnablePersistence="true" CellSpacing="@(new double[]{10, 10})">
    <!-- Automatically saves to localStorage on changes -->
</SfDashboardLayout>

Key Properties Reference

Use Case Examples