Html Grid

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

by jqwidgets

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>
<div id="jqxgrid"></div>

JavaScript

var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     },
     {
         name: 'lastname',
         type: 'string'
     },
     {
         name: 'name',
         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);
 
$("#jqxgrid").jqxGrid(
  {
    width: 850,
    source: dataAdapter,
    filterable: true,
    // cellValue - cell's current value, row data - row's data, data field - column's data field, filterGroup - group of filters, defaultFilterResult - the built-in boolean evaluated result-
    filter: function(cellValue, rowData, dataField, filterGroup, defaultFilterResult)
    {
      // implements a custom filter for the "name" field. 
      if (dataField === "name") {
        var filters = filterGroup.getfilters();
        for (var i = 0; i < filters.length; i++) {
          var filter = filters[i];
          var filterValue = filter.value;
          var filterCondition = filter.condition;
          var filterType = filter.type;

          if (cellValue.indexOf("Antoni") >= 0) {
            return true;
          }
          if (cellValue.indexOf("Nancy") >= 0) {
            return true;
          }
        }

        return false;
      }
    },
    selectionmode: 'multiplecellsextended',
    columns: [
      { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
      {
        text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
      },
      { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
      { text: 'Ship Date', datafield: 'date', filtertype: 'range',...