Search results

Dynamically resize the height of panels in JavaScript Dashboard Layout control

26 Nov 2021 / 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.

Copied to clipboard
let panelContent: HTMLElement = document.getElementById("panelContent");
let panelHeight: number = panelContent.offsetHeight;
Source
Preview
app.ts
index.html
index.css
Copied to clipboard
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);
    };
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />   
    <link href="//cdn.syncfusion.com/ej2/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>
Copied to clipboard
#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.