Single kanban

One 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="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: "0", text: "image 1", tags: "cart", color: "#5dc3f0", resourceId: 3 },
                        { status: "0", text: "image 2", tags: "cart", color: "#5dc3f0", resourceId: 3 },
                        { status: "0", text: "image 3", tags: "cart", color: "#5dc3f0", resourceId: 3 },
                        { status: "111", text: "image 4", tags: "orders, combine", color: "#5dc3f0", resourceId: 3 },
                        { status: "222", text: "image 5", tags: "billing", color: "#6bbd49", resourceId: 1 },
                        { status: "333", text: "image 6", tags: "cart", color: "#5dc3f0", resourceId: 3 }
    ];
    
    

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

    });

    
    $('#kanban1').on('itemMoved', function (event) {
		var args = event.args;
        var itemId = args.itemData.resourceId;
        
        console.log('old: ' + JSON.stringify(args.oldColumn));
        console.log('new: ' + JSON.stringify(args.newColumn));
        
	});
});