syncfusion-angular-dashboard-layout

What this skill does

# Implementing Syncfusion Angular Dashboard Layout

The **Dashboard Layout** component is a powerful grid-structured layout control that helps you create responsive, interactive dashboards with dynamic panels. Panels can be dragged, resized, added, removed, and their state can be persisted. This skill guides you through all aspects of implementing, configuring, and customizing dashboard layouts in Angular.

## When to Use This Skill

- Creating customizable dashboard layouts with multiple panels
- Implementing drag-and-drop panel repositioning
- Enabling panel resizing in multiple directions
- Dynamically adding or removing dashboard panels
- Making dashboards responsive across device sizes
- Saving and restoring dashboard layout configurations
- Styling dashboard components with CSS customization
- Integrating Syncfusion charts, grids, or other components as panel content

## Component Overview

The Dashboard Layout component provides:
- **Grid-based layout system** with configurable columns and cell dimensions
- **Drag-and-drop** support for reordering panels with visual feedback
- **Resizing** in multiple directions (east, west, north, south, etc.)
- **Floating panels** that automatically fill empty spaces
- **Responsive behavior** with custom media query breakpoints
- **State persistence** through serialize/deserialize methods
- **Dynamic panel management** with add, remove, and move operations
- **Event-driven architecture** for tracking user interactions

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Angular CLI setup and project initialization
- Installing Dashboard Layout package (Ivy and ngcc variants)
- CSS imports and theme configuration
- Two panel definition approaches (HTML attributes vs property binding)
- Basic component rendering and first dashboard creation
- Cell spacing and layout initialization

### Adding and Removing Panels
📄 **Read:** [references/adding-removing-panels.md](references/adding-removing-panels.md)
- Dynamic panel management with addPanel() method
- Removing individual panels with removePanel(id)
- Bulk removal with removeAll() method
- Panel configuration properties for dynamic generation
- Event handling and callbacks for lifecycle management

### Setting Panel Headers
📄 **Read:** [references/panel-headers.md](references/panel-headers.md)
- Configuring panel headers with header property
- Adding titles, labels, and HTML content to headers
- Styling headers with CSS customization
- Embedding Syncfusion components in panel headers
- Header interaction and user experience patterns

### Dragging and Dropping Panels
📄 **Read:** [references/dragging-and-dropping.md](references/dragging-and-dropping.md)
- Default drag-drop behavior and panel collision handling
- Drag events: dragStart, drag, dragStop
- Customizing drag handles with draggableHandle property
- Programmatic panel movement with movePanel(id, row, col)
- Disabling drag functionality with allowDragging
- Touch support and user interaction patterns

### Moving Panels Programmatically
📄 **Read:** [references/moving-panels.md](references/moving-panels.md)
- Using movePanel(id, row, col) to reposition panels
- Moving panels without user interaction
- Tracking panel movements with change events
- Swapping panel positions programmatically
- Panel rearrangement patterns and use cases

### Resizing and Floating Panels
📄 **Read:** [references/resizing-and-floating.md](references/resizing-and-floating.md)
- Enabling panel resizing with allowResizing
- Resize handles in different directions (e-south-east, e-east, e-west, e-north, e-south)
- Resize events: resizeStart, resize, resizeStop
- Programmatic resizing with resizePanel(id, sizeX, sizeY)
- Min and max size constraints (minSizeX, minSizeY, maxSizeX, maxSizeY)
- Floating behavior and automatic panel repositioning
- Disabling floating for fixed grid layouts

### Saving and Restoring State
📄 **Read:** [references/save-restore-state.md](references/save-restore-state.md)
- Serializing dashboard layout with serialize()
- Saving layout state to localStorage, sessionStorage, or backend
- Restoring layouts from persisted configuration
- Implementing layout templates and presets
- State persistence patterns and best practices

### Responsive and Adaptive Design
📄 **Read:** [references/responsive-and-adaptive.md](references/responsive-and-adaptive.md)
- Built-in responsive behavior and auto-adaptation
- Customizing responsive breakpoints with mediaQuery
- Stacked layout on mobile devices (vertical columns)
- Cell aspect ratio configuration with cellAspectRatio
- Testing responsive layouts at different resolutions
- Parent element sizing (percentage vs static dimensions)

### Configuring Cell Spacing
📄 **Read:** [references/cell-spacing-configuration.md](references/cell-spacing-configuration.md)
- Setting [horizontal, vertical] spacing with cellSpacing property
- Adjusting spacing for compact or spacious layouts
- Dynamic spacing adjustment for responsive designs
- Asymmetric spacing patterns for visual hierarchy
- Practical examples: compact dashboards, executive layouts

### Graphical Representation and Grid Lines
📄 **Read:** [references/grid-lines-and-visualization.md](references/grid-lines-and-visualization.md)
- Visualizing grid structure with showGridLines property
- Understanding grid cells, rows, columns, and spacing
- Design-time grid visualization for layout planning
- Debugging panel positioning and sizing
- Best practices for grid line usage

### Right-to-Left Language Support
📄 **Read:** [references/rtl-support.md](references/rtl-support.md)
- Enabling RTL rendering with enableRtl property
- Supporting Arabic, Hebrew, Farsi, and Urdu languages
- Dynamic RTL toggling for language switching
- HTML dir attribute integration
- CSS logical properties for RTL-aware styling
- RTL considerations with drag-drop interactions

### Styling and Customization
📄 **Read:** [references/styling-and-customization.md](references/styling-and-customization.md)
- CSS selectors for customizing panels, headers, and content
- Panel header and content styling (.e-panel-header, .e-panel-content)
- Resize handle customization (.e-resize)
- Dashboard background styling
- Panel positioning and sizing with row, col, sizeX, sizeY properties
- Min/max size constraints and grid structure
- Integrating Syncfusion components (Charts, Grids, Gauges) as panel content
- SystemJS configuration for legacy Angular setups

**For detailed examples and code samples, see:**
- [getting-started.md](references/getting-started.md) - Quick start and basic setup examples
- [Common patterns and implementation examples in specific reference files](references/)

## API Reference

### Component Properties (14 total)

#### Layout Configuration

| Property | Type | Default | Description |
|---|---|---|---|
| `columns` | number | 5 | Number of columns in the grid layout. Panels are positioned within this column-based grid. |
| `cellSpacing` | number[] | [10, 10] | Spacing between panels: [horizontal, vertical] in pixels. Creates visual separation and padding around panels. |
| `cellAspectRatio` | number | Auto (1:1) | Width/height ratio of cells. Example: 100/50 creates cells that are twice as wide as tall. |
| `mediaQuery` | string | 'max-width: 600px' | CSS media query breakpoint for responsive stacked layout. Panels stack vertically below this breakpoint. |
| `showGridLines` | boolean | false | When true, visualizes grid cells and structure for design-time debugging and layout planning. |

#### Interaction Features

| Property | Type | Default | Description |
|---|---|---|---|
| `allowDragging` | boolean | true | Enables/disables panel drag-drop functionality. When true, users can reorder panels by dragging. |
| `allowResizing` | boolean | false | Enables/disables panel resizing. When true, resize handles appear on panel edges. |
| `allowFloating` | boolean | true |