jqGrid filter toolbar example

by Horus Medya

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script>
<input type="button" id="columnhide" value="Client Name Serch Hide" />
<table id="grid"></table>

CSS

.ui-widget {
  font-size: 0.8em
}

JavaScript

var mydata = [{
  id: "1",
  invdate: "2007-10-01",
  name: "test",
  note: "note",
  amount: "200.00",
  tax: "10.00",
  total: "210.00"
}, {
  id: "2",
  invdate: "2007-10-02",
  name: "test2",
  note: "note2",
  amount: "300.00",
  tax: "20.00",
  total: "320.00"
}, {
  id: "3",
  invdate: "2007-09-01",
  name: "test3",
  note: "note3",
  amount: "400.00",
  tax: "30.00",
  total: "430.00"
}, {
  id: "4",
  invdate: "2007-10-04",
  name: "test",
  note: "note",
  amount: "200.00",
  tax: "10.00",
  total: "210.00"
}, {
  id: "5",
  invdate: "2007-10-05",
  name: "test2",
  note: "note2",
  amount: "300.00",
  tax: "20.00",
  total: "320.00"
}, {
  id: "6",
  invdate: "2007-09-06",
  name: "test3",
  note: "note3",
  amount: "300.00",
  tax: "30.00",
  total: "330.00"
}, {
  id: "7",
  invdate: "2007-10-04",
  name: "test",
  note: "note",
  amount: "200.00",
  tax: "10.00",
  total: "210.00"
}, {
  id: "8",
  invdate: "2007-10-03",
  name: "test2",
  note: "note2",
  amount: "300.00",
  tax: "20.00",
  total: "320.00"
}, {
  id: "9",
  invdate: "2007-09-01",
  name: "test3",
  note: "note3",
  amount: "400.00",
  tax: "30.00",
  total: "430.00"
}];

$("#grid").jqGrid({
  data: mydata,
  datatype: "local",
  height: 250,
  ondblClickRow: function(rowid, iRow, iCol, e) {
    var grid = $('#grid');
    var cm = $("#grid").jqGrid("getGridParam", "colModel");
    var colName = cm[iCol]["name"];
    var cellvalue = $("#grid").jqGrid("getCell", rowid, iCol);
    $('#gs_' + colName).val(cellvalue);
    grid[0].triggerToolbar();
  },
  colNames: ['Inv No', 'Date', 'Client Name', 'Amount', 'Tax', 'Total', 'Notes'],
  colModel: [{
    name: 'id',
    width: 60,
    sorttype: "int"
  }, {
    name: 'invdate',
    width: 90,
    sorttype: "date",
    formatter: 'date',
    formatoptions: {
      newformat: 'm/d/Y',
      srcformat: 'Y-m-d'
    }
  }, {
    name: 'name',
    width: 100
  }, {
    name: 'amount',
    width: 80,
    align: "right",
    sorttype: "float"
  },...