Implementing Dashboard Layout

When to Use This Skill

• Create grid-based dashboards with a flexible panel structure
• Enable drag-and-drop functionality to allow users to reorder panels
• Implement responsive layouts that adapt to different screen sizes
• Add resizable panels with min/max size constraints
• Enable floating panels to automatically fill empty grid cells
• Manage panel state and maintain layout persistence across sessions
• Handle dynamic panel operations (add, remove, move, update panels)
• Customize panel headers and content with HTML or templates
• Support RTL layouts for right-to-left language support

Component Overview

1. Main Container - The grid-based layout that holds panels
2. Panels - Individual grid cells that contain content
3. Grid System - Configurable columns and cell spacing
4. Interaction Features - Dragging, resizing, and dynamic operations
5. State Management - Persistence and serialization capabilities

Documentation and Navigation Guide

Getting Started

• Installation and NuGet package setup
• ASP.NET Core project configuration
• TagHelper registration and setup
• Resource references (styles and scripts)
• Basic Dashboard Layout initialization
• Two initialization methods (content template vs tag helper)

Core Configuration

• Grid system setup with columns property
• Cell spacing and aspect ratio configuration
• Panel positioning using row and column properties
• Layout structure and grid cell management
• Complete working examples with code

Panel Management

• Adding panels dynamically with addPanel method
• Removing panels and clearing layout (removePanel, removeAll)
• Moving panels to different positions (movePanel)
• Updating existing panels (updatePanel)
• Resizing panels with sizeX, sizeY properties
• Applying min/max size constraints to panels

Interaction Features

• Enabling drag-and-drop with allowDragging property
• Understanding drag event lifecycle (dragStart, drag, dragStop)
• Customizing drag handlers with draggableHandle selector
• Panel collision detection and adaptive repositioning
• Handling drag events with proper event binding

Panel Resizing

• Enabling resize functionality with allowResizing property
• Configuring resizable handles with resizableHandles property
• Understanding resize event lifecycle (resizeStart, resize, resizeStop)
• Setting minimum and maximum panel size constraints
• Handling resize events in your application

Responsive Behavior

• Implementing floating panels with allowFloating property
• Configuring responsive breakpoints with mediaQuery
• Automatic panel stacking for mobile devices
• RTL support with enableRtl property
• Adapting layouts to different screen resolutions

State & Persistence

• Enabling state persistence with enablePersistence property
• Serializing dashboard configuration (serialize method)
• Component lifecycle events (created, destroyed)
• Managing state across page reloads
• HTML sanitization for security

Complete API Reference

• All Dashboard Layout properties with descriptions and defaults
• Complete method signatures and usage examples
• Event definitions and event argument types
• Panel model properties and constraints
• Cross-references to detailed feature documentation

Quick Start Example

@{
    var cellSpacing = new double[] { 10, 10 };
}

<ejs-dashboardlayout id="dashboard" allowDragging="true" allowResizing="true" 
                      allowFloating="true" columns="6" cellSpacing="@cellSpacing">
    <e-dashboardlayout-panels>
        <e-dashboardlayout-panel id="panel1" sizeX="3" sizeY="2" row="0" col="0" 
                                 header="<div>Sales Report</div>" 
                                 content="<div class='content'>Sales data content goes here</div>">
        </e-dashboardlayout-panel>
        <e-dashboardlayout-panel id="panel2" sizeX="3" sizeY="2" row="0" col="3" 
                                 header="<div>Revenue Chart</div>" 
                                 content="<div class='content'>Revenue chart content goes here</div>">
        </e-dashboardlayout-panel>
    </e-dashboardlayout-panels>
</ejs-dashboardlayout>

Common Patterns

Pattern 1: Enable All Interactions

<ejs-dashboardlayout id="dashboard" allowDragging="true" allowResizing="true" 
                      allowFloating="true" columns="4">
    <e-dashboardlayout-panels>
        <e-dashboardlayout-panel id="panel1" sizeX="2" sizeY="1" row="0" col="0" 
                                 header="<div>Panel 1</div>" 
                                 content="<div class='content'>Content</div>">
        </e-dashboardlayout-panel>
    </e-dashboardlayout-panels>
</ejs-dashboardlayout>

Pattern 2: Responsive Breakpoint

<ejs-dashboardlayout id="responsive-dashboard" mediaQuery="(max-width: 768px)" 
                      columns="6" allowFloating="true">
    <e-dashboardlayout-panels>
        <e-dashboardlayout-panel id="panel1" sizeX="3" sizeY="2" row="0" col="0" 
                                 content="<div>Panel 1</div>">
        </e-dashboardlayout-panel>
        <e-dashboardlayout-panel id="panel2" sizeX="3" sizeY="2" row="0" col="3" 
                                 content="<div>Panel 2</div>">
        </e-dashboardlayout-panel>
    </e-dashboardlayout-panels>
</ejs-dashboardlayout>

Pattern 3: Dynamic Panel Operations

Pattern 4: Persist User Layout

Key Properties Overview

columns

cellSpacing

allowDragging

allowResizing

allowFloating

draggableHandle

resizableHandles

mediaQuery

enablePersistence

enableRtl

showGridLines

Common Use Cases

1. Analytics Dashboard - Arrange chart panels with resize and drag capabilities
2. Sales Dashboard - Monitor KPIs with resizable metric panels
3. Project Management - Organize task boards with dynamic panel operations
4. Business Intelligence - Display reports with state persistence
5. Admin Portal - Customizable dashboard with user-defined layout