Save restore in EJ2 JavaScript Dashboard layout control

8 May 20235 minutes to read

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. Here, the panel’s settings are stored on the save button click and restored to the previously saved panel setting on clicking the restore button.

// initialize dashboardlayout component
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 dashboardlayout
dashboard.appendTo('#dashboard_default');

var restoreModel;

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 DashboardLayout </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 DashboardLayout Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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 dashboardlayout-->
        <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>
</body></html>

You can refer to our JavaScript Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Dashboard Layout example to knows how to present and manipulate data.