Resize the panel dynamically in EJ2 TypeScript Dashboard layout control

8 May 20235 minutes to read

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

To resize the height of a panel alone, the resizePanel method is used. 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 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");
      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 DashboardLayout </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 DashboardLayout Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />   
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/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>
</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.