Adding and Removing Panels in React Dashboard Layout Component
7 Oct 202524 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 by 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. 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 { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
let count = 7;
let cellSpacing = [10, 10];
let resize = ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'];
let 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>' }
];
let data = ["Panel0", "Panel1", "Panel2", "Panel3", "Panel4", "Panel5", "Panel6"];
let dashboardObj;
let sizeXObj;
let sizeYObj;
let rowObj;
let colsObj;
let paneObj;
// Adding new panels for DashboardLayout
function onAdd(args) {
//let proxy = this;
let panel = [{
'id': count.toString() + '_layout', 'sizeX': sizeXObj.value, 'sizeY': sizeYObj.value, 'row': rowObj.value, 'col': colsObj.value,
content: '<div class="content">' + count.toString() + '</div>'
}];
dashboardObj.addPanel(panel[0]);
count = count + 1;
}
// Removeing selected panels for DashboardLayout
function onRemove(args) {
dashboardObj.removePanel(paneObj.value.toString());
}
return (<div id='container'>
<div className="inline" id="control">
<DashboardLayoutComponent id='dashboard_layout' ref={s => (dashboardObj = s)} cellSpacing={cellSpacing} panels={panels} allowResizing={true} columns={5} resizableHandles={resize}/>
</div>
<div className="inline" id="properties">
<table>
<tbody>
<tr>
<td>SizeX</td>
<td> <NumericTextBoxComponent ref={s => (sizeXObj = s)} className="col-sm-4" placeholder={"Ex: 10"} value={1} min={1} max={5} floatLabelType="Never" id="sizeX"/></td>
</tr>
<tr>
<td>SizeY</td>
<td> <NumericTextBoxComponent ref={s => (sizeYObj = s)} className="col-sm-4" placeholder={"Ex: 10"} value={1} min={1} max={5} floatLabelType="Never" id="sizeY"/></td>
</tr>
<tr>
<td>Row</td>
<td> <NumericTextBoxComponent ref={s => (rowObj = s)} className="col-sm-4" placeholder={"Ex: 10"} value={0} min={0} max={5} floatLabelType="Never" id="row"/></td>
</tr>
<tr>
<td>Column</td>
<td> <NumericTextBoxComponent ref={s => (colsObj = s)} className="col-sm-4" placeholder={"Ex: 10"} value={0} min={0} max={4} floatLabelType="Never" id="column"/></td>
</tr>
<tr>
<td />
<td>
<button onClick={onAdd}>Add Panel</button>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Id</td>
<td> <DropDownListComponent ref={s => (paneObj = s)} className="col-sm-4" placeholder={"panel id"} dataSource={data} floatLabelType="Never" id="panel_id"/></td>
</tr>
<tr>
<td />
<td>
<button onClick={onRemove}>Remove Panel</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>);
}
export default App;import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
let count = 7;
let cellSpacing = [10, 10];
let resize = ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'];
let 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>' }
];
let data = ["Panel0", "Panel1", "Panel2", "Panel3", "Panel4", "Panel5", "Panel6"];
let dashboardObj:DashboardLayoutComponent;
let sizeXObj:NumericTextBoxComponent;
let sizeYObj:NumericTextBoxComponent;
let rowObj:NumericTextBoxComponent;
let colsObj:NumericTextBoxComponent;
let paneObj:DropDownListComponent;
// Adding new panels for DashboardLayout
function onAdd() {
//let proxy = this;
let panel = [{
'id': count.toString() + '_layout', 'sizeX': sizeXObj.value, 'sizeY': sizeYObj.value, 'row': rowObj.value, 'col': colsObj.value,
content: '<div class="content">' + count.toString() + '</div>'
}];
(dashboardObj as any).addPanel(panel[0]);
count = count + 1;
}
// Removeing selected panels for DashboardLayout
function onRemove() {
if (paneObj.value) {
(dashboardObj as any).removePanel(paneObj.value.toString());
}
}
return (<div id='container'>
<div className="inline" id="control">
<DashboardLayoutComponent id='dashboard_layout' ref={s => (dashboardObj = s)} cellSpacing={cellSpacing} panels={panels} allowResizing={true} columns={5} resizableHandles={resize}/>
</div>
<div className="inline" id="properties">
<table>
<tbody>
<tr>
<td>SizeX</td>
<td> <NumericTextBoxComponent ref={s => (sizeXObj = s)} className="col-sm-4" placeholder={"Ex: 10"} value={1} min={1} max={5} floatLabelType="Never" id="sizeX"/></td>
</tr>
<tr>
<td>SizeY</td>
<td> <NumericTextBoxComponent ref={s => (sizeYObj = s)} className="col-sm-4" placeholder={"Ex: 10"} value={1} min={1} max={5} floatLabelType="Never" id="sizeY"/></td>
</tr>
<tr>
<td>Row</td>
<td> <NumericTextBoxComponent ref={s => (rowObj = s)} className="col-sm-4" placeholder={"Ex: 10"} value={0} min={0} max={5} floatLabelType="Never" id="row"/></td>
</tr>
<tr>
<td>Column</td>
<td> <NumericTextBoxComponent ref={s => (colsObj = s)} className="col-sm-4" placeholder={"Ex: 10"} value={0} min={0} max={4} floatLabelType="Never" id="column"/></td>
</tr>
<tr>
<td />
<td>
<button onClick={onAdd}>Add Panel</button>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Id</td>
<td> <DropDownListComponent ref={s => (paneObj = s)} className="col-sm-4" placeholder={"panel id"} dataSource={data} floatLabelType="Never" id="panel_id"/></td>
</tr>
<tr>
<td />
<td>
<button onClick={onRemove}>Remove Panel</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>);
}
export default App;import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";
#container {
margin: 0 auto;
width: 800px;
}
.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%;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="App.css">
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>You can refer to our React Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our React Dashboard Layout example to learn how to present and manipulate data.