Feature request: saveState() and loadState()

[NoiZyParticipant]

Hi,

I use many of your components but until now your grid plugin fight in my case against the “big” jqGrid.
But your grid is coming close in the past few months, but one feature is not supported by any grid plugin.

I add this feature request also to the jqGrid plugin authors but the didn’t even ask me, what is realy bad!
I hope you will answer me.

My idea is to have 2 methods to save and load the state of the grid.

– Which column is order how
– Which row are selected at last
– Inline filter
– Footer information (Rowcount, Selected Page)

That could be saved into the new HTML 5 Local Storage.
So, if I leave the page with the grid and come back, my grid is still the same as I leave it.

That would be such a great feature!
I hope you consider it.

Best regards

[Peter StoevKeymaster]

Hi Noizy,

Thank you for the feature request. I suppose you can achieve that with Cookies, too. Bind to the Grid’s event, save the information in cookies and when you reload the page, check the cookies and initialize the Grid with the appropriate settings.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[NoiZyParticipant]

Thanks for your fast answer. (That is great support!)

1. Correct, which column is sorted how (descanding / ascanding)
3. With Inline Filter I mean the filter row inside the grid.

OK, you can get all this information with multiple single methods, you can to that also with jqGrid.
What I mean, is ONE function .saveState() which automaticly save all this single values in one HTML 5 Local Storage value with the id from the grid div or under a specified name: .saveState(‘GreatGridTest’)

And if I leave the page and come back to the page I execute on document.ready: .loadState(‘GreatGridTest’) and my grid looks like before I leave the page.

I have many examples where I need this.
We have a big website which have for example a search for complaints and if you sort for date of complain and filter for complaints for specific product and click on one complaint, you will be redirected to the complaint, if you work on that and close it and return to the search page you want to continue your work without to do all the sorting and filtering again.

I hope I can explain my self, my english is not that good. ;(

Best regards

[Peter StoevKeymaster]

Hi NoiZy,

Thanks for the clarification!

I will create a work item about that feature. I agree that it would be great to have it in jqxGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kuberasamratParticipant]

Hi Peter,

Now we are able to do the following things using autosavestate and autoloadstate properties. But I am not able to save the state of column reorder functionality. Can we save that property or not? If yes please provide me the solution.

[Peter StoevKeymaster]

Hi kuberasamrat,

Which version of jQWidgets do you use?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kuberasamratParticipant]

Hi Peter,

I am using Version 2.6

[Peter StoevKeymaster]

Hi kuberasamrat,

Save/Load State of Reordered Columns is available in jQWidgets 2.7 or at least the feature works on my side.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kuberasamratParticipant]

 $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/beverages.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columnsreorder: true,
				autosavestate:true,
				autoloadstate:true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 200 },
                  { text: 'Beverage Type', datafield: 'type', width: 200 },
                  { text: 'Calories', datafield: 'calories', width: 100 },
                  { text: 'Total Fat', datafield: 'totalfat'}
                ]
            });
            // trigger the columnreordered event.
            $("#jqxgrid").on('columnreordered', function (event) {
                var column = event.args.columntext;
                var newindex = event.args.newindex
                var oldindex = event.args.oldindex;
                $("#eventlog").text("Column: " + column + ", " + "New Index: " + newindex + ", Old Index: " + oldindex);
            });
        });

I have taken the columns reordering example from your jqwidgets2.7 version and added autosavestate and autoloadstate properties “storage header file” and verified. but it is not working.

[Peter StoevKeymaster]

Hi kuberasamrat,

Have you tried that with Save/Load buttons as in the Save/Load state sample?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kuberasamratParticipant]

Hi Peter,

I have tried Save/Load state sample.

I felt it was not working as intended to.

Step1) Default View
Ship Name Ship City Ship Country

Step 2) I have changed the columns order and clicked save state.

Ship City Ship Name Ship Country

Step 3)
Refreshed the browser

got into default view

Step 4) Clicked load state button
Ship City Ship Country Ship Name

Step 5)
Clicked load state button
Ship City Ship Name Ship Country
(equal to Step2)

But in step 4 itself it has to load the required state. Please check. Lets say these are working perfect. Why autoloadstate and autosave state are not working?

[Peter StoevKeymaster]

Hi kuberasamrat,

We were able to reproduce the reported behavior and created a work item about it. It will be resolved in a future version.
Thank you for the valuable feedback.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kuberasamratParticipant]

Hi Peter,

Can we store the settings in db and retrieve back. If so how to do?

[Peter StoevKeymaster]

Hi kuberasamrat,

We do not have anything implemented about that. I suppose that by using the getState method, you can get the state(which is a JSON object) and via the jQuery’s Ajax, you can send the data to your server. Also with Ajax, you can get the state at a later point.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kuberasamratParticipant]

Peter,

Problem Statement:

I am using autosavestate and autoloadstate as true.

If I move to page:1 to 2 and modify page size 10 to 20 and then refresh the page. Data is coming from the back end but it is not rendering in the UI. and hungs up the grid. on repeated refreshes also its not working.

[Author]

Posts