Losing sort and filter with autoloadstate

[TP_DTNAParticipant]

I’m utilizing the jqxGrid autosavesate and autoloadstate features on version 3.9.1. They mostly work. At some point, the sorting and filtering are lost. I watch the local storage as I use the grids, and I see the parameters change.

If I apply a sort, I see that reflected in local storage. So far so good.

Reload the page. At the start, everything is in local storage correctly. Still good.

I initialize a grid without the source, which will come later. bindingcomplete event triggers. Sort is still in local storage. Still good.

I assign a dataAdapter to the grid’s source, which makes an ajax call and processes it with the downloadComplete handler, then the bindingcomplete event is triggered a second time. The grid’s sortcolumn property in local storage is null at this point, and column sort of the grid is lost. Not good.

This is happening with filters too, but everything else is fine! Column widths and visibility check out okay.

Where did the sort/filter info go? How can I keep it from getting lost?

Sorry that I don’t have a fiddle ready to demonstrate this. I’m not at liberty to paste the actual code I’m using, but I might be able to create an example of this to illustrate if you need.

Thank you.

[ivailoParticipant]

Hi TP_DTNA,

Please send a jsEditor link with your example.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[TP_DTNAParticipant]

I nearly have an example worked out, but I’m having a hard time finding an accessible json table data source to effectively reproduce this issue. I tried one source I found online, but I’m stuck with http-from-https or “No Access-Control-Allow-Origin header” errors. Is there a convenient URL I can plug in to the dataAdapter’s source to use in the jsEditor that gives json table data? Most of the examples I see on the docs use local data sources, and I want to reproduce my setup to better reproduce the error.

If I can get that, I’ll have an example for you soon after. Thanks.

Edit: here is what I have started. I’m discarding the ajax request results entirely and returning hardcoded table data in the downloadComplete function. But the grid is showing “No data to display.” I don’t see what I’m missing. I have the grid parameters, the data source, the data adapter connecting to the source, and the grid connecting to the data adapter. I’m not even able to demo the bug I’m trying to show yet because I’m not getting this to work either. https://www.jseditor.io/?key=grid-loadstate-losing-filter-sort-bug

[TP_DTNAParticipant]

Okay, I found a source of beverages to use, and my example is complete and working, but I’m not reproducing the error in the jsEditor. I’ll keep trying and see what’s different between my example and the real implementation that I can’t paste.

[TP_DTNAParticipant]

Ah, I got the error to reproduce! If you re-run the code after modifying the grid (filters, sorts, column widths), you’ll see that the sort and filters are lost, but the column widths are retained.

Link: https://www.jseditor.io/?key=grid-loadstate-losing-filter-sort-bug

JS code:

$(document).ready(function () {
var gridSource = {
    url: '/jquery-widgets-demo/demos/sampledata/beverages.txt',
    type: 'GET',
  
    datatype: 'json',

    datafields: [
        { name: 'calories' },
        { name: 'id' },
        { name: 'name' },
        { name: 'totalfat' },
        { name: 'protein' },
    ],
  
    downloadComplete: function(data, status, jqXHR) {
        return data;
    }
}

var DA = new $.jqx.dataAdapter(gridSource); 

var gridOptions = {
    autosavestate: true,
    autoloadstate: true,
    columnsresize: true,
    sortable:      true,
    selectionmode: 'singlerow',
    filterable:    true,
    showfilterrow: true,
    
    columns: [
        { text: 'calories', datafield: 'calories' },
        { text: 'id'      , datafield: 'id' },
        { text: 'name'    , datafield: 'name' },
        { text: 'protein' , datafield: 'protein' },
        { text: 'totalfat', datafield: 'totalfat' },
    ]
}
// fine here
$('#theGrid').jqxGrid(gridOptions);
// I expect grid's sort and filter states to be lost during this
$('#theGrid').jqxGrid('source', DA);
});

[ivailoParticipant]

Hi TP_DTNA,

Thanks for the feedback.
We will investigate this behavior.
We also recommend to initialize the grid with source. Then you will not have such a problem.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[TP_DTNAParticipant]

Funny, most of the official answers I see about the autostate features sound like “it doesn’t work very well, don’t use it.” Could save a lot of people some time if it said as much in the documentation along with a list of events to bind to, so that one could implement their own more easily. I’m already using a hack to strip selection state from being saved.

Instead of waiting for a fix, I simply hacked the jqxgrid.js at the propertyChangedHandler in the ‘source’ case to call updatebounddata() with ‘sort’ and ‘filter’ string arguments to get what I need. If anyone complains, I’ll remind them that we have fancy paid support and that you’re looking into a solution.

[TP_DTNAParticipant]

Well… that was a fine solution until other grids I hadn’t previously tested start having errors in the _preparecolumngroups and _render methods. It will be nice to get this fixed.

[TP_DTNAParticipant]

“We also recommend to initialize the grid with source. Then you will not have such a problem.”

That works for the first time I load a grid (except for the ones that fail silently, WHY!!?). Subsequent updates done this way still lose the sort and filter.

Is there better way to reload a grid with new data than updating its source property? I’ve seen this pattern used many times in the examples. Should I destroy and create a new grid every time? Stick exclusively to using ‘updatebounddata’? I have my grid initialization separate from the parts that utilize them later, updating the source/dataAdpater upon user input. I’ll need to add more code to check if they’re being used for the first time or not in order to implement these workarounds if that’s what I need to do.

*moments later*
I tried coding some extra logic to detect first/later use: initialize grid with an established source on first use, use updatebounddata (with sort and filter) on subsequent use. Other than the problems I’m having getting some grids to initialize (probably my fault, but tough to debug!), this seems to be an effective, if messy, workaround.

I’d still appreciate a proper fix, but at least I feel a little less stuck now.

Thanks for pointing me in a useful direction!

[Author]

Posts