Wednesday 4th of May

by bmosca

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/styles/jqx.base.min.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.bootstrap.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/14.0.0/jqwidgets/jqx-all.js"></script>
<table>
  <thead>
    <tr>
      <td rowspan="4" id="kanban1">
      </td>
      <td>
        <div>
          Styles
        </div>
        <div id="kanban2"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="rightSplitter">
          ProductColour 1
        </div>
        <div id="kanban3"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          ProductColour 2
        </div>
        <div id="kanban4"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          ProductColour 3
        </div>
        <div id="kanban5"></div>
      </td>
    </tr>
  </thead>
</table>

CSS

.jqx-icon-close-white {
    background-color: rgb(0,0,0);
}

JavaScript

//$('#splitter').jqxSplitter({ width: 800, height: 600, panels: [{ size: 250, min: 100 }, { min: 250 }] });
            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: "new1", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
                          { state: "new1", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 },
                          { state: "new1", label: "Combine Orders", tags: "orders, combine", hex: "#5dc3f0", resourceId: 3 },
                          { state: "new1", label: "Change Billing Address", tags: "billing", hex: "#f19b60", resourceId: 1 }
                 ],
                 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:...