Panel positioning and sizing in Angular Dashboard layout component

4 Sep 20259 minutes to read

Panels serve as the fundamental building blocks of the Dashboard Layout component, functioning as containers for data visualization and content presentation. The component provides comprehensive control over panel positioning and sizing through a flexible grid-based system that enables precise layout management and responsive design implementation.

The following table details all available panel properties and their specific functions in layout management:

Property Type Description
id string Unique identifier for the panel, essential for state management and event handling
row number Grid row position where the panel begins (0-based indexing)
col number Grid column position where the panel begins (0-based indexing)
sizeX number Panel width measured in grid cells
sizeY number Panel height measured in grid cells
minSizeX number Minimum allowed width in cells, prevents excessive resizing
minSizeY number Minimum allowed height in cells, maintains content visibility
maxSizeX number Maximum allowed width in cells, controls layout boundaries
maxSizeY number Maximum allowed height in cells, prevents layout overflow
header string Header template content for panel identification
content string Main content template containing panel data
cssClass string Custom CSS classes for styling and theming

Positioning of panels

The panels within the layout can be easily positioned or ordered using the row and col properties of the panels. Positioning panels is beneficial for representing data in any desired order.

The following sample demonstrates the positioning of panels within the dashboard layout using the row and column properties of the panels.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    imports: [DashboardLayoutModule],
    standalone: true,
    selector: 'app-root',
    template: `
    <div class="control-section">
        <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing' [panels]='panels'>
        </ejs-dashboardlayout>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [20, 20];
    public columns: number = 3;
    public panels: any = [{ "row": 0, "col": 0, content: '<div class="content">1</div>' },
    { "row": 0, "col": 1, content: '<div class="content">2</div>' },
    { "row": 0, "col": 2, content: '<div class="content">3</div>' },
    { "row": 1, "col": 0, content: '<div class="content">4</div>' },
    { "row": 1, "col": 1, content: '<div class="content">5</div>' },
    { "row": 1, "col": 2, content: '<div class="content">6</div>' }
    ]
}
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

.control-section {
    margin: 0 auto;
    width: 500px;
}

#defaultLayout {
    padding: 10px;
}

#defaultLayout .e-panel .e-panel-container {
    vertical-align: middle;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
}

.content {
    line-height: 90px;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Sizing of panels

A panel’s size can be varied easily by defining the sizeX and sizeY properties. The sizeX property defines the width and the sizeY property defines height of a panel in cells count. These properties are helpful in designing a dashboard, where the content of each panel may vary in size.

The following sample demonstrates the sizing of panels within the dashboard layout using the sizeX and sizeY properties of the panels.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    imports: [DashboardLayoutModule],
    standalone: true,
    selector: 'app-root',
    template: `
    <div class="control-section">
        <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing' [panels]='panels'>
        </ejs-dashboardlayout>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [20, 20];
    public columns: number = 5;
    public panels: any = [{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">0</div>' },
    { "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content: '<div class="content">1</div>' },
    { "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content: '<div class="content">2</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content: '<div class="content">3</div>' },
    { "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content: '<div class="content">4</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content: '<div class="content">5</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">6</div>' }
    ]
}
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';

.control-section {
    margin: 0 auto;
    width: 500px;
}

#defaultLayout {
    padding: 10px;
}

#defaultLayout .e-panel .e-panel-container .content {
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
    line-height: 90px;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can refer to our Angular Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our Angular Dashboard Layout example to knows how to present and manipulate data.