HelpBot Assistant

How can I help you?

Save and restore in EJ2 TypeScript Dashboard Layout control

5 Mar 202612 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.

import { DashboardLayout } from '@syncfusion/ej2-layouts';
import { Button } from '@syncfusion/ej2-buttons';

let restoreModel: any;

// initialize Dashboard Layout control
let dashboard: DashboardLayout = new 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');

let saveBtn: Button = new Button({
    cssClass: "e-primary",
    content: "Save",
});
saveBtn.appendTo("#save");

let restoreBtn: Button = new Button({
    cssClass: "e-flat e-outline",
    content: "Restore",
});
restoreBtn.appendTo("#restore");

let saveElement = document.getElementById('save'); 
if (saveElement) {
    saveElement.addEventListener('click', () => {
        restorePanelModel();
    });
}

let restoreElement = document.getElementById('restore');
if (restoreElement) {
    restoreElement.addEventListener('click', () => {
        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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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 Dashboard Layout-->
        <div class="inline" id="properties">
            <button id="save"></button>
            <button id="restore"></button>
        </div>

    </div>
    <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 TypeScript Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our TypeScript Dashboard Layout example to knows how to present and manipulate data.

State Persistence in EJ2 TypeScript 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.

import { DashboardLayout } from '@syncfusion/ej2-layouts';

// initialize Dashboard Layout control
let dashboard: DashboardLayout = new DashboardLayout({
    cellSpacing: [10, 10],
    enablePersistence: true,
    columns: 6,
    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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>
    <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>