Way to preserve filters on data reload?

Webix JS
1

Hi,

I have some grids that have a refresh button on them, which re-loads the data on the grid from my server.

My refresh is a simple:

grid.clearAll();
grid.load(url);

I know I could put a grid.filterByAll() in my refresh function or onAfterLoad, but my filters are serverFilters, so that puts extra, unnecessary strain on the server (because it throw two requests to the server instead of just one).

Is there a way for filters to persist on reload (instead of using filterByAll())? So when I refreshed the grid it would re-load with the same filters applied?

Thanks

2

What you can do is to put the filter on your url.

So something like this : url + “?filter[name]=someone”


this is what I do on my code :

function getTableFilterQuery(table) {
    var str = '';
    for(var id in table._filter_elements) {
        var fil = table.getFilter(id);
        if(fil != null && fil.value != '')
            str += '&filter[' + id + ']='+fil.value;
    }
    return str;
}

//when reload your table :
var url = $$(tableId).data.url + getTableFilterQuery($$(tableId));
$$(tableId).clearAll()
$$(tableId).load(url);
3

Thanks a ton apin! I didn’t realize Webix automatically took filters sent through the URL

4

I refresh datatable using filterByAll with serverside loading, sorting and filtering and everything is working perfectly.

5

integral, That’s a good solution on pages with disconnected grids–I’ll use it in some places.

However I have a number of interconnected datatables/tabs, so preserving the filter as part of the URL like how apin suggested works a bit better on most of my pages.

For example I have a page with 4 tabs and a grid under each tab. What data is loaded in each grid is somewhat determined by what the user does in another tab (i.e. clicks a state-> temperatures for cities in that state are loaded in a temperature tab). That needs to call a load with a URL and a posted variable, but I sometimes want to preserve the filter used in the temperature tab beforehand (i.e. user selects a state, temperatures for cities in that state are loaded in the 2nd tab, user wants to find temps that are >80, user goes back to state tab and selects a different state, the temperature tab loads the cities in the new state where temps are >80 on first load). It’s not possible to just filterByAll because of the changed postdata

I could user filterByAll() in onAfterLoad for the grids, but that causes two requests to be sent to my server, which is unnecessary extra load.

6

i’ve a peculiar requirement. i’ve millions of rows. so i’m bringing the filter options dynamically from server. i’m trying to bring the filter data as and when user types int the filterbox by capturing in the event: onTimedKeyPress.
i’m also using server side filtering/paging/sorting. i’m not using http get to filter data. i’m using a post method and sending some extra information along to get the filtered data. everthing works fine so far. but after parsing data into grid, i’m loosing filters state. not able to persist the filters. i’ve tried setState option. but the “onDataRequest” event is firing after the setState, and goes into infinite loop. can someone help me how to achieve this?

7

While your logic use the common data loading API, there is no need for setState call

webix.ajax().post(url, filters).then(data => {
    table.clearAll();
    table.parse(data.json());
});

Filters are preserved in the table during clearAll call, so you need not call setState in such case.

Please beware that if you are using some complex data binding, instead of the parse, the result may differ.