Save and Restore Layout State in React Dashboard Layout Component
7 Oct 202511 minutes to read
The Dashboard Layout component provides the ability to save the current layout configuration and restore it later, enabling users to persist their 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 can be used to construct another dashboard with the same panel structure. This method returns the component’s current panel settings which can be used to construct a dashboard with the same layout settings.
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/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;
}
.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/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" />
<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 knows how to present and manipulate data.