How can I help you?
Setting size of cells in EJ2 TypeScript Dashboard Layout control
5 Mar 202619 minutes to read
The layout’s dimensions are determined by the parent element’s width and height. Hence, a responsive or static layout can be created by assigning a percentage or static dimension values to the parent element. The layout adapts to mobile resolutions by transforming the entire layout into a stacked orientation so that the panels will be displayed in a vertical column.
The Dashboard Layout is a grid-structured control divided into equal subsections known as cells. The total number of cells per row is defined by the columns property of the control. The width of each cell will be auto-calculated based on the total number of cells placed in a row, and the height of a cell will be the same as that of its width. The cell height can be be configured to any desired size using the cellAspectRatio property (cell width/cell height ratio), which defines the cell width-to-height ratio.
The number of rows within the layout has no limits and can have any number of rows based on the panels’ count and position. Panels, which act as data containers, will be placed or positioned over these cells.
Modifying cell size
In a dashboard, the data to be held by the panel in a cell may be of different sizes; hence, different cell dimensions may be required in different scenarios. In this case, the size of these grid cells can be modified to the required size using the columns and cellAspectRatio properties.
The following sample demonstrates how to modify cell size using the columns and cellAspectRatio properties. In the sample below, the width of the parent element is divided into 5 equal cells based on the columns property value, resulting in the width of each cell as 100px. The height of these cells will be 50px based on the cellAspectRatio value 100/50 (i.e., for every 100px of width, 50px will be the height of the cell).
import { DashboardLayout } from '@syncfusion/ej2-layouts';
// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
cellSpacing: [10, 10],
columns: 5,
cellAspectRatio: 100 / 50,
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_layout');<!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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/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>
<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 Dashboard Layout-->
<div id="dashboard_layout"></div>
</div>
<style>
#container {
margin: 0 auto;
width: 500px;
}
#dashboard_layout .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 500;
font-size: 20px;
text-align: center;
line-height: 45px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style>
</body>
</html>Setting cell spacing
The spacing between panels is defined by the cellSpacing property. Adding spacing between the panels improves readability and visual separation between panels.
The following sample demonstrates the usage of the cellSpacing property, for clearer data presentation.
import { DashboardLayout } from '@syncfusion/ej2-layouts';
// initialize Dashboard Layout control
let dashboard: DashboardLayout = new 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 Dashboard Layout
dashboard.appendTo('#dashboard_layout');<!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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/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>
<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 Dashboard Layout-->
<div id="dashboard_layout"></div>
</div>
<style>
#container {
margin: 0 auto;
width: 500px;
}
#dashboard_layout .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style>
</body>
</html>Graphical representation of layout
Cells together form the grid that underlies the layout; the grid is hidden by default. This grid-structured layout can be made visible by enabling the showGridLines property, which clearly pictures the cells’ split-up within the layout. Visible gridlines assist in panel sizing and placement during dashboard design.
In the following sample, the grid lines indicate the cells’ split-up of the layout, and the data containers placed over these cells are known as panels.
import { DashboardLayout } from '@syncfusion/ej2-layouts';
// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
cellSpacing: [10, 10],
columns: 5,
showGridLines: true,
panels: [
{ "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": 2, "col": 2, content: '<div class="content">3</div>' },
{ "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">4</div>' }
]
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_layout');<!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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/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>
<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 Dashboard Layout-->
<div id="dashboard_layout"></div>
</div>
<style>
#container {
margin: 0 auto;
width: 500px;
}
#dashboard_layout .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}
#dashboard_layout .e-panel {
transition: none !important;
}
</style>
</body>
</html>Rendering control in right-to-left direction
It is possible to render the Dashboard Layout in a right-to-left direction by setting the enableRtl API to true.
The following sample demonstrates the Dashboard Layout rendered in right-to-left direction.
import { DashboardLayout } from '@syncfusion/ej2-layouts';
// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
cellSpacing: [10, 10],
enableRtl: true,
columns: 5,
panels: [{ 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, header: '<div>Panel 0</div>', content: '<div class="content"></div>' },
{ 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, header: '<div>Panel 1</div>', content: '<div class="content"></div>' },
{ 'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, header: '<div>Panel 2</div>', content: '<div class="content"></div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, header: '<div>Panel 3</div>', content: '<div class="content"></div>' },
{ 'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, header: '<div>Panel 4</div>', content: '<div class="content"></div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, header: '<div>Panel 5</div>', content: '<div class="content"></div>' },
{ 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, header: '<div>Panel 6</div>', content: '<div class="content"></div>' }]
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_layout');<!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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='container'>
<div id="dashboard_layout"></div>
</div>
<style>
#container {
margin: 0 auto;
width: 500px;
}
#dashboard_layout .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}
#dashboard_layout .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.