Setting header of panels in EJ2 TypeScript Dashboard Layout control

6 Mar 202520 minutes to read

The Dashboard Layout control is mostly used to represent data for monitoring or managing a process. These data or any HTML template can be placed as the content of a panel using the content property. Additionally, 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 demonstrates 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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.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_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

In a dashboard, controls like charts, grids, maps, gauges, etc. can be used to present complex data. Any such controls can be placed as panel content by assigning the corresponding control element as the content of the panel.

The following sample demonstrates how to add EJ2 Chart controls as the content for each panel 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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-circulargauge/styles/material.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_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>

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 know how to present and manipulate data.