Multiple kanbans in one component

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 style="width:100%">
		    <tr>
		        <td><div id="kanban1"></div></td>
		    </tr>
		</table>

JavaScript

$(document).ready(function () {
    
    
    var resources = [
                  { id: 1, name: "No name", image: "../../jqwidgets/styles/images/common.png", common: true },
                  { id: 2, name: "Andrew Fuller", image: "../../images/andrew.png" },
                  { id: 3, name: "Janet Leverling", image: "../../images/janet.png" }
            ];
    
    var kanbanSourceProduct = [
                        { status: "digitalassets", text: "image 4", tags: "orders, combine", color: "#5dc3f0", resourceId: 3 },
                        { status: "digitalassets", text: "image 5", tags: "billing", color: "#6bbd49", resourceId: 1 },
                        { status: "digitalassets", text: "image 6", tags: "cart", color: "#5dc3f0", resourceId: 3 },
                        { status: "p_3d", text: "image 1", tags: "issue, login", color: "#6bbd49" },
                        { status: "p_thumbnail", text: "image 2", tags: "issue, login", color: "#6bbd49" },
                        { status: "p_general", text: "image 3", tags: "issue, login", color: "#6bbd49" },
                        { status: "pc_1_3d", text: "Change Billing Address", tags: "billing", color: "#6bbd49", resourceId: 1 },
                        { status: "pc_2_thumbnail", text: "Combine Orders", tags: "orders, combine", color: "#5dc3f0", resourceId: 3 }
                        
    ];

    $('#kanban1').jqxKanban({
        width: '100%',
        height: '200px',
        resources: resources,
        source: kanbanSourceProduct,
        connectWith: "#kanban2, #kanban3",
        columns: [
            { text: "Digital Assets", dataField: "digitalassets", maxItems: 10 },
            { text: "3D", dataField: "p_3d", maxItems: 10 },
            { text: "Thumbnail", dataField: "p_thumbnail", maxItems: 10 }
        ],
        // render column headers.

    });
    
    $('#kanban1').on('itemMoved', function (event) {
		debugger;
    var args = event.args;
    var itemData = args.itemData;
        
   ...