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

var source = {
  localdata: data,
  datatype: "array",
  datafields: [
    { name: 'StatusName', type: 'string' },
    { name: 'Activity', type: 'string' }
  ]
};
var stable = undefined;
var dataAdapter = new $.jqx.dataAdapter(source, {
  loadComplete: function (data) { },
  loadError: function (xhr, status, error) { }
});
/*
var addfilterForNull = function ()
{
  var filtergroup = new $.jqx.filter();
  var filter_or_operator = 1;
  var filtercondition = 'equal';

  var filtervalue1 = 'null';
  var filter1 = filtergroup.createfilter('stringfilter', filtervalue1, filtercondition);
  filtergroup.addfilter(filter_or_operator, filter1);

  // add the filters.
  $("#jqxgrid").jqxGrid('addfilter', 'Activity', filtergroup);
  // apply the filters.
  $("#jqxgrid").jqxGrid('applyfilters');
}; */

$("#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",
      //filteritems: ['Shopping for...