Setting cell size in Angular Dashboard Layout component

4 Mar 202615 minutes to read

The entire layout dimensions are based on the height and width of the parent element. A responsive or static layout can be created by assigning percentage or static dimension values to the parent element. The layout automatically adapts to mobile resolutions by transforming into a stacked orientation so that the panels display in a vertical column.

The Dashboard Layout component uses a grid structure that divides into subsections of equal size called cells. The total number of cells in each row is defined using the columns property of the component. The component auto-calculates the width of each cell based on the total number of cells in a row and the height of a cell will be same as that of its width. However, the height of these cells can also be configured to any desired size using the cellAspectRatio property (cellwidth/cellheight ratio) which defines the cell width to height ratio.

The layout supports an unlimited number of rows based on the panel count and position. Panels act as data containers and are placed over these cells.

Modifying cell dimensions

Dashboard panels may need to hold data of different sizes, requiring different cell dimensions in various scenarios. The size of grid cells can be modified using the columns and cellAspectRatio properties.

The following sample demonstrates how to modify cell size using the columns and cellAspectRatio properties. In this sample, the parent element width is divided into 5 equal cells based on the columns property value, resulting in each cell having a width of 100px. The cell height is 50px based on the cellAspectRatio value 100/50 (i.e., for every 100px of width, 50px will be the height of the cell).

app.component.ts
styles.css
main.ts
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' [columns]='5' [cellSpacing]='cellSpacing' [panels]='panels' [cellAspectRatio]='cellAspectRatio'>
        </ejs-dashboardlayout>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [10, 10];
    public cellAspectRatio: number = 100/50;
    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/material3.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.css';

#defaultLayout {
    padding: 10px;
}

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

Configuring cell spacing

The spacing between each panel in a row and column can be defined using the cellSpacing property. Adding spacing between panels makes the layout more effective and provides clear data representation.

The following sample demonstrates the usage of the cellSpacing property, which helps provide neat and clear data representation.

app.component.ts
styles.css
main.ts
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' [columns]='5' [cellSpacing]='cellSpacing' [panels]='panels'>
        </ejs-dashboardlayout>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [20, 20];
    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/material3.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.css';

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

#defaultLayout {
    padding: 10px;
}

#defaultLayout .e-panel .e-panel-container {
    vertical-align: middle;
    font-weight: 500;
    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));

Graphical representation of layout

The cells collectively form a grid-structured layout that is initially hidden. This grid-structured layout can be made visible by enabling the showGridLines property, which clearly displays the cell divisions within the layout. These gridlines are helpful for panel sizing and placement within the layout during the initial design of a dashboard.
In the following sample, the gridlines indicate the cells split-up of the layout and the data containers placed over these cells are known as panels.

app.component.ts
styles.css
main.ts
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' [columns]='5' [cellSpacing]='cellSpacing' [panels]='panels' [showGridLines]='showGridLines'>
        </ejs-dashboardlayout>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [10, 10];
    public showGridLines: boolean = true;
    public panels: any = [{ "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": 2, "col": 2, content: '<div class="content">3</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">4</div>' }
    ];
}
@import "node_modules/@syncfusion/ej2-base/styles/material3.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.css';

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

#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));

Rendering component in right-to-left direction

The Dashboard Layout component can be rendered in right-to-left direction by setting the enableRtl API to true.

The following sample demonstrates Dashboard Layout in right-to-left direction.

app.component.ts
styles.css
main.ts
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' 
        [enableRtl]='enableRtl'>
        </ejs-dashboardlayout>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [10, 10];
    public columns: number = 5;
    public enableRtl: boolean = true;
    public panels: any = [
        { 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, header: '<div>Panel 0</div>', content: '<div class="content"></div>' },
        { 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, header: '<div>Panel 1</div>', content: '<div class="content"></div>' },
        { 'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, header: '<div>Panel 2</div>', content: '<div class="content"></div>' },
        { 'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, header: '<div>Panel 3</div>', content: '<div class="content"></div>' },
        { 'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, header: '<div>Panel 4</div>', content: '<div class="content"></div>' },
        { 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, header: '<div>Panel 5</div>', content: '<div class="content"></div>' },
        { 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, header: '<div>Panel 6</div>', content: '<div class="content"></div>' }
    ];

}
@import "node_modules/@syncfusion/ej2-base/styles/material3.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.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;
}

.content {
    line-height: 90px;
    text-align: center;
}

.e-panel-header {
    padding: 10px;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Refer to the Angular Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our Angular Dashboard Layout example to learn how to present and manipulate data.

Search docs

Ask HelpBot