one resourceSource per kanban table

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

by bmosca

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 style="overflow: visible;" id="splitter">
  <div style="overflow: visible;">
    <div id="kanban1"></div>
  </div>
  <div style="overflow: visible;">

    <div style="overflow: visible;">
      <div id="kanban2"></div>
    </div>
    <div style="overflow: visible;">
      <div id="kanban3"></div>
    </div>
  </div>

  <div style="overflow: visible;">
    <div id="kanban4"></div>
  </div>
  <div style="overflow: visible;">
    <div id="kanban5"></div>
  </div>
</div>

JavaScript

var fields = [
  { 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" }
];

var resourcesAdapterFunc = function () {
  var resourcesSource =
      {
        localData: [
          { id: 0, name: "No name", image: "https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/images/common.png", common: true },
          { id: 1, name: "Andrew Fuller", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/andrew.png" }
        ],
        dataType: "array",
        dataFields: [
          { name: "id", type: "number" },
          { name: "name", type: "string" },
          { name: "image", type: "string" },
          { name: "common", type: "boolean" }
        ]
      };
  var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
  return resourcesDataAdapter;
}


var source =
    {
      localData: [
        { state: "new", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
        { state: "new", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 },
        { state: "new", label: "One item added to the cart", tags: "cart", hex: "#5dc3f0", resourceId: 3 },
        { state: "new", label: "Edit Item Price", tags: "price, edit", hex: "#5dc3f0", resourceId: 4 },
        { state: "new", label: "Login 404 issue", tags: "issue, login", hex: "#6bbd49" },
        { state: "new", label: "Hey", tags: "price, edit", hex: "#5dc3f0", resourceId: 4 }
      ],
      dataType: "array",
      dataFields: fields
    };
var dataAdapter = new $.jqx.dataAdapter(source);
$('#kanban1').jqxKanban({
  width: '100%',
  height: '200px',
  resources: resourcesAdapterFunc(),
  source: dataAdapter,
  columns: [
    { text: "Backlog", dataField: "new", maxItems: 5 },
    { text: "In Progress", dataField: "work", maxItems: 5 },
    { text: "Done",...