Html Grid

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

by adamrehman

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 = [
  { "StatusName": "COMPLETED", "Activity": null },
  { "StatusName": "COMPLETED", "Activity": "Playing Football" },
  { "StatusName": "COMPLETED", "Activity": "Shopping for furniture" },
  { "StatusName": "SUBMITTED", "Activity": null },
  { "StatusName": "SUBMITTED", "Activity": "Playing Football" },
  { "StatusName": "SUBMITTED", "Activity": "Shopping for furniture" },
  { "StatusName": "UNDER REVIEW", "Activity": null },
  { "StatusName": "UNDER REVIEW", "Activity": "Playing Football" }
];

var source = {
  localdata: data,
  datatype: "array",
  datafields: [
    { name: 'StatusName', type: 'string' },
    { name: 'Activity', type: 'string' }
  ]
};

var dataAdapter = new $.jqx.dataAdapter(source, {
  loadComplete: function (data) { },
  loadError: function (xhr, status, error) { }
});



$("#jqxgrid").jqxGrid({
  theme: 'energyblue',
  pagerMode: 'default',
  autoRowHeight: false,
  filterable: true,
  showfilterrow: true,
  sortable: true,
  keyboardnavigation: false,
  autoshowfiltericon: false,
  enabletooltips: false,
  clipboard: true,
  columnsResize: true,
  columnsautoresize: true,
  pageable: true,
  pageSize: 10,
  autoheight: true,
  altrows: true,
  width: 500,
  source: dataAdapter,
  columns: [
    { "text": 'Status', "datafield": "StatusName", "width": "50%", "filtertype": "checkedlist" },
    {
      "text": 'Activity', "datafield": "Activity", "width": "50%",
      "filtertype": "checkedlist",
      cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties)
      {
        if (value == null) {
          return '';
        }
        else {
          return defaulthtml;
        }
      }
    }
  ]
});