Add remove panels in Angular Dashboard layout component

28 Dec 202413 minutes to read

In real-time scenarios, the data presented within the dashboard often needs to be updated frequently, which includes dynamically adding or removing data within the dashboard. This can be easily achieved by using the addPanel and removePanel public methods of the component.

Add or remove panels dynamically

Panels can be added dynamically by using the addPanel public method by passing the panels property as parameter. Similarly, panels can be removed dynamically using theremovePanel public method by passing the panel id value as a 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 component. Here, panels can be added in any desired position with the required size by selecting values in the numeric boxes and clicking the add button. Panels can be removed by selecting their ID.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { DashboardLayoutComponent } from '@syncfusion/ej2-angular-layouts';

@Component({
    imports: [DashboardLayoutModule, ButtonModule, NumericTextBoxModule, DropDownListModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div class="control-section">
        <div class="inline" id="control">
            <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing'
                [panels]='panels'>
            </ejs-dashboardlayout>
        </div>
        <div class="inline" id="properties">
            <table>
                <tr>
                    <td>SizeX</td>
                    <td>
                        <ejs-numerictextbox id="sizex" #sizex placeholder="Ex: 1" floatLabelType="Never" value= 1 min=1 max=5></ejs-numerictextbox>
                    </td>
                </tr>
                <tr>
                    <td>SizeY</td>
                    <td>
                        <ejs-numerictextbox id="sizey" #sizey placeholder="Ex: 1" floatLabelType="Never" value= 1 min=1 max=5></ejs-numerictextbox>
                    </td>
                </tr>
                <tr>
                    <td>Row</td>
                    <td>
                        <ejs-numerictextbox id="row" #row placeholder="Ex: 1" floatLabelType="Never" value=0 min=0 max=5></ejs-numerictextbox>
                    </td>
                </tr>
                <tr>
                    <td>Column</td>
                    <td>
                        <ejs-numerictextbox id="column" #column placeholder="Ex: 1" floatLabelType="Never" value=0 min=0 max=4></ejs-numerictextbox>
                    </td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <button ejs-button id="add" #add cssClass="e-btn e-flat" (click)="addClick()">Add</button>
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>Id</td>
                    <td> <ejs-dropdownlist id='dropdown' #dropdown [dataSource]='data' placeholder='Select a id value'
                        ></ejs-dropdownlist></td>
                </tr>
                <tr>
                    <td> </td>
                    <td>
                        <button ejs-button id="remove" cssClass="e-btn e-flat e-danger" (click)="removeClick()">Remove</button>
                    </td>
                </tr>
            </table>
            
        </div>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('defaultLayout') dashboard?: DashboardLayoutComponent;
    @ViewChild('sizex') sizeX?: NumericTextBoxComponent;
    @ViewChild('sizey') sizeY?: NumericTextBoxComponent;
    @ViewChild('row') row?: NumericTextBoxComponent;
    @ViewChild('column') column?: NumericTextBoxComponent;
    @ViewChild('add') addBtn?: ButtonComponent;
    @ViewChild('dropdown') dropDownListObject?: DropDownListComponent;

    public data: string[] = ['Panel0', 'Panel1', 'Panel2', 'Panel3', 'Panel4', 'Panel5', 'Panel6'];
    public cellSpacing: number[] = [20, 20];
    public columns: number = 5;
    public count: number = 7;
    public panel?: any;
    public panels: any = [{ '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>' }
    ];
    addClick() {
        this.panel = {
            id: 'Panel' + this.count.toString(),
            sizeX: (this.sizeX as any).value,
            sizeY: (this.sizeY as any).value,
            row: (this.row as any).value,
            col: (this.column as any).value,
            content: "<div class='content'>" + this.count + '</div>',
        };
        this.dashboard?.addPanel(this.panel);
        this.count = this.count + 1;
        (this.dropDownListObject as any).dataSource.push(this.panel.id);
        (this.dropDownListObject as any)?.refresh();
    }
    removeClick() {
        this.dashboard?.removePanel((this.dropDownListObject as any).value);
        (this.dropDownListObject as any).dataSource.splice(
            (this.dropDownListObject as any).dataSource.indexOf(
                (this.dropDownListObject as any).value
            ),
            1
        );
        (this.dropDownListObject as any)?.refresh();
        (this.dropDownListObject as any).value = null as any;
    }
}
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';

#container {
    margin: 0 auto;
    width: 800px;
}

#defaultLayout .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%;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can refer to our Angular Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our Angular Dashboard Layout example to knows how to present and manipulate data.