Multiple kanban

by bmosca

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.arctic.css">
<script src="https://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<table>
		    <tr>
		        <td><div id="kb0"></div></td>
		    </tr>
		    <tr>
		        <td><div id="kb1"></div></td>
		    </tr>
		    <tr>
		        <td><div id="kb2"></div></td>
		    </tr>
			<tr>
		        <td><div id="kb3"></div></td>
		    </tr>
					    <tr>
		        <td><div id="kb4"></div></td>
		    </tr>
		    <tr>
		        <td><div id="kb5"></div></td>
		    </tr>
		    <tr>
		        <td><div id="kb6"></div></td>
		    </tr>
			<tr>
		        <td><div id="kb7"></div></td>
		    </tr>
					    <tr>
		        <td><div id="kb8"></div></td>
		    </tr>
		    <tr>
		        <td><div id="kb9"></div></td>
		    </tr>
		    <tr>
		        <td><div id="kb10"></div></td>
		    </tr>
			<tr>
		        <td><div id="kb11"></div></td>
		    </tr>
					    <tr>
		        <td><div id="kb12"></div></td>
		    </tr>
		    <tr>
		        <td><div id="kb13"></div></td>
		    </tr>
		    <tr>
		        <td><div id="kb14"></div></td>
		    </tr>
		</table>

JavaScript

$(document).ready(function () {
	var firstColumnDefaultWidth;
	var confirmDeleteMessage = 'Are you sure you want to delete this Image?';
	var resourcesAdapterFunc = function () {
		var resourcesSource = {
			"localData": [{
					"id": "-1",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/1355270567903.jpg?v=1"
				}, {
					"id": "85821",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/hamburger-1400-1800.jpg?v=1\u0026v=1"
				}, {
					"id": "85820",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/drumstick2-1200-1800.jpg?v=1\u0026v=1"
				}, {
					"id": "-5",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/hamburger-1400-1800.jpg?v=1"
				}, {
					"id": "85834",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/bacon-2000-2000.jpg?v=1"
				}, {
					"id": "85845",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/HRB-0001_500_P_1.png?v=1\u0026v=1"
				}, {
					"id": "-4",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/drumstick2-1200-1800.jpg?v=1"
				}, {
					"id": "85827",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/HRB-0001_500_P_1.png?v=1"
				}, {
					"id": "-3",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/drumstick-1300-1800.jpg?v=1"
				}, {
					"id": "82633",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/1k19033.jpg?v=1"
				}, {
					"id": "73634",
					"name": "CP00032",
					"image": "ImageFiles/AIImages/RM00993/RM009930.jpg?v=2"
				}, {
					"id": "85823",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/1355270567903.jpg?v=1\u0026v=1"
				}, {
					"id": "85819",
					"name": "CP00032",
					"image": "ImageFiles/ExtImages/Bruno/drumstick-1300-1800.jpg?v=1\u0026v=1"
				}
			],
			"dataFields": [{
					"name": "id",
					"type": "integer"
				}, {
					"name": "name",
					"type": "string"
				}, {
					"name": "image",
					"type": "string"
				},...