How can I help you?
Add remove panels in Vue Dashboard Layout component
5 Mar 202624 minutes to read
In real-time scenarios, dashboard content often needs to be updated dynamically by adding or removing panels. This can be achieved using the addPanel and removePanel public methods.
Add or remove panels dynamically
Panels can be added dynamically using the addPanel public method by passing the panel property as parameter. Panels can be removed dynamically 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.
dashboard.removeAll();The following sample demonstrates how to add and remove panels dynamically in the Dashboard Layout. Panels can be added at any desired position and size by selecting values in the numeric inputs and clicking the add button; panels can be removed by selecting the panel ID.
<template>
<div>
<div className="col-lg-8 control-section" id="control_dash">
<div className="content-wrapper">
<div id="dashboardElement">
<!-- Dashboard Layout component declaration -->
<ejs-dashboardlayout ref="dashboard" id='dashboard_default' :columns="7">
<e-panels>
<e-panel id="Panel0" :sizeX="1" :sizeY="1" :row="0" :col="0"
content="<div class='content'>0</div>"></e-panel>
<e-panel id="Panel1" :sizeX="3" :sizeY="2" :row="0" :col="1"
content="<div class='content'>1</div>"></e-panel>
<e-panel id="Panel2" :sizeX="1" :sizeY="3" :row="0" :col="4"
content="<div class='content'>2</div>"></e-panel>
<e-panel id="Panel3" :sizeX="1" :sizeY="1" :row="1" :col="0"
content="<div class='content'>3</div>"></e-panel>
<e-panel id="Panel4" :sizeX="2" :sizeY="1" :row="2" :col="0"
content="<div class='content'>4</div>"></e-panel>
<e-panel id="Panel5" :sizeX="1" :sizeY="1" :row="2" :col="2"
content="<div class='content'>5</div>"></e-panel>
<e-panel id="Panel6" :sizeX="1" :sizeY="1" :row="2" :col="3"
content="<div class='content'>6</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
<!-- end of Dashboard Layout component -->
</div>
</div>
</div>
<div className="col-lg-4 property-section dashboard" id="api_property">
<div className="row property-panel-content">
<div className="card-body">
<div className="form-group row">
<table id="add">
<tbody>
<tr>
<td id="property">Add Panel properties</td>
</tr>
<tr>
<td>SizeX</td>
<td>
<ejs-numerictextbox ref="sizex" id="sizex" placeholder="Ex: 1" :value="value" :min="min"
:max="max" :floatLabelType="floatLabelType"></ejs-numerictextbox>
</td>
</tr>
<tr>
<td>SizeX</td>
<td>
<ejs-numerictextbox ref="sizey" id="sizey" placeholder="Ex: 1" :value="value" :min="min"
:max="max" :floatLabelType="floatLabelType"></ejs-numerictextbox>
</td>
</tr>
<tr>
<td>Row</td>
<td>
<ejs-numerictextbox ref="row" id="row" placeholder="Ex: 1" :value="value" :min="rowmin"
:max="rowmax" :floatLabelType="floatLabelType"></ejs-numerictextbox>
</td>
</tr>
<tr>
<td>Column</td>
<td>
<ejs-numerictextbox ref="column" id="column" placeholder="Ex: 1" :value="value" :min="colmin"
:max="colmax" :floatLabelType="floatLabelType"></ejs-numerictextbox>
</td>
</tr>
<tr>
<td>
<ejs-button id="add" class="e-primary" v-on:click="onAdd">Add
Panel</ejs-button>
</td>
</tr>
</tbody>
</table>
<table id="remove">
<tbody>
<tr>
<td id="property">Remove panel properties</td>
</tr>
<tr>
<td> Panel Id </td>
<td>
<ejs-dropdownlist ref="dropdown" id='dropdown' placeholder='Select a id value'
:dataSource='data'></ejs-dropdownlist>
</td>
</tr>
<tr>
<td> <ejs-button id="removeButton" class="e-primary" v-on:click="onRemove">Remove
Panel</ejs-button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";
// Import syncfusion button component from buttons package
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
// Import syncfusion numerictextbox component from inputs package
import { NumericTextBoxComponent as EjsNumerictextbox } from "@syncfusion/ej2-vue-inputs";
// Import syncfusion dropdownlist component from dropdowns package
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
const floatLabelType = 'Never';
const min = 1;
const max = 5;
const rowmin = 0;
const rowmax = 5;
const colmin = 0;
const colmax = 4;
const value = '';
const data = ['Panel0', 'Panel1', 'Panel2', 'Panel3', 'Panel4', 'Panel5', 'Panel6'];
let count = 7;
const onAdd = () => {
var sizeX = this.$refs.sizex.$el.ej2_instances[0];
var sizeY = this.$refs.sizey.$el.ej2_instances[0];
var row = this.$refs.row.$el.ej2_instances[0];
var column = this.$refs.column.$el.ej2_instances[0];
var dropdownObject = this.$refs.dropdown.$el.ej2_instances[0];
var dashboardObj = this.$refs.dashboard.$el.ej2_instances[0];
var panel = [{
'id': "Panel" + count.toString(),
'sizeX': sizeX.value,
'sizeY': sizeY.value,
'row': row.value,
'col': column.value,
'content': "<div class='content'>" + count + "</div>"
}];
dropdownObject.dataSource.push("Panel" + count.toString());
dropdownObject.refresh();
count = count + 1;
dashboardObj.addPanel(panel[0]);
}
const onRemove = () => {
var dropdownObject = this.$refs.dropdown.$el.ej2_instances[0];
var dashboardObj = this.$refs.dashboard.$el.ej2_instances[0];
dashboardObj.removePanel(dropdownObject.value);
dropdownObject.dataSource.splice(dropdownObject.dataSource.indexOf(dropdownObject.value), 1);
dropdownObject.value = null;
dropdownObject.refresh();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
/* Dashboard Layout component styles */
#dashboard_default .e-panel .e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
#control_dash {
display: block;
width: 59%;
float: left;
}
#api_property {
display: inline-block;
margin: 10px;
}
#add {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#remove {
border: 1px solid black;
padding: 10px;
margin: 10px;
width: 377px;
}
#property {
padding: 10px;
}
#removeButton {
border: 1px solid black;
padding: 10px;
margin: 10px;
width: 125px;
}
#dashboardElement {
padding-top: 30px;
}
#dashboard_default .e-panel {
transition: none !important;
}
</style><template>
<div>
<div className="col-lg-8 control-section" id="control_dash">
<div className="content-wrapper">
<div id="dashboardElement">
<!-- Dashboard Layout component declaration -->
<ejs-dashboardlayout ref="dashboard" id='dashboard_default' :columns="7">
<e-panels>
<e-panel id="Panel0" :sizeX="1" :sizeY="1" :row="0" :col="0"
content="<div class='content'>0</div>"></e-panel>
<e-panel id="Panel1" :sizeX="3" :sizeY="2" :row="0" :col="1"
content="<div class='content'>1</div>"></e-panel>
<e-panel id="Panel2" :sizeX="1" :sizeY="3" :row="0" :col="4"
content="<div class='content'>2</div>"></e-panel>
<e-panel id="Panel3" :sizeX="1" :sizeY="1" :row="1" :col="0"
content="<div class='content'>3</div>"></e-panel>
<e-panel id="Panel4" :sizeX="2" :sizeY="1" :row="2" :col="0"
content="<div class='content'>4</div>"></e-panel>
<e-panel id="Panel5" :sizeX="1" :sizeY="1" :row="2" :col="2"
content="<div class='content'>5</div>"></e-panel>
<e-panel id="Panel6" :sizeX="1" :sizeY="1" :row="2" :col="3"
content="<div class='content'>6</div>"></e-panel>
</e-panels>
</ejs-dashboardlayout>
<!-- end of Dashboard Layout component -->
</div>
</div>
</div>
<div className="col-lg-4 property-section dashboard" id="api_property">
<div className="row property-panel-content">
<div className="card-body">
<div className="form-group row">
<table id="add">
<tbody>
<tr>
<td id="property">Add Panel properties</td>
</tr>
<tr>
<td>SizeX</td>
<td>
<ejs-numerictextbox ref="sizex" id="sizex" placeholder="Ex: 1" :value="value" :min="min" :max="max"
:floatLabelType="floatLabelType"></ejs-numerictextbox>
</td>
</tr>
<tr>
<td>SizeX</td>
<td>
<ejs-numerictextbox ref="sizey" id="sizey" placeholder="Ex: 1" :value="value" :min="min" :max="max"
:floatLabelType="floatLabelType"></ejs-numerictextbox>
</td>
</tr>
<tr>
<td>Row</td>
<td>
<ejs-numerictextbox ref="row" id="row" placeholder="Ex: 1" :value="value" :min="rowmin" :max="rowmax"
:floatLabelType="floatLabelType"></ejs-numerictextbox>
</td>
</tr>
<tr>
<td>Column</td>
<td>
<ejs-numerictextbox ref="column" id="column" placeholder="Ex: 1" :value="value" :min="colmin" :max="colmax"
:floatLabelType="floatLabelType"></ejs-numerictextbox>
</td>
</tr>
<tr>
<td>
<ejs-button id="add" class="e-primary" v-on:click.native="onAdd">Add Panel</ejs-button>
</td>
</tr>
</tbody>
</table>
<table id="remove">
<tbody>
<tr>
<td id="property">Remove panel properties</td>
</tr>
<tr>
<td> Panel Id </td>
<td>
<ejs-dropdownlist ref="dropdown" id='dropdown' placeholder='Select a id value'
:dataSource='data'></ejs-dropdownlist>
</td>
</tr>
<tr>
<td> <ejs-button id="removeButton" class="e-primary" v-on:click.native="onRemove">Remove
Panel</ejs-button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
// Import syncfusion button component from buttons package
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
// Import syncfusion numerictextbox component from inputs package
import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";
// Import syncfusion dropdownlist component from dropdowns package
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective,
"ejs-numerictextbox": NumericTextBoxComponent,
"ejs-button": ButtonComponent,
"ejs-dropdownlist": DropDownListComponent,
},
data: function () {
return {
floatLabelType: 'Never',
min: 1,
max: 5,
rowmin: 0,
rowmax: 5,
colmin: 0,
colmax: 4,
value: '',
data: ['Panel0', 'Panel1', 'Panel2', 'Panel3', 'Panel4', 'Panel5', 'Panel6'],
count: 7
};
},
methods: {
onAdd: function () {
var sizeX = this.$refs.sizex.$el.ej2_instances[0];
var sizeY = this.$refs.sizey.$el.ej2_instances[0];
var row = this.$refs.row.$el.ej2_instances[0];
var column = this.$refs.column.$el.ej2_instances[0];
var dropdownObject = this.$refs.dropdown.$el.ej2_instances[0];
var dashboardObj = this.$refs.dashboard.$el.ej2_instances[0];
var panel = [{
'id': "Panel" + this.count.toString(),
'sizeX': sizeX.value,
'sizeY': sizeY.value,
'row': row.value,
'col': column.value,
'content': "<div class='content'>" + this.count + "</div>"
}];
dropdownObject.dataSource.push("Panel" + this.count.toString());
dropdownObject.refresh();
this.count = this.count + 1;
dashboardObj.addPanel(panel[0]);
},
onRemove: function () {
var dropdownObject = this.$refs.dropdown.$el.ej2_instances[0];
var dashboardObj = this.$refs.dashboard.$el.ej2_instances[0];
dashboardObj.removePanel(dropdownObject.value);
dropdownObject.dataSource.splice(dropdownObject.dataSource.indexOf(dropdownObject.value), 1);
dropdownObject.value = null;
dropdownObject.refresh();
},
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
/* Dashboard Layout component styles */
#dashboard_default .e-panel .e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
#control_dash {
display: block;
width: 59%;
float: left;
}
#api_property {
display: inline-block;
margin: 10px;
}
#add {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
#remove {
border: 1px solid black;
padding: 10px;
margin: 10px;
width: 377px;
}
#property {
padding: 10px;
}
#removeButton {
border: 1px solid black;
padding: 10px;
margin: 10px;
width: 125px;
}
#dashboardElement {
padding-top: 30px;
}
#dashboard_default .e-panel {
transition: none !important;
}
</style>Refer to the Vue Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our Vue Dashboard Layout example to learn how to present and manipulate data.