Persist Sate issue in Visual Studio LightSwitch

[Divyang]

Hi,
I am trying to implement the persist state feature of Kendo Grid in my LightSwitch app. For testing purpose I have two button on the screen, one is to save the state:
myapp.ContactsBrowse.saveGridState_execute = function (screen) {
    var grid = $("#grdContacts").data("kendoGrid");
    localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
};

another is to load the state:

myapp.ContactsBrowse.LoadGridState_execute = function (screen) {
    var grid = $("#grdContacts").data("kendoGrid");
    var options = localStorage["kendo-grid-options"];
    if (options) {
        grid.setOptions(JSON.parse(options));
    }
};

This works if I remain on the same screen, but if I go to a different screen & then come back & try to load the state is doesn't work.

[Alexander Valchev]

Hello Divyang,

I am not an expert in LightSwitch but I assume that something is clearing the localStorage where you save the settings. My recommendation is to put a break point after options are saved and before options are restored to verify the localStorage state.

Regards,
Alexander Valchev
Telerik

 

 

[Divyang]

Hi,

I've tried using a local variable as well but it didn't work either. Here is the link to get the project if that can help:
https://onedrive.live.com/redir?resid=FB0A0BB2D8AB713C!8005&authkey=!ADnxeEjJGBJM1xM&ithint=file%2c7z

Unfortunately because of the size of LightSwitch applications I am not able to attach it here.

I hope this will help.

Thanks.

[Alexander Valchev]

Hello Divyang,

Did you tried to put break points and examine the local storage state? I believe that this issue is not directly related to Kendo UI but to the way LightSwitch works. Could you confirm that the saved options are loaded and passed to the setOptions method correctly?

Regards,
Alexander Valchev
Telerik

 

 

[Divyang]

Hi,

Yes I can confirm that the saved options are loaded and passed correctly. I did some more tests with the same project that I've provided the link for. As I've mentioned earlier it works until I remain on the same page but as soon as I navigate away & return it can't load the grid state. Once I've a saved state, if I close visual studio and reopen the project, it can still load the state but only until the page is not changed.

[Alexander Valchev]

Hi Divyang,

I examined the project you provided. It seems that after you navigate back to the page that contains the Grid, the old Grid still exists in the DOM.

This seems to be something specific for the LightSwitch applications. Once again I am not familiar with LightSwitch, but the issue that you experience is connected with the fact that the Grid widget still persists in the DOM.

I tried to append it back to the element (I do not know why this does not happen automatically) and got it working.

myapp.ContactsBrowse.ScreenContent_render = function (element, contentItem) {

    if ($("#grdContacts").getKendoGrid()) {
        $("#grdContacts").appendTo($(element));
        return;
    }

    var gridContainer = $('<div id="grdContacts" />');
    //etc...

This seems to work fine, there is no need to even load the state. I am not sure however, is this correct in terms of LightSwitch.

An alternative solution is to destroy the existing Grid before re-creating the new one.

myapp.ContactsBrowse.ScreenContent_render = function (element, contentItem) {

    if ($("#grdContacts").getKendoGrid()) {
        $("#grdContacts").getKendoGrid().destroy();
        $("#grdContacts").remove();
    }

    var gridContainer = $('<div id="grdContacts" />');
    //etc...

Please test the solutions and let me know if the issue still persists.

Regards,
Alexander Valchev
Telerik

 

 

[Divyang]

I’ve applied both the methods & both works fine, so thank you very much.
I then did some research to check how LighSwitch remembers the grid state & figured out it is actually the JQuery Mobile which does the work. I think it stores the page in the cache and loads it when the page is called again? I am not an export of JQM, but found some info & tried “$(element).trigger("create");”, “data-dom-cache” ect. but it didn’t work. It could be down to the lack of my knowledge.
One question though: why the grid doesn’t go back to the preserved state when we explicitly try it by clicking the Load State button as it doesn’t throw any error either.

Thank again for the solution, I really appreciate it.

[Divyang]

UPDATE:
After applying both the methods into a bit larger application, I found that the first approach (to append the grid back to element) is not reliable, because of the cache management I think. The JQuery Mobile manages the cache of the pages & it is not guaranteed that the page will remain in the cache. Although there must be a way to control it  but in an application with 60-70 or more pages I think it is better to leave the caching untouched unless you are 100% sure that the user will surely visit certain pages.

For my app I am going with the second approach (to destroy the grid & clear the DOM). At the moment I am not sure how much effect it will have on the performance but at least I’ll have the control over the grid’s state.