Position sizing of panels in EJ2 JavaScript Dashboard layout control

8 May 20239 minutes to read

Panels are the basic building blocks of the dashboard layout component. They act as a container for the data to be visualized or presented. These panels can be positioned or resized for effective presentation of the data.

The below table represents all the available panel properties and the corresponding functionalities

PanelObject	Description
`id`	Specifies the id value of the panel.
`row`	Specifies the row value in which the panel to be placed.
`col`	Specifies the column value in which the panel to be placed.
`sizeX`	Specifies the width of the panel in cells count.
`sizeY`	Specifies the height of the panel in cells count.
`minSizeX`	Specifies the minimum width of the panel in cells count.
`minSizeY`	Specifies the minimum height of the panel in cells count.
`maxSizeX`	Specifies the maximum width of the panel in cells count.
`maxSizeY`	Specifies the maximum height of the panel in cells count.
`header`	Specifies the header template of the panel.
`content`	Specifies the content template of the panel.
`cssClass`	Specifies the CSS class name that can be appended with each panel element.

Positioning of panels

The panels within the layout can be easily positioned or ordered using the row and col properties of the panels. Positioning of panels will be beneficial to represent the data in any desired order.

The following sample demonstrates the positioning of panels within the dashboard layout using the row, column properties of the panels.

index.js
index.html
// initialize dashboardlayout component
let dashboard  = new ej.layouts.DashboardLayout({
    cellSpacing: [20, 20],
    columns: 3,
    panels: [
    { "row": 0, "col": 0, content:'<div class="content">1</div>' },
    { "row": 0, "col": 1, content:'<div class="content">2</div>' },
    { "row": 0, "col": 2, content:'<div class="content">3</div>' },
    { "row": 1, "col": 0, content:'<div class="content">4</div>' },
    { "row": 1, "col": 1, content:'<div class="content">5</div>' },
    { "row": 1, "col": 2, content:'<div class="content">6</div>' }
    ]
});
// render initialized dashboardlayout
dashboard.appendTo('#dashboard_default');
<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-layouts/styles/material.css" rel="stylesheet">


    <script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <!--element which is going to render the dashboardlayout-->
        <div id="dashboard_default"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Sizing of panels

A panel’s size can be varied easily by defining the sizeX and sizeY properties. The sizeX property defines the width and sizeY property defines height of a panel in cells count. These properties will be helpful in designing a dashboard, where the content of each panel may vary in size.

The following sample demonstrates the sizing of panels within the dashboard layout using the sizeX and sizeY properties of the panels.

index.js
index.html
// initialize dashboardlayout component
let dashboard  = new ej.layouts.DashboardLayout({
    cellSpacing: [20, 20],
    columns: 5,
    panels: [{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content:'<div class="content">0</div>' },
    { "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content:'<div class="content">1</div>' },
    { "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content:'<div class="content">2</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content:'<div class="content">3</div>' },
    { "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content:'<div class="content">4</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content:'<div class="content">5</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content:'<div class="content">6</div>' }
    ]
});
// render initialized dashboardlayout
dashboard.appendTo('#dashboard_default');
<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <!--element which is going to render the dashboardlayout-->
        <div id="dashboard_default"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

You can refer to our JavaScript Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Dashboard Layout example to knows how to present and manipulate data.