We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Panel state maintenance - restore

In my project I use DashboardComponentLayout.
I would like to write data about dashboard panels such as content, location and size on the server. Thanks to the getPersistData() method, I can download such a set of data and store it on the server (endpoint, API). How can I load the download data from the server (dynamically) to the dashboard object and specific panels? I tried to use your example in the documentation: https://ej2.syncfusion.com/angular/documentation/dashboard-layout/save-restore/?no-cache=1#panel-state-maintenance, but it only applies to local data and not dynamically built.

I will be grateful for the help and guidance for solving the problem.

1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team May 28, 2019 11:48 AM UTC

Hi Grzegorz, 
Greetings from Syncfusion support. 
Your reported scenario is similar to our documentation link provided example. You can add the panels to the Dashboard Layout dynamically using the below methods, 
Method – 1: “Assign panels to the panels property of Dashboard Layout dynamically” 
Panels can be dynamically added to the Dashboard Layout by assigning them to the panels property of the Dashboard Layout. Please check below code snippet, 
// Button click event function 
assignPanel() { 
        // Local data is used here, you can replace it with the data returned from server 
        this.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": 1, "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": 1, "sizeY": 1, "row": 1, "col": 4, content: '<div class="content">4</div>' }, 
        // Assign the panels data to the dashboard layout’s panel property 
        this.dashboardObject.panels = this.panels; 
Method – 2: “Add panels using addPanel method” 
You can also use Dashboard Layout’s addPanel method to dynamically add panels to the Dashboard Layout. Please check below code snippet, 
addPanel() { 
        // Local data is used here, you can replace it with the data returned from server 
        let panel: PanelModel[] = [{ 
            id: 'panel_0' + this.count.toString(), 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, 
            content: '<div class="content">0' + this.count.toString() + '</div>' 
        // Here count is used simply for calculating the total panels dynamically added 
In the above code blocks, we have used local data for panels, and in that place,  you can use the data returned from server. 
Currently, the Dashboard Layout does not have method to update a particular panel dynamically. We have already considered this support for updating particular panels in Dashboard Layout and we will include it our upcoming 2019 Vol 2 Main release. You can track this through our feedback portal link. 
However, you can achieve this requirement by adding id to each panel on adding initially like given in below code snippet, 
this.panels = [ 
            { "id": ’panel_0’, "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">0</div>' }, 
After that get the dashboard panels and store it in a local variable. Then, update the required panel using its id in the locally stored variable and then assign this local variable to the panel’s property. 
let panels: PanelModel[] = this.dashboardObject.panels; 
while (i < panels.length) {    
          // Check panels using its id 
          if (this.dashboardObject.panels[i].id === "panel_0") { 
              // Update the panel data 
              panels[i] = [{ id: "panel_0", "sizeX": 1, "sizeY": 1, "row": 0, "col": 0, content: '<div class="content">01</div>' }] 
this.dashboardObject.panels = panels; 
We have prepared a sample based on the above queries for your reference. Please find it below, 
Please let us know, if you have any concern on this. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon