Resizing of panels in EJ2 TypeScript Dashboard Layout control

23 Jan 202510 minutes to read

The Dashboard Layout control includes panel resizing functionality, which can be enabled or disabled using the allowResizing property. This functionality allows panels to be resized dynamically through UI interactions using resizing handlers, which control panel resizing in various directions.

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

On resizing a panel in Dashboard Layout the following events will be triggered,

resizeStart - Triggers when panel resize starts
resize - Triggers when panel is being resized
resizeStop - Triggers when panel resize stops

The following sample demonstrates how to enable and disable the resizing of panels in the Dashboard Layout control in different directions.

index.ts
index.html
import { DashboardLayout } from '@syncfusion/ej2-layouts';

// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
    cellSpacing: [10, 10],
    allowResizing: true,
    columns: 5,
    //Dashboard Layout's resizeStart event
    resizeStart: onResizeStart,
    //Dashboard Layout's resize event
    resize: onResize,
    //Dashboard Layout's resizeStop event
    resizeStop: onResizeStop,
    resizableHandles: ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'],
    panels: [{ '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>' }]
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_default');
//Dashboard Layout's resizeStart event function
function onResizeStart(args: any) {
    console.log("Resize start");
}

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

//Dashboard Layout's resizeStop event function
function onResizeStop(args: any) {
    console.log("Resize stop");
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Dashboard Layout </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Dashboard Layout Control" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='container'>
        <!--element which is going to render the Dashboard Layout-->
        <div id="dashboard_default"></div>
    </div>
    <style>
        #container {
            margin: 0 auto;
            width: 500px;
        }

        #dashboard_default .e-panel .e-panel-container .content {
            vertical-align: middle;
            font-weight: 600;
            font-size: 20px;
            text-align: center;
            line-height: 90px;
        }

        #dashboard_default .e-panel {
            transition: none !important;
        }
    </style>
</body>

</html>

Resizing panels programatically

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

   resizePanel(id, sizeX, sizeY)

Where,

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 resizing panels programatically in the Dashboard Layout’s created event.

index.ts
index.html
import { DashboardLayout } from '@syncfusion/ej2-layouts';

// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
    cellSpacing: [10, 10],
    columns: 5,
    //Dashboard Layout's created event
    created: onCreated,
    panels: [{ '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>' }]
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_layout');

//Dashboard Layout's created event function
function onCreated(args: any) {
    // resizePanel("id", sizeX, sizeY)
    this.resizePanel("layout_4", 1, 1);
    this.resizePanel("layout_5", 2, 1);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Dashboard Layout </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Dashboard Layout Control" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='container'>
        <!--element which is going to render the Dashboard Layout-->
        <div id="dashboard_layout"></div>
    </div>
    <style>
        #container {
            margin: 0 auto;
            width: 500px;
        }

        #dashboard_layout .e-panel .e-panel-container .content {
            vertical-align: middle;
            font-weight: 600;
            font-size: 20px;
            text-align: center;
            line-height: 90px;
        }

        #dashboard_layout .e-panel {
            transition: none !important;
        }
    </style>
</body>

</html>

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