Search results

State Maintenance in React Dashboard Layout component

The current layout structure of the Dashboard Layout component can be obtained and saved to construct another dashboard with same panel structure using the serialize public method of the component. This method returns the component’s current panel setting which can be used to construct a dashboard with the same layout settings.

The following sample demonstrates how to save and restore the state of the panels using the serialize method. Click Save to store the panel’s settings and click Restore to restore the previously saved panel settings.

Source
Preview
App.tsx
index.tsx
index.html
App.css
App.jsx
index.jsx
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import {  DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

export default class App extends React.Component<{}, {}> {
  public dashboardObj: DashboardLayoutComponent;
  public cellSpacing: number[] = [20, 20];
  public panels: any =   [
    { "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content:'<div class="content">0</div>' },
    { "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content:'<div class="content">1</div>' },
    { "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content:'<div class="content">2</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content:'<div class="content">3</div>' },
    { "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content:'<div class="content">4</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content:'<div class="content">5</div>' },
    { "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content:'<div class="content">6</div>' }
  ];
  public restoreModel: any = [];

  constructor(props: any) {
    super(props);
    this.onRestore = this.onRestore.bind(this);
    this.onSave = this.onSave.bind(this);
  }

  public onRestore(args: any): void {
    this.dashboardObj.panels = this.restoreModel;
  }

  public onSave(args: any): void {
    this.restoreModel = this.dashboardObj.serialize();
    this.restoreModel[0].content = '<div class="content">0</div>';
    this.restoreModel[1].content = '<div class="content">1</div>';
    this.restoreModel[2].content = '<div class="content">2</div>';
    this.restoreModel[3].content = '<div class="content">3</div>';
    this.restoreModel[4].content = '<div class="content">4</div>';
    this.restoreModel[5].content = '<div class="content">5</div>';
    this.restoreModel[6].content = '<div class="content">6</div>';
  }


  public render() {
    return (
    <div>
        <div id='container'>
            <div className="inline" id="control">
                <DashboardLayoutComponent id='defaultLayout' created={ this.onSave } ref={ s => (this.dashboardObj = s as DashboardLayoutComponent)} cellSpacing={this.cellSpacing}  panels={this.panels} columns={5} />
            </div>
            <div className="inline" id="properties">
                <ButtonComponent onClick={this.onSave}  cssClass="e-primary" >Save</ButtonComponent>
                <ButtonComponent id="Restore" onClick={this.onRestore} cssClass="e-flat e-outline">Restore</ButtonComponent>
            </div>
        </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" />
    <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-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/material.css";

#container {
  margin: 0 auto;
  width: 600px;
}

#defaultLayout .e-panel .e-panel-container .content {
  vertical-align: middle;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 90px;
}

div#properties {
  width: 205px;
  margin-left: 15px;
  padding: 15px;
  position: absolute;
}

.inline {
  display: inline-block;
}

div#control {
  width: 500px;
}

#Restore {
    margin-left: 5px;
}
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.cellSpacing = [20, 20];
        this.panels = [
            { "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">0</div>' },
            { "sizeX": 3, "sizeY": 2, "row": 0, "col": 1, content: '<div class="content">1</div>' },
            { "sizeX": 1, "sizeY": 3, "row": 0, "col": 4, content: '<div class="content">2</div>' },
            { "sizeX": 1, "sizeY": 1, "row": 1, "col": 0, content: '<div class="content">3</div>' },
            { "sizeX": 2, "sizeY": 1, "row": 2, "col": 0, content: '<div class="content">4</div>' },
            { "sizeX": 1, "sizeY": 1, "row": 2, "col": 2, content: '<div class="content">5</div>' },
            { "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">6</div>' }
        ];
        this.restoreModel = [];
        this.onRestore = this.onRestore.bind(this);
        this.onSave = this.onSave.bind(this);
    }
    onRestore(args) {
        this.dashboardObj.panels = this.restoreModel;
    }
    onSave(args) {
        this.restoreModel = this.dashboardObj.serialize();
        this.restoreModel[0].content = '<div class="content">0</div>';
        this.restoreModel[1].content = '<div class="content">1</div>';
        this.restoreModel[2].content = '<div class="content">2</div>';
        this.restoreModel[3].content = '<div class="content">3</div>';
        this.restoreModel[4].content = '<div class="content">4</div>';
        this.restoreModel[5].content = '<div class="content">5</div>';
        this.restoreModel[6].content = '<div class="content">6</div>';
    }
    render() {
        return (<div>
        <div id='container'>
            <div className="inline" id="control">
                <DashboardLayoutComponent id='defaultLayout' created={this.onSave} ref={s => (this.dashboardObj = s)} cellSpacing={this.cellSpacing} panels={this.panels} columns={5}/>
            </div>
            <div className="inline" id="properties">
                <ButtonComponent onClick={this.onSave} cssClass="e-primary">Save</ButtonComponent>
                <ButtonComponent id="Restore" onClick={this.onRestore} cssClass="e-flat e-outline">Restore</ButtonComponent>
            </div>
        </div>
      </div>);
    }
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));