Unable to refresh the grid filter row in jqxgrid

[sonuParticipant]

i have a page where based on dropdown i’m changing the grid data.In grid data the status field is having a filter row . when i change the dropdown so i create a new array for status filter row and update the filterrow using $('#jqxgrid').jqxGrid('refreshfilterrow'). so it works only once when second time i will select the dropdown and change the value of filterrow it will not reflecting to the grid.

page.html

<div class="requests index">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5><?php __('Cases');?></h5>
        </div>
        <div class="panel-body">

<!--            <p>Below is a list of all cases, please click on an item in the list for full information.</p>-->

            <div class="list-types">

                <div class="container">
                    <div class="caselist-parent-row row">

                        <div class="col-md-4 form-group" style="marginTop: '25px';marginRight: '-20px';width: '250px'">

                            <select placeholder="select" class="form-control" id="quickFilter">
                                <option value="">Select filter</option>
                                <?php if(sizeof($config)>0) { foreach($config as $k=>$v) { ?>
                                <option value="<?php echo $v['name'];?>" <?php if(!empty($v['default']) && $v['default']=="1") echo 'selected="selected"'; ?>><?php echo $v['label'];?></option>
                                <?php } } ?>
                            </select>
                        </div>

                        <div class="col-md-1 form-group" style="marginTop: '25px';marginRight: '-20px';width: '120px'">
                            <button type="submit" class="btn btn-default search-btn"><i class="fa fa-floppy-o"></i> Save</button>
                        </div>

                        <div class="col-md-1 form-group" style="marginTop: '25px';marginRight: '-20px';width: '120px'">
                            <button type="submit" class="btn btn-default search-btn" > <i class="fa fa-pencil-square-o" aria-hidden="true"></i>  Save As </button>
                        </div>

                        <div class="col-md-1 form-group" style="margin: 0 0 0 470px">
                            <i class="fa fa-download img-space" aria-hidden="true" id='excelExport1'></i>
                            <i class="fa fa-columns" aria-hidden="true"></i>
                        </div>

                        <br/><br/>
                        <div style="text-align: right;margin: 0 23px 10px 0;">

                            <div style="display:inline-block" id='exportReport' ></div>
                            <div style="display:inline-block" id='expandColoumn' ></div>
                            <div id='jqxlistBox'></div>
                        </div>

                        <div id='eventLog'></div>

                        <div class="caselist-child-row" >
                            <div id="jqxgrid"></div>
                        </div>
                        <br />

                    </div>
                </div>

            </div><!--  /end list tabs -->

        </div>
    </div>
</div>

data.js

$(document).ready(function () {

  const filterJson = JSON.parse(filterData);

  var defaultSelect = $('#quickFilter option:selected').val();

  const basicFilters = {
    retailer_id: [1, 2, 4, 5, 12, 20, 23, 24],
    is_sandbox_on: [0]
  }

  let html = '';
  let cloudItems = [];

  let repairerSource =
    {
      datatype: 'array',
      datafields: [
        { name: 'label', type: 'string' },
        { name: 'value', type: 'string' }
      ]
    };

  if(defaultSelect){
    var defaultData = findObjectByKey(filterJson, 'name', defaultSelect);
    basicFilters.conditions = defaultData.conditions;
    repairerSource.localdata = defaultData.repairer_status;

  }else{

    basicFilters.conditions = [];
    basicFilters.status = [];
    repairerSource.localdata = [];
  }

  // prepare the data
  var source =
    {
      datafields:
        [
          {name: 'id', type: 'number'},
          {name: 'last_name', type: 'string'},
          {name: 'store', type: 'string'},
          {name: 'item_descriptor', type: 'string'},
          {name: 'repairer_name', type: 'string'},
          {name: 'product_brand', type: 'html'},
          {name: 'is_floor_stock', type: 'bool'},
          {name: 'days', type: 'number'},
          {name: 'created', type: 'date'},
          {name: 'updated', type: 'date'},
          {name: 'repairer_status', type: 'string'},
          {name: 'is_extended_warranty', type: 'bool'},
          {name: 'is_floor_stock', type: 'bool'},
          {name: 'is_inhome', type: 'number'},
          {name: 'is_sandbox_mode', type: 'number'},
          {name: 'callcentre', type: 'number'},
          {name: 'retailer', type: 'string'},
          {name: 'phone', type: 'string'},
          {name: 'product_serial_number', type: 'string'},
          {name: 'replacement_serial_number', type: 'string'},
          {name: 'unique_product_identification', type: 'string'},
          {name: 'repairer_reference_number', type: 'string'},
          {name: 'model_no', type: 'string'},
          {name: 'product_id', type: 'number'},
          {name: 'apn_no', type: 'number'},
        ],
      url: 'http://sample-api.com/search',
      datatype: 'json',
      pagesize: 20,
      type: 'post',
      root: 'Rows',
      cache: false,
      sortcolumn: 'id',
      sortdirection: 'desc',
      data: {
        params: basicFilters,
      },
      filter: function () {
        // update the grid and send a request to the server.
        $('#jqxgrid').jqxGrid('updatebounddata', 'filter')
      },
      sort: function () {
        // update the grid and send a request to the server.
        $('#jqxgrid').jqxGrid('updatebounddata', 'sort')
      },
      beforeprocessing: function (data) {
        if (data != null && data.length > 0) {
          source.totalrecords = data[0].TotalRows
        }
      },
      pager: function (pagenum, pagesize, oldpagenum) {
        $('#jqxgrid').jqxGrid('updatebounddata', 'data')
      },
    }
  var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { },
    downloadComplete: function (data, status, xhr) {
      document.body.classList.remove('reactloader');
    },
  })

  $('#jqxgrid').on('filter', function (event) {

    var filterGroups = $('#jqxgrid').jqxGrid('getfilterinformation')

    var eventData = 'Triggered \'filter\' event'

    html = '';

    for (i = 0; i < filterGroups.length; i++) {
      var filterGroup = filterGroups[i];
      var filters = filterGroup.filter.getfilters();
      for (var j = 0; j < filters.length; j++) {

        let valueData = filters[j].value;
        if(filterGroup.filtercolumn === "created" || filterGroup.filtercolumn === "updated")
        {
          valueData = Moment(filters[j].value).format("YYYY-MM-DD");

        }
        html += '<div class="label-size">'+ filterGroup.filtercolumntext +' :'+valueData.toString()+'</div>';

      }
    }
    document.getElementById('eventLog').innerHTML = html;

  })

  $('#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 = '';
    //alert(JSON.stringify(defaultData.repairer_status));
    repairerSource.localdata = defaultData.repairer_status;
    //alert(JSON.stringify(repairerSource.localdata))
    $('#jqxgrid').jqxGrid('updatebounddata', 'data')
    $('#jqxgrid').jqxGrid('refreshfilterrow')
    displayCloud(defaultData)
  })

  $('#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
      },
      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: 'Product',
          datafield: 'item_descriptor',
          cellsalign: 'center',
          hidden: false,
        },
        {
          text: 'Brand',
          columntype: 'textbox',
          width: '100',
          datafield: 'product_brand',
          cellsalign: 'center',
          hidden: false,
        },
        {
          text: 'Repairer Name',
          columntype: 'textbox',
          datafield: 'repairer_name',
          cellsalign: 'center',
          hidden: false,
        },
        {
          text: 'Age',
          width: '100',
          datafield: 'days',
          filtertype: 'number',
          cellsalign: 'center',
          cellsrenderer: function (row, column, value) {
            return '<div class="jqx-grid-cell-middle-align">' + value +
              ' days</div>'
          },
        },
        {
          text: 'Status',
          datafield: 'repairer_status',
          filtertype: 'checkedlist',
          filteritems: new $.jqx.dataAdapter(repairerSource),
          cellsalign: 'center',

          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList(
              {displayMember: 'label', valueMember: 'value'})
          },
        },
        {
          text: 'Created',
          filtertype: 'date',
          datafield: 'created',
          cellsformat: 'yyyy-MM-dd',
          cellsalign: 'center',
          hidden: true,
        },
        {
          text: 'Updated',
          filtertype: 'date',
          datafield: 'updated',
          cellsformat: 'yyyy-MM-dd',
          cellsalign: 'center',
          hidden: true,
        },

        {
          text: 'Extended Warranty',
          datafield: 'is_extended_warranty',
          filterable: false,
          hidden: true,
        },
        {
          text: 'Floor Stock',
          datafield: 'is_floor_stock',
          filterable: false,
          hidden: true,
        },
        {
          text: 'In Home',
          datafield: 'is_inhome',
          filterable: false,
          hidden: true,
        },
        {
          text: 'SandBox Mode',
          datafield: 'is_sandbox_mode',
          filterable: false,
          hidden: true,
        },
        {
          text: 'Callcentre',
          datafield: 'callcentre',
          filterable: false,
          hidden: true,
        },
        {text: 'Retailer', datafield: 'retailer', hidden: true},
        {text: 'Phone', datafield: 'phone', hidden: true},
        {
          text: 'Replacement Serial No.',
          datafield: 'replacement_serial_number',
          hidden: true,
        },
        {
          text: 'Unique Product Identification',
          datafield: 'unique_product_identification',
          hidden: true,
        },
        {
          text: 'Product Serial No.',
          datafield: 'product_serial_number',
          hidden: true,
        },
        {
          text: 'Repaierer Reference No.',
          datafield: 'repairer_reference_number',
          hidden: true,
        },
        {text: 'Model No.', datafield: 'model_no', hidden: true},
        {text: 'Product Id', datafield: 'product_id', hidden: true},
        {text: 'Apn No', datafield: 'apn_no', hidden: true},
        {
          text: 'Action',
          width: '80px',
          datafield: 'Edit',
          sortable: false,
          filterable: false,
          showfilterrow: false,
          columntype: 'button',
          cellsrenderer: function (row) {
            var datarow = $('#jqxgrid').jqxGrid('getrowdata', row)
            //console.log(datarow.id)

            return '<i class=\'fa fa-eye\' \'> </i> <a href=\'/requests/view/' +
              datarow.id +
              '?type=newatstore&offset=1\'><span class=\'link\'> View</span> '

            //console.log(dataRecord);
          },
        },
      ],
    })

  let listBoxSource =
    [
      {'label': 'Id', 'value': 'id', 'checked': true},
      {'label': 'Age', 'value': 'days', 'checked': true},
      {'label': 'Apn Number', 'value': 'apn_no', 'checked': false},
      {'label': 'Brand', 'value': 'product_brand', 'checked': true},
      {'label': 'Callcentre', 'value': 'callcentre', 'checked': false},
      {'label': 'Created', 'value': 'created', 'checked': false},
      {'label': 'Customer', 'value': 'last_name', 'checked': true},
      {
        'label': 'Extended Warranty',
        'value': 'is_extended_warranty',
        'checked': false,
      },
      {'label': 'Floor Stock', 'value': 'is_floor_stock', 'checked': false},
      {'label': 'In Home', 'value': 'is_inhome', 'checked': false},
      {'label': 'Model No', 'value': 'model_no', 'checked': false},
      {'label': 'Phone', 'value': 'phone', 'checked': false},
      {
        'label': 'Product Description',
        'value': 'item_descriptor',
        'checked': true,
      },
      {'label': 'Product Id', 'value': 'product_id', 'checked': false},
      {
        'label': 'Product Serial No',
        'value': 'product_serial_number',
        'checked': false,
      },
      {'label': 'Repairer Name', 'value': 'repairer_name', 'checked': true},
      {
        'label': 'Repairer Reference No',
        'value': 'repairer_reference_number',
        'checked': false,
      },
      {
        'label': 'Replacement Serial No',
        'value': 'replacement_serial_number',
        'checked': false,
      },
      {
        'label': 'Replacement Serial No',
        'value': 'replacement_serial_number',
        'checked': false,
      },
      {'label': 'Retailer', 'value': 'retailer', 'checked': false},
      {'label': 'Sandbox Mode', 'value': 'is_sandbox_mode', 'checked': false},
      {'label': 'Status', 'value': 'repairer_status', 'checked': true},
      {'label': 'Store', 'value': 'store', 'checked': true},
      {
        'label': 'Unique Product Identification',
        'value': 'unique_product_identification',
        'checked': false,
      },
      {'label': 'Updated', 'value': 'updated', 'checked': false}]

  $('#jqxlistBox').on('checkChange', function (event) {
    $('#jqxgrid').jqxGrid('beginupdate')
    if (event.args.checked) {
      $('#jqxgrid').jqxGrid('showcolumn', event.args.value)
    }
    else {
      $('#jqxgrid').jqxGrid('hidecolumn', event.args.value)
    }
    $('#jqxgrid').jqxGrid('endupdate')
  })

  function findObjectByKey(array, key, value) {

    for (var i = 0; i < array.length; i++) {
      if (array[i][key] === value) {
        return array[i];
      }
    }
    return null;
  }

  $(".fa-download").click(function () {
    var ts = new Date();
    let fileName = "solvup-"+ts.toISOString()+"-"+getRandomNumber(0, 10000);
    $("#jqxgrid").jqxGrid('exportdata', 'xls', fileName, true, null);
  });

  $("#jqxlistBox").hide();
  $(".fa-columns").click(function () {
    $("#jqxlistBox").toggle();
  });

  function displayCloud (data) {
    Object.keys(data.conditions).forEach(function(key,index) {
        if(key == 'status'){
          if(data.conditions.status != undefined && data.repairer_status != undefined){
            for (var j = 0; j < data.repairer_status.length; j++){
              let labelName = data.repairer_status[j].label;
              html += '<div class="label-size">STATUS : ' + labelName.toString() + '</div>';
            }

          }
        }else if(key == 'status_not'){

          if(data.conditions.status_not != undefined && data.repairer_status != undefined){
            for (var j = 0; j < data.repairer_status.length; j++){
              let labelName = data.repairer_status[j].label;
              html += '<div class="label-size">STATUS NOT : ' + labelName.toString() + '</div>';
            }

          }

        }else if(key == 'end_date'){
          console.log(key)
          html += '<div class="label-size">'+ key +' : '+index+'</div>';
        }else{
          html += '<div class="label-size">'+ key +' : '+index.toString()+'</div>';
        }

    });
    document.getElementById('eventLog').innerHTML = html;
  }

  function getRandomNumber(low, high) {
    var r = Math.floor(Math.random() * (high - low + 1)) + low;
    return r;
  }
  $("#jqxlistBox").jqxListBox({ source: listBoxSource,checkboxes : true });

})

In above js file i have a quickFilter on change function where i want to check the dropdown is changed or not , if it changed so i get the value and update repairerSource.localdata = defaultData.repairer_status after that i have updatebound data and refresh filter row . so it is working only once when i try to change the dropdown again it is not working so i didn’t get why it is not working.

[HristoParticipant]

Hello imsonujangra,

This is a huge source code.
I would like to mention that we do not have the practice to revise such amount of code.
The best practice is to provide us with a simplified example that demonstrates your case. (https://www.jseditor.io/ or https://fiddle.jshell.net/)

I would like to suggest you try to update the jqxDataAdapter with .dataBind() method.
You should create one variable for the DataAdapter – adapter = new $.jqx.dataAdapter(repairerSource);.
After you change the localdata: repairerSource.localdata = defaultData.repairer_status;
Then you could try to use “dataBind” method and next to it the ‘refreshfilterrow’ method:

adapter.dataBind();
$('#jqxgrid').jqxGrid('refreshfilterrow');

I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

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

[HristoParticipant]

Hello imsonujangra,

There have values that are not clearly described.
About the “filtervalue = ‘Replaced, awaiting courier’;” as I understand you, you try to get value for filtering here when it is provided from somewhere.
Could you check this? You could add a filter when you receive the concrete value.

Also, is there any error message?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

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

[HristoParticipant]

Hello imsonujangra,

As I see the ‘id’ column is from type ‘number’.
For your purpose you should change the “filtertype – numericfilter”.
Please, take a look at this example:
.createfilter('numericfilter', filterid, filtercondition);
You could find out more information about this in our API Documentation page for addfilter method.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

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

[HristoParticipant]

Hello sonu,

It should accept string – I mean the string value should automatically be parsed to a number.
Could you clarify your issue with two values?
What do you want to achieve?
You could add one by one different values.
Or if want to be sure when adding one value to be from right type then you could parse it

Please, take a look at this demo:
https://jspexamples.jqwidgets.com/examples/grid-sorting-paging-filtering.htm?light
I would like to suggest you look at this tutorial, it could be useful to prepare the settings of your project.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

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

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]

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.

[HristoParticipant]

Hello sonu,

I would like to mention first that is a huge amount of source code and we do not have the practice to revise such source code.
It is better for both side the example to be small simple and to demonstrates only the mentioned issue.

You could use different approaches but I would like to mention one with metadata.
It is possible to create a hidden column which you could set there the values of the relevant column that contain specific labels.
Afterward, you could send this data to the server.

About ‘how to send data to the server’ you should choose a suitable approach.
It is possible with our DataAdapter or with AJAX or some another way.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts