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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Panel state maintenance - restore

Thread ID:

Created:

Updated:

Platform:

Replies:

144878 May 27,2019 12:17 PM UTC May 28,2019 11:48 AM UTC Angular - EJ 2 1
loading
Tags: DashboardLayout
Grzegorz Golen
Asked On May 27, 2019 12:17 PM UTC


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 [Syncfusion]
Replied On 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>' 
        }]; 
        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. 
 
 
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, 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon