Resize the panel dynamically in JavaScript Dashboard Layout control

18 Nov 20185 minutes to read

In Dashboard Layout, the height of a panel is based on its width. When resizing the panel, both the height and width should be adjusted.

To resize the height of a panel alone, use the resizePanel method. 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 the 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 Dashboard Layout control
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 Dashboard Layout
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 Dashboard Layout </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Essential JS 2 Dashboard Layout Control">
  <meta name="author" content="Syncfusion">
  <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/34.1.29/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>
  <style>
    #container {
      margin: 0 auto;
      width: 800px;
    }

    .content {
      width: 250px;
    }

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

    #defaultLayout .e-panel {
      transition: none !important;
    }
  </style>
</body>

</html>

Refer to the JavaScript Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our JavaScript Dashboard Layout example to knows how to present and manipulate data.