Freeze filter row while remote data is loading

[Admir HodžićParticipant]

My grid is attached to remote data, my grid has filter row.
If user set one filter, and while data still is loading if set another filter on other column, gird ignores next filter settings and do not send new request to server.
In that case second filtering drops silently.(filter row set filter value but there is no request and data is not filtered)
Is there a way to some how cancel data loading when new filter event came ?
Is there a way to some how disable filter row of grid while data is loading ?
I do now control event of filtering in datasoruce

var sourceListaRacuna =
{
    datatype: "json",
    method: "post",
    type: "post",
    datafields: [
        { name: 'racunId', type: 'int' },
        { name: 'ts', type: 'date' },
        { name: 'sklSifra', type: 'string' },
        { name: 'sklNaziv', type: 'string' },
        { name: 'kasa', type: 'string' },
        { name: 'blagajnik', type: 'string' },
        { name: 'hrc', type: 'string' },
        { name: 'total', type: 'number' },
        { name: 'isStorno', type: 'bool' },
        { name: 'isPrekinut', type: 'bool' },
        { name: 'isPrebijanje', type: 'bool' },
        { name: 'reqL1audit', type: 'bool' },
        { name: 'reqL2audit', type: 'bool' }
    ],
    url: "../../BO/ListaRacunaData",
    key: "racunId",
    formatData: function (data) {
        return {
            'GridFilter': JSON.stringify(data),
            'initGrid': initGrid
        };
    },
    filter: function (data) {
        if (data.length === 0 || data.findIndex(x => x.datafield === 'ts') < 0) {
            $("#samo100").html("Filter datuma je obavezan");
            $('#gridRacuna').jqxGrid('clear');
            return false;
        }
        else
            {
            var ado = data.find(x => x.datafield === 'ts').filter.getfilters();

            var poruka = "";

            if (ado.length === 1) {
                poruka += "Na datum: "+ ado[0].value.toLocaleDateString();
                   }
            else {
                poruka += "Od: " + ado[0].value.toLocaleDateString() + " do " + ado[1].value.toLocaleDateString();
            }

            $("#samo100").html(poruka);
            $("#gridRacuna").jqxGrid('updatebounddata', 'filter');
        }
    }
};

[TodorParticipant]

Hello Admir,

The bindingcomplete event will be triggered when the first filter is complete and you should make sure that you initiate the second one afterwards. You could set filterable property to false when you initiate the first filter and switch it back to true when bindingcomplete event is triggered.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Admir HodžićParticipant]

@todor thank you on tip,
But unfortunately, setting filterable property to false, and to true back breaking grid logic.

If in filter row exist column with filter type checkedlist.
If that column is filtered and if that column change filterabile poperty from true to false and to true again.
Column looses sense of previous set filter.
That column in next filtering event is not filtered any more.

Please check this fiddle,
Filde showing loosing filter data on disable and enable filterable property
Set filter on colun lastname,
after that disable and enable filterabile property by clicing on buutons
after that try to filter column Product, to se how filter lastname is lost

[Admir HodžićParticipant]

Apologies for spamming,
Looks like if any column change filterable property checklist filters gets lost.

Here is fiddle
http://jsfiddle.net/uka9pvsr/4/

[Admir HodžićParticipant]

Apologies once again for spamming but, I swear I did not know until I did not asked.
For future readers, solution is to call disable property on all grid

before updatebounddata api call you can disable all grid by

$(“#grid”).jqxGrid({ disabled: true });

and on dataadapter loadcomplite or loaderror you can

var dataAdapterListaNarudzbi = new $.jqx.dataAdapter(sourceListaNarudzbi, {
    loadError: function (jqXHR, textStatus,  errorThrown) {
$("#grid").jqxGrid({ disabled: false});
    },
    loadComplete: function () {
$("#grid").jqxGrid({ disabled: false});
    }
});

[Author]

Posts