[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)

[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');
  });

[sonuParticipant]

Thanks Martin.

[sonuParticipant]

Hi Martin.

In your example you select the filter Ian and Lars item. But it should be checked in the filteritems but in filteritems all items are unchecked including Ian and Lars and in product also show the Ian which is also wrong. so the result filtered criteria should be same in the filters.

[sonuParticipant]

Hey please me on this. can we pass the multiple array in filtergroup.

[sonuParticipant]

Please help me on this .

[sonuParticipant]

Please check this updated link .

[sonuParticipant]

You can look into this example in fiddle

In this example i have create a button.on click of this button i have to applied the filter which are setup into newJson variable. so i want to applied those filter on button click.

[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()
});

[sonuParticipant]

Basically the based on dropdown i have to load the grid and update the filter item. in the demo.

ex new_at_store is default filter which include some status like [1,2,3] so in grid column status i have add filter items [1,2,3] and send these filter to the server. But when i tried to change the dropdown the status filteritems are updated but not sended to the server. I have comment the addfilter function when load the page and used filter option in column for initial filter. but based on dropdown value how to send new filteritems data to server.

[sonuParticipant]

I have paste my code to editor please look into it.

So what i want to achieve is when i click on dropdown i have set the value into filteritems and in filteritems all value should be checked default. When you run my code and open the console you will see the filteritem should be sended to the server. but when i click on dropdown and change the value so filteritems is updated but not sended to the server. so please help me on this.

[sonuParticipant]

Hi Hristo,

Thanks for the help. I have a dropdown which contains filter items .

so when the grid is loading i have checked all checkboxes with addfilter onready function.

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’);
}

In addfilter function label contain the string and value contains the id. when default grid loading all checkboxes are checked in filteritems and when we are looking into console and print the data which is sending to the server is like this.

filtervalue0: “In store awaiting dispatch to repairer, RA provided”
filtervalue1: “Undefined”
filtervalue2: “Customer to send to repairer”
filtervalue3: “Repairer to contact customer”
filtervalue4: “In store awaiting dispatch to repairer”
filtervalue5: “Select repairer”
filtervalue6: “Replaced, awaiting courier”
filtervalue7: “In store, awaiting assessment”
filtervalue8: “In store, RA required”
filtervalue9: “Item not present”
filtervalue10: “Floorstock requires Purchase Order number”
filtervalue11: “Courier Booked, awaiting pickup”
filtervalue12: “waiting Courier Booking”

But when i choose the filteritems option manually so it will send one additional parameters to the server like.

filtervalue0: “In store awaiting dispatch to repairer, RA provided”
filtervalue1: “Customer to send to repairer”
filtervalue2: “Repairer to contact customer”
filterid0: “38”
filterid1: “0”
filterid2: “1”

so with the initial addfilter the filterid0 is not available. i want everytime the value and id both in the server. Is any possiblity that we defined the id as well in addfilter function.

[sonuParticipant]

Hey Hristo,

I have tried it but it is not working. I want to send both id and value to the server .

repairer_statusoperator: and
filtervalue0: In store awaiting dispatch to repairer, RA provided
filterid0: 38
filtercondition0: EQUAL
filteroperator0: 1
filterdatafield0: repairer_status
filtervalue1: Customer to send to repairer
filterid1: 0
filtercondition1: EQUAL
filteroperator1: 1
filterdatafield1: repairer_status

var addfilter = function () {
var filtergroup = new $.jqx.filter();

var filter_or_operator = 1;
var filtervalue = ‘In store awaiting dispatch to repairer’;
var filtervalueId = ’38’;
var filtercondition = ‘equal’;
//var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
var filter1 = filtergroup.createfilter(‘numericfilter’, filtervalueId, filtercondition);

filtergroup.addfilter(filter_or_operator, filter1);

$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘repairer_status’, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}

If i change createfilter from string to numeric so it will send the value

filtervalue0: 38

But i want both filtervalue0 = In store awaiting dispatch to repairer, RA provided
and filterid0 = 38

And i also faced the problem of setting up initial filter in virtual mode. When i set the initial filter in ready function so ajax call twice one is without initial filter and other one is with filter . so please help me on this.

[sonuParticipant]

Hi Hristo,

In the columns array filter items i have store label , value format

var repairerSource = '{"datatype":"array","datafields":[{"name":"label","type":"string"},{"name":"value","type":"string"}],"localdata":[{"value":38,"label":"In store awaiting dispatch to repairer, RA provided"},{"value":-1,"label":"Undefined"},{"value":0,"label":"Customer to send to repairer"},{"value":1,"label":"Repairer to contact customer"},{"value":2,"label":"In store awaiting dispatch to repairer"},{"value":23,"label":"Select repairer"},{"value":39,"label":"Replaced, awaiting courier"},{"value":44,"label":"In store, awaiting assessment"},{"value":51,"label":"In store, RA d"},{"value":48,"label":"Item not present"},{"value":50,"label":"Floorstock s Purchase Order number"},{"value":54,"label":"Courier Booked, awaiting pickup"},{"value":55,"label":"waiting Courier Booking"}]}';

$('#jqxgrid').jqxGrid(
    {
      source: dataAdapter,
      altrows: true,
      width: 1106,
      autoheight: true,
      sortable: true,
      filterable: true,
      showfilterrow: true,
      showsortmenuitems: false,
      pageable: true,
      virtualmode: true,
      rendergridrows: function (obj) {
        return obj.data
      },
      ready: function () {
      },
      sorttogglestates: 1,
      autoshowloadelement: false,
      columnsresize: true,
      autorowheight: true,
      columnsheight: 40,
      enablebrowserselection: true,
      columns: [
        {
          text: 'Id',
          columntype: 'textbox',
          width: '100',
          cellsalign: 'center',
          datafield: 'id',
        },
        {
          text: 'Customer',
          columntype: 'textbox',
          datafield: 'last_name',
          cellsalign: 'center',
          hidden: false,
        },
        {
          text: 'Status',
          datafield: 'repairer_status',
          filtertype: 'checkedlist',
          filteritems: new $.jqx.dataAdapter(repairerSource),
          cellsalign: 'center',
          //filter: firstNameColumnFilter,
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList(
              {displayMember: 'label', valueMember: 'value'})
          },
        }
      ],
    })

When i select status from the dropdown filter menu . it will post the data to the server like.

repairer_statusoperator: and
filtervalue0: In store awaiting dispatch to repairer, RA provided
filterid0: 38
filtercondition0: EQUAL
filteroperator0: 1
filterdatafield0: repairer_status
filtervalue1: Customer to send to repairer
filterid1: 0
filtercondition1: EQUAL
filteroperator1: 1
filterdatafield1: repairer_status

But when i try to select the default filter by using filter property.

` var firstNameColumnFilter = function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ‘In store awaiting dispatch to repairer, RA provided’;
var filterid = 38;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
return filtergroup;
}();`

The above function is only working fine with the string value but i want to select the filteritems based on id. so is that possible to use the filteritems with id.

var filter = filtergroup.createfilter('integerfilter', filterid, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);

Because i want to send the id and value both to the server side. please look into it .

[sonuParticipant]

Hi Hristo,

I got a solution for this. when i click the dropdown so i need to set the value of column property

$('#jqxgrid').jqxGrid('setcolumnproperty', 'repairer_status', 'filteritems', repairerSource.localdata);

I wanted to know one thing that when we load the grid under document.ready . i want to set default filter or inital filter so i set it under.

`var addfilter = function () {
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ‘In store awaiting dispatch to repairer’;
var filtercondition = ‘equal’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
//console.log(filter1);
filtervalue = ‘Replaced, awaiting courier’;
filtercondition = ‘equal’;
var filter2 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);

//dataAdapter.dataBind();
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘repairer_status’, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}`

after this i called the function jqxgrid.

$('#jqxgrid').jqxGrid(
    {
      source: dataAdapter,
      ready: function () {
        addfilter();
      }
    ....
   }

there is a problem in this when the page is load after sometime the grid data goes empty automatically. But if i called dataAdapter.dataBind(); in under initial filter so it the empty rows problem is sorted but there is another problem the ajax under console run multiple time. so what should i do for setting up default filter once when the grid is load.

please help me on this.

[Author]

Posts