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="grid"></div>

JavaScript

var countries = [
  { value: "AF", label: "Afghanistan" },
  { value: "AL", label: "Albania" },
  { value: "DZ", label: "Algeria" },
  { value: "FR", label: "France" },
  { value: "US", label: "United States" }
];

var countriesSource =
    {
      datatype: "array",
      datafields: [
        { name: "label", type: "string" },
        { name: "value", type: "string" }
      ],
      localdata: countries
    };

var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
  autoBind: true
});

// prepare the data
var gridSource =
    {
      datatype: "array",
      localdata: 
      [
        { countryCode: "AF" },
        { countryCode: "DZ" },
        { countryCode: "AL" },
        { countryCode: "US" }
      ],
      datafields: [
        // name - determines the field"s name.
        // value - the field"s value in the data source.
        // values - specifies the field"s values.
        // values.source - specifies the foreign source. The expected value is an array.
        // values.value - specifies the field"s value in the foreign source. 
        // values.name - specifies the field"s name in the foreign source. 
        // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record"s "countryCode" from gridAdapter matches to the "value" from countriesAdapter. 
        { name: "Country", value: "countryCode", values: { source: countriesAdapter.records, value: "value", name: "label" } },
        { name: "countryCode", type: "string" },
        { name: "countryCodeBase", type: "string", map: "countryCode" }
      ]
    };
var gridAdapter = new $.jqx.dataAdapter(gridSource);

$("#grid").jqxGrid({
  width: 600,
  source: gridAdapter,
  selectionmode: "singlecell",
  autoheight: true,
  editable: true,
  columns: [
    {
      text: "Code", datafield: "countryCodeBase",
      width: 150,
      columntype: "template",
      createeditor: function (row, value,...