How to store/retrieve DahsboardLayout persistence values into/from database

[Nikunj Panchal]

Hello,

I enabled persistence setting (enablePersistence=true) for my Dashboard Layout component. With this, I received panels information in localStorage.

I have following questions:

1. Initially when my Home screen loads, default portlets are shown on the screen. Then I removed portlet using removePanel method which updates my localStorage automatically. I have a Reset button which remove the localStroage and update the item with defaultportlets using the below code but it is not working. How can we do with the Syncfusion React component?

    window.localStorage.removeItem('DashboardLayoutsc_dashboard');

    window.localStorage.setItem('DashboardLayoutsc_dashboard', JSON.stringify(this.defaultPortlets));

    window.location.reload();

          

1. We are converting our project from ExtJS to React using Syncfusion component. ExtJS provides state provider (https://docs.sencha.com/extjs/6.0.2/classic/Ext.state.Provider.html) which could be use  to store state on server side/ localStorage.  Is syncfusion has similar like this where we can store information on Database Instead of LocalStorage. Do you have any example for this? 

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Nikunj,

 

Thanks for contacting Syncfusion support.

 

Solution for Query 1:

 

We have looked into your query on maintaining the state of the panels in the Dashboard Layout component. To achieve your requirement, instead of using window.localStorage, you can use the serialize() method (This method returns the component’s current panel setting which can be used to construct a dashboard with the same layout settings) of the Dashboard Layout component to keep the model object of the current panels state of the Dashboard Layout. Then, on resetting the component you can recreate with same panels state using that model object.  However, the panel header information, panel content information cannot be maintained. So, to update the panels with same content, you can use the updatePanel() method.

 

Please, check out the below sample which demonstrates the above mention details.

 

State-Maintenance: https://ej2.syncfusion.com/react/documentation/dashboard-layout/state-maintenance/?no-cache=1#panel-state-maintenance

Please, let us know if you need any further assistance.

 

Solution for Query 2:

 

We are currently analyzing about your expected requirement. We will update you with further details about this query in one business day on 29 October 2019.

 

Regards,

Shameer Ali Baig S.

 

 

 

[Keerthana Rajendran]

  

Hi Nikunj, 

 

Thanks for the patience. 

 

Query :  Is syncfusion has similar like this where we can store information on Database Instead of LocalStorage. Do you have any example for this?  

 

No, we have utilized only local storage for maintaining the state of the components only on page refresh and we don’t have a state provider similar to extjs. Please let us know if any concern 

 

Regards, 

Keerthana.