Unable to remove filter from multiple column.

[sonuParticipant]

I have load the jqxgrid with default initial filter which is fine. but based on some event change i have called addfilter function but before i called addfilter i want some of the previous filter should be clear so i have used removefilter but it only works for first field . like in below example it work with first column days.

`var addfilter = function () {
var filtergroup = new $.jqx.filter();
var repLen = repairerSource.localdata;
for (var j = 0; j < repLen.length; j++) {
var filter_or_operator = 1;
var filtervalue = repLen[j].label;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
}
$(“#jqxgrid”).jqxGrid(‘removefilter’, ‘days’);
$(“#jqxgrid”).jqxGrid(‘removefilter’, ‘repairer_name’);
$(“#jqxgrid”).jqxGrid(‘removefilter’, ‘product_brand’);
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘repairer_status’, filtergroup);
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}`

Then an error comes

Uncaught Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.
at c.(anonymous function).addfilter

[sonuParticipant]

Please help me on this . I have some default filter which i’m loading using initialfilters method.

var addfilter = function () {
var filtergroup = new $.jqx.filter();
var repLen = repairerSource.localdata;
for (var j = 0; j < repLen.length; j++) {
var filter_or_operator = 1;
var filtervalue = repLen[j].label;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
}
// $(“#jqxgrid”).jqxGrid(‘removefilter’, ‘item_descriptor’);
// $(“#jqxgrid”).jqxGrid(‘removefilter’, ‘days’);
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘repairer_status’, filtergroup);
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}

$('#quickFilter').change(function () {
    var propId = $('option:selected', this).attr('data-id');
    var conditionsProperty = $('option:selected', this).attr('data-condition');
    var property = $('option:selected', this).attr('data-property');
    repairerSource.localdata = getRepairerStatus(filterStatusJson,conditionsProperty);
    $('#jqxgrid').jqxGrid('setcolumnproperty', 'repairer_status', 'filteritems', repairerSource.localdata);
    $('#jqxgrid').jqxGrid('refreshfilterrow')

    addfilter()

  })

when i click on quick filter change event . it doesn’t work . i want to remove some filter before initial filter method so how we do it.

I tried it with the bindingcomplete function but not working

$("#jqxgrid").bind('bindingcomplete', function (event) {
     $("#jqxgrid").jqxGrid('removefilter', 'item_descriptor');
     $("#jqxgrid").jqxGrid('removefilter', 'days');
  });

[HristoParticipant]

Hello sonu,

I tested removefilter method and it seems to work fine.
If you want to clear all filters before you add a new one you could use the clearfilters method.
Also, it will be better if you could provide us with a simplified example that demonstrates this case.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

• This reply was modified 4 years, 5 months ago by  Hristo.

[sonuParticipant]

When i call the method addfilter this error happen.

var addfilter = function () {
      var filtergroup = new $.jqx.filter();
      var repLen = repairerSource.localdata;
      for (var j = 0; j < repLen.length; j++) {
        var filter_or_operator = 1;
        var filtervalue = repLen[j].label;
        var filtercondition = 'equal';
        var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter);
      }

      $("#jqxgrid").jqxGrid('addfilter', 'repairer_status', filtergroup);
      $("#jqxgrid").jqxGrid('removefilter', 'item_descriptor');
      $("#jqxgrid").jqxGrid('removefilter', 'days');
      $("#jqxgrid").jqxGrid('applyfilters');
    }

$(‘#quickFilter’).change(function () {

var propId = $(‘option:selected’, this).attr(‘data-id’);
var conditionsProperty = $(‘option:selected’, this).attr(‘data-condition’);
var property = $(‘option:selected’, this).attr(‘data-property’);
repairerSource.localdata = getRepairerStatus(filterStatusJson,conditionsProperty);
$(‘#jqxgrid’).jqxGrid(‘setcolumnproperty’, ‘repairer_status’, ‘filteritems’, repairerSource.localdata);

addfilter();
})

In quickfilter onchange i want to reload the grid based on new data which i have set into source but when i used the removefilter or clearfilter it gives me this error.

Uncaught Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.
at c.(anonymous function).removefilter (http://test-application.localhost.com/jqxgrid/jqxgrid.filter.js:8:78428)
at Object.b.jqx.invoke (jqxcore.js:15)
at Object.b.jqx.jqxWidgetProxy (jqxcore.js:15)
at HTMLDivElement.<anonymous> (jqxcore.js:15)
at Function.each (jquery-1.11.1.js:383)
at jQuery.fn.init.each (jquery-1.11.1.js:136)
at jQuery.fn.init.b.fn.(anonymous function) [as jqxGrid] (http://solvup-application.localhost.com/jqxgrid/jqxcore.js:15:67885)
at addfilter (grid.js:141)
at HTMLSelectElement.<anonymous> (grid.js:173)
at HTMLSelectElement.dispatch (jquery-1.11.1.js:4641)

[Author]

Posts