Resize the panel dynamically in EJ2 TypeScript Dashboard Layout control

6 Mar 20255 minutes to read

In Dashboard Layout, the height of a panel is based on its width. While resizing the panel, both the height and width should be adjusted.

To resize the height of a panel alone, use the resizePanel method. In this case, the cellAspectRatio property configures the height of the cells based on the cell width-to-height ratio (cell width/cell height ratio) when the height will not be completely adjusted to the sizeY value.

Refer to the following code snippet to determine the height of a panel.

  let panelContent: HTMLElement = document.getElementById("panelContent");
  let panelHeight: number = panelContent.offsetHeight;

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

let dashboardObject: DashboardLayout = new DashboardLayout({
    cellAspectRatio: 100 / 70,
    columns: 4,
    panels: [{
        id: 'panel0', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, header: '<div>Panel 0</div>',
        content: '<div class="content" id="panelContent">Place your content here</div>'
    },
    {
        id: 'panel1', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 1,
        header: '<div>Panel 1</div>',
        content: '<div class="content" id="panelContent">Place your content here</div>'
    },
    {
        id: 'panel2', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 2,
        header: '<div>Panel 2</div>',
        content: '<div class="content" id="panelContent">Place your content here</div>'
    }]
});
dashboardObject.appendTo('#defaultLayout');

let btnInstance: Button = new Button({ cssClass: "e-outline e-success" });
btnInstance.appendTo('#editbtn');

btnInstance.element.onclick = () => {
    let panelContent: HTMLElement = document.getElementById("panelContent") as HTMLElement;
    let panelHeight: number = panelContent.offsetHeight;
    let panelWidth: number = panelContent.offsetWidth;
    let diff: number = Math.round(panelHeight / panelWidth);
    dashboardObject.resizePanel('panel0', 1, diff);
    dashboardObject.resizePanel('panel1', 1, diff);
    dashboardObject.resizePanel('panel2', 1, diff);
};
<!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/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/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'>
        <div id="defaultLayout"></div>
        <button id="editbtn">Resize panel</button>
    </div>
    <style>
        #container {
            margin: 0 auto;
            width: 800px;
        }

        .content {
            width: 250px;
        }

        #editbtn {
            position: absolute;
            left: 85%;
            top: 10%;
        }

        #defaultLayout .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.