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

27 Jul 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.

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/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://cdn.syncfusion.com/ej2/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;
}