How to apply filter on event change

[sonuParticipant]

I’m using jqxgrid with initial filter onready function.

ready: function () {
   addfilter()
},

When the grid is load so addfilter is applied and in addfilter function i have checked the status column filteritems values. This is ok for me but i need to change the grid based on event . lets suppose i have a button when i click on button i have update the filteritems source and grid is loaded but in status column filteritems checked box is not checked and grid is not loaded. So based on some event how to addfilter again to the grid.

This is my change event.

$('#quickFilter').change(function () {
    var selectedVal = this.value
    var objd = JSON.parse(filterData);
    let defaultData = findObjectByKey(objd, 'name', selectedVal);
    //console.log(defaultData.conditions);
    source.data = {
      params: {
        conditions: defaultData.conditions,
        retailer_id: [1, 2, 4, 5, 12, 20, 23, 24],
        is_sandbox_on: [0]
      }
    }
    html = '';
    repairerSource.localdata = defaultData.repairer_status;
    //alert(JSON.stringify(repairerSource.localdata));
    $('#jqxgrid').jqxGrid('setcolumnproperty', 'repairer_status', 'filteritems', repairerSource.localdata);
    $('#jqxgrid').jqxGrid('updatebounddata','data')
    $('#jqxgrid').jqxGrid('refreshfilterrow')
  })

on change event i have update the array in repairerSource and it will also reflect in status coloumn . But in addfilter i wrote a code to select all status checkbox but it’s not working.

`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(‘applyfilters’);
}`

{
          text: 'Status',
          datafield: 'repairer_status',
          filtertype: 'checkedlist',
          filteritems: new $.jqx.dataAdapter(repairerSource),
          cellsalign: 'center',
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList(
              {displayMember: 'label', valueMember: 'value'})
          },
}

So i want to checked all status checkboxes and the grid should display the records but it works only page load. so how i apply filter onchange event.

[sonuParticipant]

when i add addfilter under click event . so it give me error like

jqxgrid.filter.js:8 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.

$(‘#quickFilter’).change(function () {
var source =
{
datafields:
[
…..
]
};

$(‘#jqxgrid’).jqxGrid(‘setcolumnproperty’, ‘repairer_status’, ‘filteritems’, repairerSource.localdata);
addfilter()
});

[HristoParticipant]

Hello sonu,

You could try to bind to the “bindingcomplete” event with a boolean flag to choose the right moment.
Also, it should be bind to this event before the Grid’s initialization.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts