Multiple kanbans

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;" id="rightSplitter">
      <div style="overflow: visible;">
        <div id="kanban2"></div>
      </div>
      <div style="overflow: visible;">
        <div id="kanban3"></div>
      </div>
    </div>
  </div>
</div>
      <div style="overflow: visible;">
        <div id="kanban4"></div>
      </div>
            <div style="overflow: visible;">
        <div id="kanban5"></div>
      </div>
      <div style="overflow: visible;">
        <div id="kanban6"></div>
      </div>

JavaScript

$('#splitter').jqxSplitter({ 
  width: 700, 
  height: 600, panels: [{ size: 250, min: 100 }, { min: 250 }] });
$('#rightSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ min: 200, size: 350, collapsible: false }, { min: 200 }] });
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 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" }
      ],
      dataType: "array",
      dataFields: fields
    };
var dataAdapter = new $.jqx.dataAdapter(source);
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" },
          { id: 2, name: "Janet Leverling", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/janet.png" },
          { id: 3, name: "Steven Buchanan", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/steven.png" },
          { id: 4, name: "Nancy Davolio", image: "https://www.jqwidgets.com/jquery-widgets-demo/images/nancy.png" },
          { id: 5, name: "Michael Buchanan", image:...