Resize the panel dynamically in TypeScript 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;
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") as HTMLElement;
    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 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/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-layouts/styles/fluent2.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>
    <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 TypeScript Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our TypeScript Dashboard Layout example to knows how to present and manipulate data.