filteritems and initial filters are not updated onchange event

[sonuParticipant]

I want to update the grid and status column filteritems based on event. I have a default selected option in dropdown based on which i have set the initial filter in the grid.

$('#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 () {
        addfilter()
      },
      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: 'Store',
          columntype: 'textbox',
          datafield: 'store',
          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'})
          },
        }
        },
      ],
    })

So when the page is load so i checked the selected dropdown value and parsed data to initial filter (addfilter) 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’);
}`

I have called onchange event based on dropdown and set the data to the variable repairerSource . The repairerSource is having the data of status filteritems.

`var repairerSource =
{
datatype: ‘array’,
datafields: [
{ name: ‘label’, type: ‘string’ },
{ name: ‘value’, type: ‘string’ },
]
};

$(‘#quickFilter’).change(function () {
var selectedVal = this.value
var objd = JSON.parse(filterData);
let defaultData = findObjectByKey(objd, ‘name’, selectedVal);
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’)
})`

so when i change the option in dropdown so all the new filteritems should be selected and grid should be loaded but in my current code filteritems are updated but not all selected and grid is not loaded . so please help me on this i want to load the data and filteritems based on onchange event of dropdown.

You can look into my code also here.

[Author]

Posts