jqxgrid filter items not sending id to the server

[sonuParticipant]

I have used the jqxgrid with dynamic filteritems in column. I want to use both label and value in request sending params but during the addFilter initialisation it will only set the string value. If i used the datafields value number so it is not working.

var countries = [
                 { value: "1", label: "Afghanistan" },
                 { value: "2", label: "Albania" },
                 { value: "3", label: "Algeria" },
                 { value: "4", label: "Argentina" },
            ];
            var countriesSource =
            {
                 datatype: "array",
                 datafields: [
                     { name: 'label', type: 'string' },
                     { name: 'value', type: 'string' }
                 ],
                 localdata: countries
            };

$('#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: 'Status',
          datafield: 'country',
          filtertype: 'checkedlist',
          filteritems: new $.jqx.dataAdapter(countriesSource,{autoBind: true}),
          cellsalign: 'center',
          //filter: firstNameColumnFilter,
          createfilterwidget: (column, htmlElement, editor) => {
            editor.jqxDropDownList(
              {displayMember: 'label', valueMember: 'value'})
          },
        }
          
      ],
    })

when i applied filter it sends the following parameters to the server which is ok.

filtervalue0: Afghanistan
filterid0: 1
filtercondition0: EQUAL
filteroperator0: 1
filterdatafield0: country

But when i try to use initial filter so it faced a problem .it will not send the param filterid0 but i want to send the id and value both.

var addfilter = function () {
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 'or';
    var filtervalue = 'Afghanistan';
    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');
  }

So can we set the id as well in addfilter is that possible. Does createfilter will support both the value and id . because in both case i need to send the

filtervalue0: Afghanistan
filterid0: 1

please help me on this.

[HristoParticipant]

Hello sonu,

There is a similar post with this topic:
https://www.jqwidgets.com/community/topic/unable-to-refresh-the-grid-filter-row-in-jqxgrid/
When you use “virtualmode” you should retrieve the data from the server this could cause issues.
The addfilter method work with filter group you could use it to add 1, 2 or many ‘filtervalues’ for particular column if you want to include filtering with another column you should create another filter group and use the ‘addfilter’ method again after then when you are wanting to resolve this on the jqxGrid use “applyfilters” method.

If you want to get more information about the selected item in the createfilterwidget you could bind there to the select event as in this example.

editor.on('select', function (event) {
       var args = event.args;
       if (args) {
           // index represents the item's index.                          
           var index = args.index;
           var item = args.item;
           // get item's label and value.
           var label = item.label;
           var value = item.value;
           alert("label: " + label + "value: " + value);
       }
   });

After that, you could provide this information to the server via AJAX.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts