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