jqxgrid virtual mode initial filter is not working

[sonuParticipant]

I’m using jqxgrid virtual mode for server side data. so everything is working fine without initial filter but when i try to used some initial filter so the request is being sent to server two time. one with the data and one without data so can you please check my code i want to load the initial filter with virtual mode.

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://testapi-application.localhost.com/cases/search',
      datatype: 'json',
      pagesize: 20,
      type: 'post',
      root: 'Rows',
      cache: false,
      sortcolumn: 'id',
      sortdirection: 'desc',
      data: {
        params: basicFilters,
      },
      filter: function (filters, data, length) {
        $('#jqxgrid').jqxGrid('updatebounddata', 'filter')
      },
      sort: function () {
        $('#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 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);
    filtergroup.addfilter(filter_or_operator, filter1);
    $("#jqxgrid").jqxGrid('addfilter', 'repairer_status', filtergroup);
    $("#jqxgrid").jqxGrid('applyfilters');
  }

  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').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: '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',
          filter: firstNameColumnFilter,
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList(
              {displayMember: 'label', valueMember: 'value'})
          },
        }
      ],
    })

[MartinParticipant]

Hello sonu,

This topic is duplicated.
Please, refer to the following Post.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts