Html Grid

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

by txhi

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>
<input type='button' id='add_data' value='Add data' />

JavaScript

var data = new Array();
var source = {
  localdata: data,
  datatype: "array",
  datafields: [{
    name: 'firstname',
    type: 'string'
  }, {
    name: 'lastname',
    type: 'string'
  }, {
    name: 'quantity1',
    type: 'number'
  }, {
    name: 'quantity2',
    type: 'number'
  }, {
    name: 'quantity3',
    type: 'number'
  }],
  addrow: function (rowid, rowdata, position, commit) {
		setTimeout(function () {
        $("#jqxgrid").jqxGrid('setcellvalue', rowid, "quantity2", (rowdata['quantity1'] * 1000));
        $("#jqxgrid").jqxGrid('setcellvalue', rowid, "quantity3", (rowdata['quantity1'] * 100));
    }, 10);
      
    // synchronize with the server - send insert command
    // call commit with parameter true if the synchronization with the server is successful 
    //and with parameter false if the synchronization failed.
    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
    commit(true);
  },
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
  height: 250,
  theme: 'energyblue',
  showaggregates: true,
  showstatusbar: true,
  source: dataAdapter,
  columns: [{
    text: 'First Name',
    datafield: 'firstname'
  },{
    text: 'Last Name',
    datafield: 'lastname'
  }, {
    text: 'Quantity1',
    datafield: 'quantity1',
    width: 100    
  }, {
    text: 'Quantity2',
    datafield: 'quantity2',
    width: 90
  }, {
    text: 'Quantity3',
    datafield: 'quantity3',
    width: 90,
    cellsformat: 'f3',
    aggregates: ['sum']
  }]
});

$('#add_data').jqxButton({
  height: 27,
  theme: 'energyblue'
});

$('#add_data').on('click', function () {
  var data_to_inject = {
    'firstname': 'Chris',
    'lastname': 'Olson',
    'title': 'Mr.',
    'quantity1': 3
  };
  
  // The first approach - calculate values before adding it
  /*
  var q2 = data_to_inject['quantity1'] * 1000;
  var q3 = data_to_inject['quantity1'] * 100;
  data_to_inject['quantity2']...