Search results

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

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;
// 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

var btnInstance = new ej.buttons.Button({cssClass:"e-outline e-success"});
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="//" rel="stylesheet">
    <link href="//" rel="stylesheet">   
    <link href="//" rel="stylesheet">
<script src="" type="text/javascript"></script>
    <div id="container">        
            <div id="defaultLayout"></div>
            <button id="editbtn">Resize panel</button>          

var ele = document.getElementById('container');
if(ele) { = "visible";
<script src="index.js" type="text/javascript"></script>
#container {
  margin: 0 auto;
  width: 800px;

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

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

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