How can I help you?
Setting header of panels in EJ2 TypeScript Dashboard Layout control
5 Mar 202620 minutes to read
The Dashboard Layout control is primarily used to represent data for monitoring or managing processes. Data or any HTML template can be placed as the panel content of a panel using the content property. A word or phrase summarizing the panel’s content can be added as the header on the top of each panel using the header property of the panel.
The following sample shown how to add content for each panel using the header and content properties of the panels.
import { DashboardLayout } from '@syncfusion/ej2-layouts';
// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
cellSpacing: [10, 10],
columns: 6,
panels: [{ 'id': 'Panel0', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, header: '<div>Panel 0</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel1', 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, header: '<div>Panel 1</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel2', 'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, header: '<div>Panel 2</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel3', 'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, header: '<div>Panel 3</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel4', 'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, header: '<div>Panel 4</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel5', 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, header: '<div>Panel 5</div>', content: '<div class="content">Panel Content<div>' },
{ 'id': 'Panel6', 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, header: '<div>Panel 6</div>', content: '<div class="content">Panel Content<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-buttons/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'>
<div id="dashboard_default"></div>
</div>
<style>
#container {
margin: 0 auto;
width: 500px;
}
#dashboard_default .e-panel .e-panel-container .content {
font-weight: 600;
text-align: center;
margin-top: 10px;
line-height: 100%;
}
.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
color: rgba(0, 0, 0, 0.61);
}
.e-panel .e-header-text {
padding: 12px 0 12px 0;
}
#dashboard .e-panel-container .e-panel-header {
border-bottom: 1px solid #888383;
}
.e-dashboard-layout.e-control .e-panel:hover {
border: 0px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
font-size: 15px;
font-weight: 500;
height: 37px;
padding: 10px;
vertical-align: middle;
/* text-align: left; */
border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}
.e-panel-header {
padding: 10px;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
}
#dashboard_default .e-panel {
transition: none !important;
}
</style>
</body>
</html>Placing controls as content of panels
Controls such as charts, grids, maps, and gauges can present complex data in a dashboard. These controls can be used as panel content by assigning the corresponding control element to the contentproperty of the panel.
The following sample demonstrates how to add EJ2 Chart controls as the content for panels in the Dashboard Layout control.
import { DashboardLayout } from '@syncfusion/ej2-layouts';
import { Chart, ColumnSeries, Category, LineSeries, AccumulationChart, AccumulationTooltip, PieSeries } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, LineSeries);
AccumulationChart.Inject(AccumulationTooltip, PieSeries);
// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
cellSpacing: [10, 10],
columns: 6,
panels: [{ 'id': 'Panel1', 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 0, header: '<div class="header"> Product usage ratio </div>', content: '<div id="pie"><div>' },
{ 'id': 'Panel2', 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 3, header: '<div class="header"> Last year Sales Comparison </div>', content: '<div id="column"><div>' },
{ 'id': 'Panel3', 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 3, header: '<div class="header"> Mobile browsers usage </div>', content: '<div id="pie1"><div>' },
{ 'id': 'Panel4', 'sizeX': 3, 'sizeY': 2, 'row': 1, 'col': 0, header: '<div class="header"> Sales increase percentage </div>', content: '<div id="line"><div>' }
]
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_default');
let chartData: any[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category'
},
series: [{
dataSource: chartData,
xName: 'month',
yName: 'sales',
type: 'Column'
}],
height: "162px"
}, '#column');
let lineData: any[] = [
{ x: 2013, y: 28 }, { x: 2014, y: 25 }, { x: 2015, y: 26 }, { x: 2016, y: 27 },
{ x: 2017, y: 32 }, { x: 2018, y: 35 },
];
let linechart: Chart = new Chart({
series: [{
dataSource: lineData,
xName: 'x', yName: 'y',
//Series type as line
type: 'Line'
}],
height: "162px"
}, '#line');
let accChart: AccumulationChart = new AccumulationChart({
series: [
{
dataSource: [{ x: 'TypeScript', y: 13, text: 'TS 13%' }, { x: 'React', y: 12.5, text: 'Reat 12.5%' }, { x: 'MVC', y: 12, text: 'MVC 12%' }, { x: 'Core', y: 12.5, text: 'Core 12.5%' }, { x: 'Vue', y: 10, text: 'Vue 10%' }, { x: 'Angular', y: 40, text: 'Angular 40%' }],
xName: 'x',
yName: 'y',
innerRadius: "20%"
}],
tooltip: { enable: true },
height: "162px"
}, '#pie');
let piechart: AccumulationChart = new AccumulationChart({
// Initialize the chart series
series: [
{
dataSource: [
{ 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },
{ 'x': 'Others', y: 4, text: '4%' }, { 'x': 'Opera', y: 11, text: '11%' },
{ 'x': 'Android', y: 12, text: '12%' }
],
dataLabel: {
visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' }
},
radius: '70%', xName: 'x', yName: 'y', name: 'Browser'
}
],
center: { x: '50%', y: '50%' },
enableSmartLabels: true,
height: "162px",
enableAnimation: false,
legendSettings: { visible: false },
// Initialize tht tooltip
tooltip: { enable: true, format: '${point.x} : <b>${point.y}%</b>' },
}, '#pie1');<!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-buttons/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-circulargauge/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="dashboard_default"></div>
</div>
</div>
<style>
#container {
margin: 0 auto;
width: 600px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
color: rgba(0, 0, 0, 0.61);
}
.e-panel .e-header-text {
padding: 12px 0 12px 0;
}
#dashboard .e-panel-container .e-panel-header {
border-bottom: 1px solid #888383;
}
.e-dashboard-layout.e-control .e-panel:hover {
border: 0px;
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
font-size: 15px;
font-weight: 500;
height: 37px;
padding: 10px;
vertical-align: middle;
border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}
.e-panel-header {
padding: 10px;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
}
.e-dashboard-layout.e-control .e-panel .e-panel-header {
height: 30px
}
.e-dashboard-layout.e-control .e-panel .e-panel-header div {
text-align: center;
}
.header {
padding: 5px;
}
.e-panel-content {
height: 162px;
}
#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.