jqxGrid - Computed Column

Add a computed column and a filter on that column. Author: http://jqwidgets.com

by jdhines

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='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Add new filter" />
<input type="button" style="margin: 10px;" id="jqxbutton2" value="Clear filters" />

JavaScript

var data = generatedata(500);
var source = {
  localdata: data,
  datafields: [{
    name: 'firstname',
    type: 'string'
  }, {
    name: 'lastname',
    type: 'string'
  }, {
    name: 'productname',
    type: 'string'
  }, {
    name: 'date',
    type: 'date'
  }, {
    name: 'quantity',
    type: 'number'
  }, {
    name: 'available',
    type: 'boolean'
  }, {
    name: 'av2',
    type: 'string'
  }, {
    name: 'price',
    type: 'number'
  }],
  datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source, {
  autoBind: true,
  beforeLoadComplete: function (records) {
    var data = new Array();
    // add the new calculated field
    for (var i = 0; i < records.length; i++) {
      var record = records[i];
      record['av2'] = record.available ? 'Yes' : 'No';
      data.push(record);
    }
    return data;
  }
});

$("#jqxgrid").jqxGrid({
  width: 500,
  theme: 'energyblue',
  source: adapter,
  editable: true,
  ready: function () {
    setTimeout(function () {
      //addfilter(false);
    }, 1500);
  },
  filterable: true,
  columns: [ { 
    text: 'Available 2', 
    datafield: 'av2'
  }, {
    text: 'First Name',
    datafield: 'firstname',
    columngroup: 'Name',
    width: 90
  }, {
    text: 'Last Name',
    columngroup: 'Name',
    datafield: 'lastname',
    width: 90
  }, {
    text: 'Product',
    datafield: 'productname',
    width: 170
  }, {
    text: 'Order Date',
    datafield: 'date',
    width: 160,
    cellsformat: 'dd-MMMM-yyyy'
  }, {
    text: 'Quantity',
    datafield: 'quantity',
    width: 80,
    cellsalign: 'right'
  }, {
    text: 'Unit Price',
    datafield: 'price',
    cellsalign: 'right',
    cellsformat: 'c2'
  }]
});

$("#jqxbutton").jqxButton({
  theme: 'energyblue',
  height: 30
});

var addfilter = function (value) {
  var filtergroup = new $.jqx.filter();
  var filter_or_operator = 1;
  var filtervalue = value ? 'Yes' : 'No'; // true or false
  var filtercondition = 'equal';
  var filter1 =...