Search results

Adding or Removing Panels in React 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.

dashboard.removeAll();

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.

Source
Preview
App.tsx
index.tsx
index.html
App.css
App.jsx
index.jsx
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';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.count = 7;
        this.cellSpacing = [10, 10];
        this.resize = ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'];
        this.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>' }
        ];
        this.data = ["Panel0", "Panel1", "Panel2", "Panel3", "Panel4", "Panel5", "Panel6"];
        this.onAdd = this.onAdd.bind(this);
        this.onRemove = this.onRemove.bind(this);
    }
    // Adding new panels for DashboardLayout
    onAdd(args) {
        let proxy = this;
        let panel = [{
                'id': this.count.toString() + '_layout', 'sizeX': this.sizeXObj.value, 'sizeY': this.sizeYObj.value, 'row': this.rowObj.value, 'col': this.colsObj.value,
                content: '<div class="content">' + this.count.toString() + '</div>'
            }];
        proxy.dashboardObj.addPanel(panel[0]);
        this.count = this.count + 1;
    }
    // Removeing selected panels for DashboardLayout
    onRemove(args) {
        this.dashboardObj.removePanel(this.paneObj.value.toString());
    }
    render() {
        return (<div id='container'>
        <div className="inline" id="control">
          <DashboardLayoutComponent id='dashboard_layout' ref={s => (this.dashboardObj = s)} cellSpacing={this.cellSpacing} panels={this.panels} allowResizing={true} columns={5} resizableHandles={this.resize}/>
        </div>
        <div className="inline" id="properties">
            <table>
              <tbody>
                <tr>
                    <td>SizeX</td>
                    <td> <NumericTextBoxComponent ref={s => (this.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 => (this.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 => (this.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 => (this.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={this.onAdd}>Add Panel</button>
                    </td>
                </tr>
              </tbody>
            </table>
            <table>
              <tbody>
                <tr>
                    <td>Id</td>
                    <td> <DropDownListComponent ref={s => (this.paneObj = s)} className="col-sm-4" placeholder={"panel id"} dataSource={this.data} floatLabelType="Never" id="panel_id"/></td>
                </tr>
                <tr>
                    <td />
                    <td>
                        <button onClick={this.onRemove}>Remove Panel</button>
                    </td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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">
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>  
</body>
</html>
@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;
}

#dashboard_layout .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 { 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';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.count = 7;
        this.cellSpacing = [10, 10];
        this.resize = ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'];
        this.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>' }
        ];
        this.data = ["Panel0", "Panel1", "Panel2", "Panel3", "Panel4", "Panel5", "Panel6"];
        this.onAdd = this.onAdd.bind(this);
        this.onRemove = this.onRemove.bind(this);
    }
    // Adding new panels for DashboardLayout
    onAdd(args) {
        let proxy = this;
        let panel = [{
                'id': this.count.toString() + '_layout', 'sizeX': this.sizeXObj.value, 'sizeY': this.sizeYObj.value, 'row': this.rowObj.value, 'col': this.colsObj.value,
                content: '<div class="content">' + this.count.toString() + '</div>'
            }];
        proxy.dashboardObj.addPanel(panel[0]);
        this.count = this.count + 1;
    }
    // Removeing selected panels for DashboardLayout
    onRemove(args) {
        this.dashboardObj.removePanel(this.paneObj.value.toString());
    }
    render() {
        return (<div id='container'>
        <div className="inline" id="control">
          <DashboardLayoutComponent id='dashboard_layout' ref={s => (this.dashboardObj = s)} cellSpacing={this.cellSpacing} panels={this.panels} allowResizing={true} columns={5} resizableHandles={this.resize}/>
        </div>
        <div className="inline" id="properties">
            <table>
              <tbody>
                <tr>
                    <td>SizeX</td>
                    <td> <NumericTextBoxComponent ref={s => (this.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 => (this.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 => (this.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 => (this.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={this.onAdd}>Add Panel</button>
                    </td>
                </tr>
              </tbody>
            </table>
            <table>
              <tbody>
                <tr>
                    <td>Id</td>
                    <td> <DropDownListComponent ref={s => (this.paneObj = s)} className="col-sm-4" placeholder={"panel id"} dataSource={this.data} floatLabelType="Never" id="panel_id"/></td>
                </tr>
                <tr>
                    <td />
                    <td>
                        <button onClick={this.onRemove}>Remove Panel</button>
                    </td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));