syncfusion-aspnetcore-dashboard-layout

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Dashboard Layout

实现Dashboard Layout布局

The Syncfusion Dashboard Layout control is a powerful grid-based layout system that allows developers to create interactive dashboards with flexible panel management capabilities. Panels can be arranged in a customizable grid, resized, dragged, reordered, and dynamically added or removed to meet dynamic dashboard requirements.

Syncfusion Dashboard Layout控件是一个功能强大的基于网格的布局系统，允许开发人员创建具备灵活面板管理能力的交互式仪表板。面板可在自定义网格中排列、调整大小、拖拽、重新排序，还能动态添加或移除，以满足动态仪表板的需求。

When to Use This Skill

何时使用该组件

Use the Dashboard Layout control when you need to:

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

在以下场景中使用Dashboard Layout控件：

创建基于网格的仪表板，具备灵活的面板结构
启用拖拽功能，允许用户重新排序面板
实现响应式布局，适配不同屏幕尺寸
添加可调整大小的面板，支持最小/最大尺寸限制
启用浮动面板，自动填充网格空白单元格
管理面板状态，在会话间保持布局持久化
处理动态面板操作（添加、移除、移动、更新面板）
自定义面板标题和内容，支持HTML或模板
支持RTL布局，适配从右到左的语言

Component Overview

组件概述

The Dashboard Layout consists of:

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

Dashboard Layout由以下部分组成：

主容器 - 承载面板的基于网格的布局
面板 - 包含内容的独立网格单元格
网格系统 - 可配置的列和单元格间距
交互功能 - 拖拽、调整大小和动态操作
状态管理 - 持久化和序列化能力

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

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)

📄 阅读： references/getting-started.md

安装与NuGet包设置
ASP.NET Core项目配置
TagHelper注册与设置
资源引用（样式与脚本）
Dashboard Layout基础初始化
两种初始化方式（内容模板vs标签助手）

Core Configuration

核心配置

📄 Read: references/configuring-layouts.md

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

📄 阅读： references/configuring-layouts.md

使用columns属性设置网格系统
单元格间距与宽高比配置
使用row和column属性定位面板
布局结构与网格单元格管理
完整的可运行代码示例

Panel Management

面板管理

📄 Read: references/panel-operations.md

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

📄 阅读： references/panel-operations.md

使用addPanel方法动态添加面板
移除面板与清空布局（removePanel、removeAll）
将面板移动到不同位置（movePanel）
更新现有面板（updatePanel）
使用sizeX、sizeY属性调整面板大小
为面板应用最小/最大尺寸限制

Interaction Features

交互功能

📄 Read: references/dragging-and-dropping.md

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

📄 阅读： references/dragging-and-dropping.md

使用allowDragging属性启用拖拽功能
了解拖拽事件生命周期（dragStart、drag、dragStop）
使用draggableHandle选择器自定义拖拽句柄
面板碰撞检测与自适应重定位
通过正确的事件绑定处理拖拽事件

Panel Resizing

面板调整大小

📄 Read: references/resizing-panels.md

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

📄 阅读： references/resizing-panels.md

使用allowResizing属性启用调整大小功能
使用resizableHandles属性配置可调整大小的句柄方向
了解调整大小事件生命周期（resizeStart、resize、resizeStop）
设置面板的最小和最大尺寸限制
在应用中处理调整大小事件

Responsive Behavior

响应式行为

📄 Read: references/responsive-layouts.md

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

📄 阅读： references/responsive-layouts.md

使用allowFloating属性启用浮动面板
使用mediaQuery配置响应式断点
为移动设备自动堆叠面板
使用enableRtl属性支持RTL布局
使布局适配不同屏幕分辨率

State & Persistence

状态与持久化

📄 Read: references/state-and-persistence.md

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

📄 阅读： references/state-and-persistence.md

使用enablePersistence属性启用状态持久化
序列化仪表板配置（serialize方法）
组件生命周期事件（created、destroyed）
在页面重载间管理状态
用于安全的HTML清理

Complete API Reference

完整API参考

📄 Read: references/api-reference.md

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

📄 阅读： references/api-reference.md

所有Dashboard Layout属性的描述与默认值
完整的方法签名与使用示例
事件定义与事件参数类型
面板模型属性与约束
指向详细功能文档的交叉引用

Quick Start Example

快速入门示例

Here's a minimal example of creating a Dashboard Layout with two panels using proper camelCase API properties:

html

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

以下是使用正确的驼峰式API属性创建包含两个面板的Dashboard Layout的最简示例：

html

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

模式1：启用所有交互

Enable dragging, resizing, and floating for maximum interactivity:

html

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

启用拖拽、调整大小和浮动功能，实现最高程度的交互性：

html

<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

模式2：响应式断点

Configure layout to stack panels on mobile devices:

html

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

配置布局，在移动设备上堆叠面板：

html

<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

模式3：动态面板操作

Add panels programmatically based on user actions - covered in Panel Management reference.

根据用户操作以编程方式添加面板 - 详见面板管理参考文档。

Pattern 4: Persist User Layout

模式4：持久化用户布局

Save and restore dashboard configuration across sessions - covered in State & Persistence reference.

在会话间保存和恢复仪表板配置 - 详见状态与持久化参考文档。

Key Properties Overview

关键属性概述

Property	Type	Purpose	Default
`columns`	number	Number of grid columns	1
`cellSpacing`	number[]	Spacing between panels [horizontal, vertical]	[5, 5]
`allowDragging`	boolean	Enable drag-and-drop	true
`allowResizing`	boolean	Enable panel resizing	false
`allowFloating`	boolean	Auto-fill empty cells	true
`draggableHandle`	string	CSS selector for drag handle	null
`resizableHandles`	string[]	Resize handle directions	['e-south-east']
`mediaQuery`	string	Responsive breakpoint	'max-width:600px'
`enablePersistence`	boolean	Save state to storage	false
`enableRtl`	boolean	Right-to-left layout	false
`showGridLines`	boolean	Visualize grid structure	false

属性	类型	用途	默认值
`columns`	number	网格列数	1
`cellSpacing`	number[]	面板间距 [水平, 垂直]	[5, 5]
`allowDragging`	boolean	启用拖拽	true
`allowResizing`	boolean	启面板调整大小	false
`allowFloating`	boolean	自动填充空白单元格	true
`draggableHandle`	string	拖拽句柄的CSS选择器	null
`resizableHandles`	string[]	调整大小句柄的方向	['e-south-east']
`mediaQuery`	string	响应式断点	'max-width:600px'
`enablePersistence`	boolean	将状态保存到存储	false
`enableRtl`	boolean	从右到左布局	false
`showGridLines`	boolean	可视化网格结构	false

Common Use Cases

常见使用场景

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

Next Steps: Start with the Getting Started reference to set up your Dashboard Layout project, then explore the specific features you need.

分析仪表板 - 排列具备调整大小和拖拽能力的图表面板
销售仪表板 - 通过可调整大小的指标面板监控关键绩效指标（KPI）
项目管理 - 以动态面板操作组织任务看板
商业智能 - 显示具备状态持久化的报表
管理门户 - 支持用户自定义布局的可定制仪表板

下一步： 从快速入门参考文档开始设置你的Dashboard Layout项目，然后探索你需要的特定功能。