HelpBot Assistant

How can I help you?

Save and Restore Layout State in React Dashboard Layout Component

5 Mar 202611 minutes to read

The Dashboard Layout component provides the ability to save the current layout configuration and restore it later, enabling users to persist preferred panel arrangements across sessions or create reusable dashboard templates.

Save Layout State

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

Implementation Example

The following sample demonstrates how to save and restore panel states using the serialize method. The Save button stores the current panel settings, while the Restore button applies the previously saved configuration.

import { DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';
function App() {
    let dashboardObj;
    const cellSpacing = [20, 20];
    let 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>' }
    ];
    let restoreModel = [];
    function onRestore(args) {
        dashboardObj.panels = restoreModel;
    }
    function onSave(args) {
        restoreModel = dashboardObj.serialize();
        restoreModel[0].content = '<div class="content">0</div>';
        restoreModel[1].content = '<div class="content">1</div>';
        restoreModel[2].content = '<div class="content">2</div>';
        restoreModel[3].content = '<div class="content">3</div>';
        restoreModel[4].content = '<div class="content">4</div>';
        restoreModel[5].content = '<div class="content">5</div>';
        restoreModel[6].content = '<div class="content">6</div>';
    }
    return (<div>
      <div id='container'>
          <div className="inline" id="control">
              <DashboardLayoutComponent id='defaultLayout' created={onSave} ref={s => (dashboardObj = s)} cellSpacing={cellSpacing} panels={panels} columns={5}/>
          </div>
          <div className="inline" id="properties">
              <button className="e-btn e-primary" onClick={onSave}>Save</button>
              <button className="e-btn e-flat e-outline" id="restore" onClick={onRestore}>Restore</button>
          </div>
      </div>
  </div>);
}
export default App;
import {  DashboardLayoutComponent } from '@syncfusion/ej2-react-layouts';
import * as React from 'react';

function App(){
  let dashboardObj: DashboardLayoutComponent;
  const cellSpacing: number[] = [20, 20];
  let 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>' }
  ];
  let restoreModel: any = [];
  function onRestore(args: any): void {
    dashboardObj.panels = restoreModel;
  }
  function onSave(args: any): void {
    restoreModel = dashboardObj.serialize();
    restoreModel[0].content = '<div class="content">0</div>';
    restoreModel[1].content = '<div class="content">1</div>';
    restoreModel[2].content = '<div class="content">2</div>';
    restoreModel[3].content = '<div class="content">3</div>';
    restoreModel[4].content = '<div class="content">4</div>';
    restoreModel[5].content = '<div class="content">5</div>';
    restoreModel[6].content = '<div class="content">6</div>';
  }
  return (
  <div>
      <div id='container'>
          <div className="inline" id="control">
              <DashboardLayoutComponent id='defaultLayout' created={ onSave } ref={ s => (dashboardObj = s as DashboardLayoutComponent)} cellSpacing={cellSpacing}  panels={panels} columns={5} />
          </div>
          <div className="inline" id="properties">
              <button className="e-btn e-primary" onClick={onSave}>Save</button>
              <button className="e-btn e-flat e-outline" id="restore" onClick={onRestore}>Restore</button>
          </div>
      </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/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-layouts/styles/tailwind3.css";

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

.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;
}
<!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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-layouts/styles/tailwind3.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>

Refer to the React Dashboard Layout feature tour page for feature highlights. Also explore the React Dashboard Layout example to know how to display and manipulate data.