Search results

State Maintenance in Angular Dashboard Layout component

20 Oct 2021 / 2 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. Click Save to store the panel’s settings and click Restore to restore the previously saved panel settings.

Source
Preview
app.component.ts
app.template.html
app.module.ts
main.ts
default-style.css
Copied to clipboard
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DashboardLayoutComponent, PanelModel } from '@syncfusion/ej2-angular-layouts';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
    selector: 'app-root',
    styleUrls: ['app/default-style.css'],
    templateUrl: 'app/app.template.html',
    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() {
      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() {
      this.dashboard.panels = this.restoreModel;
    }
}
Copied to clipboard
<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>
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the DashboardLayoutModule for the Dashboard Layout component
import { DashboardLayoutModule } from '@syncfusion/ej2-angular-layouts';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    //declaration of ej2-angular-layouts module into NgModule
    imports: [BrowserModule, DashboardLayoutModule, ButtonModule ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#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;
  }

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.