How can I help you?
Position Sizing of Panels in EJ2 TypeScript Dashboard Layout Control
5 Mar 202610 minutes to read
Panels are the basic building blocks of the Dashboard Layout control. They act as containers for the data to be visualized or presented. These panels can be positioned or resized for effective presentation of the data.
The table below lists the available panel properties and their 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
Panels can be positioned or ordered using the row and col properties of the panels. Positioning panels will be beneficial to represent the data in any desired order.
The following sample demonstrates positioning panels within the Dashboard Layout using the row and column properties.
import { DashboardLayout } from '@syncfusion/ej2-layouts';
// initialize Dashboard Layout control
let dashboard: DashboardLayout = new 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 Dashboard Layout
dashboard.appendTo('#dashboard_default');<!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/33.1.44/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/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'>
<!--element which is going to render the Dashboard Layout-->
<div id="dashboard_default"></div>
</div>
<style>
#container {
margin: 0 auto;
width: 500px;
}
#dashboard_default .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}
#dashboard_default .e-panel {
transition: none !important;
}
</style>
</body>
</html>Sizing of panels
A panel’s size is defined by the sizeX and sizeY properties. The sizeX property sets the width and the sizeY property sets the height of a panel in cells count. These properties assist in designing dashboards, where the content of each panel may vary in size.
The following sample demonstrates sizing panels within the Dashboard Layout using the sizeX and sizeY properties.
import { DashboardLayout } from '@syncfusion/ej2-layouts';
// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
cellSpacing: [10, 10],
columns: 6,
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 Dashboard Layout
dashboard.appendTo('#dashboard_default');<!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/33.1.44/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/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'>
<!--element which is going to render the Dashboard Layout-->
<div id="dashboard_default"></div>
</div>
<style>
#container {
margin: 0 auto;
width: 500px;
}
#dashboard_default .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}
#dashboard_default .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.