Dynamically resize the height of panels in JavaScript (ES5) Dashboard Layout control

24 Jun 2022 / 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

index.js

index.html

index.css

// initialize dashboardlayout component
var dashboardObject  = new ej.layouts.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>'
        }]
});
// render initialized dashboardlayout
dashboardObject.appendTo('#defaultLayout');


var btnInstance = new ej.buttons.Button({cssClass:"e-outline e-success"});
    btnInstance.appendTo('#editbtn');
    
document.getElementById('editbtn').onclick = function() {      
    var panelContent = document.getElementById("panelContent");    
    var panelHeight = panelContent.offsetHeight;
    var panelWidth = panelContent.offsetWidth;
    var diff = 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.1.58/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-buttons/styles/material.css" rel="stylesheet">   
    <link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.1.58/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">        
            <div id="defaultLayout"></div>
            <button id="editbtn">Resize panel</button>          
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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.