Html Grid

Set the filterable property of the jqxGrid. Author: http://jqwidgets.com

by txhi

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<button id="click">click</button>
<br><br><div id="jqxgrid"></div>

JavaScript

var data = generatedata(50);
var addfilter = function () {
  var filtergroup = new $.jqx.filter();
  var filter_or_operator = 1;
  var filtercondition = 'equal';

  var filtervalue1 = '6';
  var filter1 = filtergroup.createfilter('stringfilter', filtervalue1, filtercondition);
  filtergroup.addfilter(filter_or_operator, filter1);
  var filtervalue2 = '12';
  var filter2 = filtergroup.createfilter('stringfilter', filtervalue2, filtercondition);
  filtergroup.addfilter(filter_or_operator, filter2);

  // add the filters.
  $("#jqxgrid").jqxGrid('addfilter', 'myfield', filtergroup);
  // apply the filters.
  $("#jqxgrid").jqxGrid('applyfilters');
};
var source = {
  localdata: data,
  datafields: [
    {
      name: 'myfield'
    },
    {
      name: 'firstname',
      type: 'string'
    }, {
      name: 'lastname',
      type: 'string'
    }, {
      name: 'productname',
      type: 'string'
    }, {
      name: 'date',
      type: 'date'
    }, {
      name: 'quantity',
      type: 'number'
    }, {
      name: 'price',
      type: 'number'
    }],
  datatype: "array"
};

var dataAdapter = new $.jqx.dataAdapter(source, {
  beforeLoadComplete: (records) => {
    //console.log(records);
    for(var i = 0; i < records.length; i += 1) {
      var rec = records[i];
      rec.myfield = i + 1;
      //console.log(rec);
    }

    return records;
  }
});

$("#jqxgrid").jqxGrid({
  width: 550,
  source: dataAdapter,
  showfilterrow: true,
  filterable: true,
  editable: true,
  ready: () => {
    //addfilter();
  },
  selectionmode: 'multiplecellsextended',
  columns: [
    { text: 'Name', columntype: 'textbox', filtertype: 'checkedlist', datafield: 'myfield' },
    {
      text: 'Product', filtertype: 'checkedlist', datafield: 'productname'
    },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
    { text: 'Ship Date', datafield: 'date', filtertype: 'range', cellsalign: 'right', cellsformat: 'd' },
    { text:...