Save restore in Angular Dashboard layout component

28 Dec 20246 minutes to read

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.

The following sample demonstrates how to save and restore the state of the panels using the serialize method. Click Save to store the panel settings and click Restore to restore the previously saved panel settings.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DashboardLayoutComponent, PanelModel } from '@syncfusion/ej2-angular-layouts';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
    imports: [DashboardLayoutModule, ButtonModule],
    standalone: true,
    selector: 'app-root',
    template: `
    <div class="control-section">
        <div class="inline" id="control">
            <ejs-dashboardlayout id='dashboard_default' #defaultLayout [columns]='5' [cellSpacing]='cellSpacing'
                [panels]='panels'>
            </ejs-dashboardlayout>
        </div>
        <div class="inline" id="properties">
            <button ejs-button id='saveBtn' #saveBtn cssClass="e-primary" (click)='onSaveClick($event)'>Save</button>
            <button ejs-button id='restoreBtn' #restoreBtn cssClass="e-flat e-outline" (click)='onrestoreClick($event)'>Restore</button>
        </div>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('defaultLayout') dashboard?: DashboardLayoutComponent;
    @ViewChild('saveBtn') saveBtn?: ButtonComponent;
    @ViewChild('restoreBtn') restoreBtn?: ButtonComponent;
    public restoreModel: any = [];
    public cellSpacing: number[] = [10, 10];
    public 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>' }
    ];

    onSaveClick(args: any) {
        this.restoreModel = this.dashboard?.serialize();
        this.restoreModel[0].content = '<div class="content">0</div>';
        this.restoreModel[1].content = '<div class="content">1</div>';
        this.restoreModel[2].content = '<div class="content">2</div>';
        this.restoreModel[3].content = '<div class="content">3</div>';
        this.restoreModel[4].content = '<div class="content">4</div>';
        this.restoreModel[5].content = '<div class="content">5</div>';
        this.restoreModel[6].content = '<div class="content">6</div>';
    }

    onrestoreClick(args: any) {
        this.dashboard!.panels = this.restoreModel;
    }
}
@import "node_modules/@syncfusion/ej2-base/styles/material.css";
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

#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;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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