Search results

Dynamically resize the height of panels in JavaScript 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;
Source
Preview
app.ts
index.html
index.css
import { DashboardLayout } from '@syncfusion/ej2-layouts';
import { Button } from '@syncfusion/ej2-buttons';

    let dashboardObject: DashboardLayout = new 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>'
        }]
    });
    dashboardObject.appendTo('#defaultLayout');

    let btnInstance: Button = new Button({cssClass:"e-outline e-success"});
    btnInstance.appendTo('#editbtn');

    btnInstance.element.onclick = () => {
      let panelContent: HTMLElement = document.getElementById("panelContent");
      let panelHeight: number  = panelContent.offsetHeight;
      let panelWidth: number = panelContent.offsetWidth;
      let diff: number = 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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='container'>        
            <div id="defaultLayout"></div>
            <button id="editbtn">Resize panel</button>          
    </div>
</body>
</html>
#container {
  margin: 0 auto;
  width: 800px;
}

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

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