|
[Kanban.html]
<script type="text/javascript">
$(function () {
var data = ej.DataManager(window.gridData);
$("#Grid").ejGrid({
dataSource: data,
allowPaging: true,
allowSorting: true,
allowRowDragAndDrop: true,
rowDropSettings: { dropTargetID: "#Kanban" },
isResponsive: true,
rowDrop: "rowDrop" //bind the rowDrop event
});
var data = ej.DataManager(window.kanbanData).executeLocal(ej.Query().take(10));
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
allowTitle: true,
fields: {
content: "Summary",
primaryKey: "Id"
},
allowSelection: false,
editSettings: {
allowAdding: true
},
});
});
function rowDrop(args) { //Here you can define the rowDrop event
var kanban, cardId, target = $(args.target), key, data;
kanban = $('#Kanban').data('ejKanban');
data = kanban.getCurrentJsonData();
cardId = data[data.length - 1][kanban.model.fields.primaryKey] + 1;
if (target.hasClass('e-rowcell'))
key = target.attr('ej-mappingkey');
else
key = target.parents('.e-rowcell').attr('ej-mappingkey');
for (var i = 0; i < args.data.length; i++) { // args.data is grid dragged data
args.data[i][kanban.model.keyField] = key;
kanban.KanbanEdit.addCard(cardId, args.data[i]); //Add dragged card into kanban using public method ‘addCard’.
}
}
</script> | 
