Panel state maintenance - restore

[Grzegorz Golen]

Hi, 

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.

[Ashokkumar Balasubramanian]

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>' 

        }]; 

        this.dashboardObject.addPanel(panel[0]); 

        // Here count is used simply for calculating the total panels dynamically added 

        this.count++; 

    } 

 

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. 

 

https://www.syncfusion.com/feedback/6562/support-to-update-individual-panels-in-dashboard-layout 

 

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>' }] 

              break; 

         } 

         i++; 

}  

this.dashboardObject.panels = panels; 

 

We have prepared a sample based on the above queries for your reference. Please find it below, 

 

http://www.syncfusion.com/downloads/support/forum/144878/ze/Add_panels_dynamically-355109124  

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B.