Save and restore in JavaScript Dashboard Layout control
18 Nov 201812 minutes to read
The current layout structure of the Dashboard Layout control can be obtained and saved to recreate a dashboard with the same panel arrangement using the serialize public method. This method returns the control’s current panel settings, which can be used to reconstruct a dashboard with the same layout configuration.
The following sample demonstrates how to save and restore the state of the panels using the serialize method. The panel’s settings are stored when the save button is clicked and restored from the previously saved settings when the restore button is clicked.
var restoreModel;
// initialize Dashboard Layout control
var dashboard = new ej.layouts.DashboardLayout({
cellSpacing: [20, 20],
columns: 5,
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>' }
],
created: restorePanelModel
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_default');
var saveBtn = new ej.buttons.Button({
cssClass: "e-primary",
content: "Save",
});
saveBtn.appendTo("#save");
var restoreBtn = new ej.buttons.Button({
cssClass: "e-flat e-outline",
content: "Restore",
});
restoreBtn.appendTo("#restore");
document.getElementById('save').onclick = function () {
restorePanelModel()
};
document.getElementById('restore').onclick = function () {
dashboard.panels = restoreModel;
};
function restorePanelModel() {
restoreModel = dashboard.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>';
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Dashboard Layout </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Dashboard Layout Control">
<meta name="author" content="Syncfusion">
<link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="inline" id="control">
<div id="dashboard_default"></div>
</div>
<!--element which is going to render the Dashboard Layout-->
<div class="inline" id="properties">
<button id="save"></button>
<button id="restore"></button>
</div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
<style>
#container {
margin: 0 auto;
width: 600px;
}
#dashboard_default .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;
}
#dashboard_default .e-panel {
transition: none !important;
}
</style>
</body>
</html>Refer to the JavaScript Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our JavaScript Dashboard Layout example to knows how to present and manipulate data.
State Persistence in JavaScript Dashboard Layout Control
State persistence enables the Dashboard Layout Control to retain the panel positions (row, col), width (sizeX), and height (sizeY) values in the browser’s localStorage for state maintenance, even if the browser is refreshed or if you navigate to another page within the browser. This behavior is controlled through the enablePersistence property, which defaults to false. When set to true, the panel positions and sizes are preserved after refreshing the page.
// initialize Dashboard Layout control
var dashboard = new ej.layouts.DashboardLayout({
cellSpacing: [10, 10],
enablePersistence: true,
columns: 5,
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>' }
]
});
// render initialized Dashboard Layout
dashboard.appendTo('#dashboard_default');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Dashboard Layout </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Dashboard Layout Control">
<meta name="author" content="Syncfusion">
<link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<!--element which is going to render the Dashboard Layout-->
<div id="dashboard_default"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
<style>
#container {
margin: 0 auto;
width: 500px;
}
#dashboard_default .e-panel .e-panel-container .content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 90px;
}
</style>
</body>
</html>