Dynamically resize the height of panels in JavaScript Dashboard Layout control

17 Mar 2023 / 2 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;

Source

Preview

app.ts

index.html

index.css

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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />   
    <link href="//cdn.syncfusion.com/ej2/20.4.48/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>
</head>
<body>
    <div id='container'>        
            <div id="defaultLayout"></div>
            <button id="editbtn">Resize panel</button>          
    </div>
</body>
</html>

#container {
  margin: 0 auto;
  width: 800px;
}

.content {
  width: 250px;
  height: 500px;
}

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

#defaultLayout .e-panel { 
  transition:none !important;
}

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.