Search results

State Maintenance in JavaScript (ES5) Dashboard Layout control

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.

Source
Preview
index.js
index.html
index.css
// 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="//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-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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 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>
#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;
}