HelpBot Assistant

How can I help you?

Resizing of panels in Angular Dashboard layout component

4 Mar 202610 minutes to read

The Dashboard Layout component enables dynamic panel resizing functionality through the allowResizing property. This functionality allows users to dynamically resize panels using resizing handles that control panel dimensions in various directions.

By default, panels can be resized only in the south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by specifying the required directions with the resizableHandles property.

Resize events

The Dashboard Layout triggers the following events during panel resize operations:

API Reference Description Use Case
resizeStart Triggers when panel resize begins Useful for capturing initial panel dimensions
resize Triggers continuously during panel resizing Ideal for real-time updates or validation
resizeStop Triggers when panel resize completes Perfect for saving final panel state

The following sample demonstrates how to enable and disable panel resizing in the Dashboard Layout component with different directional handles:

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]='5' [cellSpacing]='cellSpacing' [panels]='panels' [allowResizing]='allowResizing' [resizableHandles]='resizableHandles'
        (resizeStart)="onResizeStart($this)" (resize)="onResize($this)" (resizeStop)="onResizeStop($this)">
        </ejs-dashboardlayout>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public cellSpacing: number[] = [10, 10];
    public columns: number = 5;
    public allowResizing: boolean = true;
    public resizableHandles: string[] = ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'];
    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>' }
    ];
    public $this: any = this;
    //Dashboard Layout's resizestart event function
    onResizeStart(args: any) {
        console.log("Resize start");
    }

    //Dashboard Layout's resize event function
    onResize(args: any) {
        console.log("Resizing");
    }

    //Dashboard Layout's resizestop event function
    onResizeStop(args: any) {
        console.log("Resize stop");
    }

}
@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;
    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));

Programmatic panel resizing

Dashboard Layout panels can be resized programmatically using the resizePanel method. The method is invoked as follows,

Method signature

resizePanel(id, sizeX, sizeY)

Parameters

  • id - ID of the panel which needs to be resized.
  • sizeX - New panel width in cells count for resizing the panel.
  • sizeY - New panel height in cells count for resizing the panel.

The following sample demonstrates how to resize panels programmatically during the Dashboard Layout’s created event:

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

@Component({
    imports: [DashboardLayoutModule],
    standalone: true,
    selector: 'app-root',
    template: `
    <div class="control-section">
        <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [allowResizing]='true' [cellSpacing]='cellSpacing' [panels]='panels' 
        (created)="onCreated($this)">
        </ejs-dashboardlayout>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('defaultLayout') dashboardLayout?: DashboardLayoutComponent;
    public cellSpacing: number[] = [10, 10];
    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>' },
    ];
    public $this: any = this;
    //Dashboard Layout's created event function
    onCreated(args: any) {
        // resizePanel("id", sizeX, sizeY)
        this.dashboardLayout?.resizePanel("layout_4", 1, 1);
        this.dashboardLayout?.resizePanel("layout_5", 2, 1);
    }
}
@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;
    text-align: center;
}

.content {
    line-height: 45px;
}
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.