How can I help you?
Adding and Removing Panels in Angular Dashboard Layout Component
4 Mar 202614 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.
Adding and Removing Panels Dynamically
Adding Panels
Panels can be added dynamically using the addPanel public method by passing the panels property as parameter.
Removing Panels
Panels can be removed dynamically using theremovePanel public method by passing the panel id value as a parameter.
Removing All Panels
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. Panels can be added at any desired position with specified dimensions by configuring values in the numeric inputs and clicking the add button. Panels can be removed individually 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/material3.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-dropdowns/styles/material3.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));Refer to the Angular Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore the Angular Dashboard Layout example to learn how to present and manipulate data.