Search results

Adding or Removing Panels in Angular Dashboard Layout component

In real-time cases, the data being presented within the dashboard should be updated frequently which includes adding or removing the data dynamically 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 panel property as parameter. Also, they can be removed dynamically by using the removePanel 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 removeAll method.


The following sample demonstrates how to add and remove the panels dynamically in the dashboard layout component. Here, 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 { 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';

    selector: 'app-root',
    styleUrls: ['app/default-style.css'],
    templateUrl: 'app/app.template.html',
    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.value,
        sizeY: this.sizeY.value,
        row: this.row.value,
        col: this.column.value,
        content: "<div class='content'>"+ this.count +"</div>"
        this.count = this.count + 1;
    removeClick() {
        (<any>this.dropDownListObject.dataSource).splice((<any>this.dropDownListObject.dataSource).indexOf(this.dropDownListObject.value), 1);
        this.dropDownListObject.value = null;
<div class="control-section">
    <div class="inline" id="control">
        <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing'
    <div class="inline" id="properties">
                    <ejs-numerictextbox id="sizex" #sizex placeholder="Ex: 1" floatLabelType="Never" value= 1 min=1 max=5></ejs-numerictextbox>
                    <ejs-numerictextbox id="sizey" #sizey placeholder="Ex: 1" floatLabelType="Never" value= 1 min=1 max=5></ejs-numerictextbox>
                    <ejs-numerictextbox id="row" #row placeholder="Ex: 1" floatLabelType="Never" value=0 min=0 max=5></ejs-numerictextbox>
                    <ejs-numerictextbox id="column" #column placeholder="Ex: 1" floatLabelType="Never" value=0 min=0 max=4></ejs-numerictextbox>
                <td> </td>
                    <button ejs-button id="add" #add cssClass="e-btn e-flat" (click)="addClick()">Add</button>
                <td> <ejs-dropdownlist id='dropdown' #dropdown [dataSource]='data' placeholder='Select a id value'
                <td> </td>
                    <button ejs-button id="remove" cssClass="e-btn e-flat e-danger" (click)="removeClick()">Remove</button>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DashboardLayoutModule for the Dashboard Layout component
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 { AppComponent } from './app.component';

 * Module
    //declaration of ej2-angular-layouts module into NgModule
    imports: [BrowserModule, DashboardLayoutModule, ButtonModule, NumericTextBoxModule, DropDownListModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

#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;
    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;
    margin-left: 40%;