HelpBot Assistant

How can I help you?

Add remove panels in EJ2 TypeScript Dashboard Layout control

5 Mar 202615 minutes to read

In real-time cases, the data being presented within the dashboard need to be updated frequently which includes adding or removing the data dynamically within the dashboard. This can be achieved by using the addPanel and removePanel public methods of the control.

Add or remove panels dynamically

Panels can be added dynamically using the addPanel public method by passing the panels property as parameter. Panels can be removed dynamically by using the removePanel public method by passing the panel id value as the parameter.

It is also possible to remove all the panels in a Dashboard Layout by calling the removeAll method.

   dashboard.removeAll();

The following sample demonstrates how to add and remove panels dynamically in the Dashboard Layout control. In the sample, panels can be added in any desired position of required size by selecting them in the numeric boxes and clicking add button and remove them by selecting the id of the panel.

import { DashboardLayout } from '@syncfusion/ej2-layouts';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Button } from '@syncfusion/ej2-buttons';
import { NumericTextBox } from '@syncfusion/ej2-inputs';

// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
    cellSpacing: [10, 10],
    columns: 5,
    panels: [{ 'id': 'Panel0', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, content: '<div class="content">0</div>' },
    { 'id': 'Panel1', 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 1, content: '<div class="content">1</div>' },
    { 'id': 'Panel2', 'sizeX': 1, 'sizeY': 3, 'row': 0, 'col': 4, content: '<div class="content">2</div>' },
    { 'id': 'Panel3', 'sizeX': 1, 'sizeY': 1, 'row': 1, 'col': 0, content: '<div class="content">3</div>' },
    { 'id': 'Panel4', 'sizeX': 2, 'sizeY': 1, 'row': 2, 'col': 0, content: '<div class="content">4</div>' },
    { 'id': 'Panel5', 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 2, content: '<div class="content">5</div>' },
    { 'id': 'Panel6', 'sizeX': 1, 'sizeY': 1, 'row': 2, 'col': 3, content: '<div class="content">6</div>' }
    ]
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_layout');

let count: number = 7;
let data: string[] = ["Panel0", "Panel1", "Panel2", "Panel3", "Panel4", "Panel5", "Panel6"];
let sizeX: NumericTextBox = new NumericTextBox({
    placeholder: 'Ex: 1',
    floatLabelType: 'Never',
    value: 1,
    min: 1,
    max: 5
});

sizeX.appendTo('#sizex');

let idValue: DropDownList = new DropDownList({
    dataSource: data
});
idValue.appendTo("#value");

let sizeY: NumericTextBox = new NumericTextBox({
    //set the data to dataSource property
    placeholder: 'Ex: 1',
    floatLabelType: 'Never',
    value: 1,
    min: 1,
    max: 5
});

sizeY.appendTo('#sizey');

let row: NumericTextBox = new NumericTextBox({
    //set the data to dataSource property
    placeholder: 'Ex: 1',
    floatLabelType: 'Never',
    value: 0,
    min: 0,
    max: 5
});

row.appendTo('#row');

let column: NumericTextBox = new NumericTextBox({
    //set the data to dataSource property
    placeholder: 'Ex: 1',
    floatLabelType: 'Never',
    value: 0,
    min: 0,
    max: 4
});

column.appendTo('#column');

let addElement = document.getElementById('add');
if(addElement) {
    addElement.addEventListener('click', () => {
        let panel: any = {
            id: "Panel" + count.toString(),
            sizeX: sizeX.value,
            sizeY: sizeY.value,
            row: row.value,
            col: column.value,
            content: "<div class='content'>" + count + "</div>"
        }
        dashboard.addPanel(panel);
        count = count + 1;
        (<string[]>idValue.dataSource).push(panel.id);
        idValue.refresh();
    });
}

let removeElement = document.getElementById('remove');
if(removeElement) {
    removeElement.addEventListener('click', () => {
        dashboard.removePanel(idValue.value.toString());
        (<string[]>idValue.dataSource).splice((<string[]>idValue.dataSource).indexOf(idValue.value.toString()), 1);
        idValue.refresh();
        idValue.value = null;
    });
}
<!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'>
        <div class="inline" id="control">
            <div id="dashboard_layout"></div>
        </div>
        <div class="inline" id="properties">
            <table>
                <tr>
                    <td>SizeX</td>
                    <td> <input id="sizex" /></td>
                </tr>
                <tr>
                    <td>SizeX</td>
                    <td> <input id="sizey" /></td>
                </tr>
                <tr>
                    <td>Row</td>
                    <td> <input id="row" /></td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td> <input id="column" /></td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <button id="add" class="e-btn e-flat e-outline">Add</button>
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>Id</td>
                    <td> <input id="value" /></td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <button id="remove" class="e-btn e-flat e-danger">Remove</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <style>
        #container {
            margin: 0 auto;
            width: 800px;
        }

        #dashboard_layout .e-panel .e-panel-container .content {
            vertical-align: middle;
            font-weight: 500;
            font-size: 20px;
            text-align: center;
            line-height: 45px;
        }

        td {
            padding: 5px;
        }

        div#properties {
            width: 205px;
            margin-left: 15px;
            border: 1px solid black;
            padding: 15px;
            position: absolute;
        }

        .inline {
            display: inline-block;
        }

        div#control {
            width: 500px;
        }

        #resize {
            margin-left: 40%;
        }

        #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.