Html Grid

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

by Hristo Hristov

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

JavaScript

//I am not familiar what is the name of your fields
var request_date = 'request_date';
var due_date = 'due_date';
//Possible values: 'string', 'date', 'number', 'float', 'int' and 'bool'
var date = 'date';
var fields = [
  { name: "id", type: "string" },
  { name: "status", map: "state", type: "string" },
  { name: "text", map: "label", type: "string" },
  { name: "tags", type: "string" },
  { name: "color", map: "hex", type: "string" },
  { name: "resourceId", type: "number" },
  { name: request_date, type: date },
  { name: due_date, type: date }
];

var source =
    {
      localData: [
        {
          id: "1161", state: "new", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3,
          request_date: new Date(2018, 9, 31),
          due_date: new Date(2019, 9, 31)
        },
        {
          id: "1645", state: "work", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1,
          request_date: new Date(2018, 10, 1),
          due_date: new Date(2019, 10, 1)
        },
        {
          id: "9213", state: "new", label: "One item added to the cart", tags: "cart", hex: "#5dc3f0", resourceId: 3,
          request_date: new Date(2018, 10, 2),
          due_date: new Date(2019, 10, 1)
        },
        {
          id: "6546", state: "done", label: "Edit Item Price", tags: "price, edit", hex: "#5dc3f0", resourceId: 4,
          request_date: new Date(2018, 10, 3),
          due_date: new Date(2019, 10, 1)
        },
        {
          id: "9034", state: "new", label: "Login 404 issue", tags: "issue, login", hex: "#6bbd49",
          request_date: new Date(2018, 10, 4),
          due_date: new Date(2019, 10, 1)
        }
      ],
      dataType: "array",
      dataFields: fields
    };

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

var resourcesAdapterFunc = function () {
  var resourcesSource =
      {
        localData: [
          {
            id: 0, name: "No name", image:...