Html Grid

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

by mogador

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: 'quantity',
    type: 'number'
  }, {
    name: 'price',
    type: 'number'
  }],
  datatype: 'array'
};

var adapter = new $.jqx.dataAdapter(source);
$('#jqxgrid').jqxGrid({
  width: '100%',
  theme: 'energyblue',
  source: adapter,
  sortable: true,
  columns: [{
    text: 'Quantity',
    datafield: 'quantity',
    width: '50%',
    cellsalign: 'right'
  }, {
    width: '40%',
    text: 'Unit Price',
    datafield: 'price',
    cellsalign: 'right',
    cellsformat: 'c2'
  }, {
    text: '',
    width: '10%',
    datafield: null,
    align: 'center',
    columntype: 'button',
    sortable: false,
    filterable: false,
    menu: false,
    exportable: false,
    cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
      return 'button';
    }
  }]
});