(function () {
var countries = new kendo.data.DataSource({
data: [{
Name: "United States of America",
CategoryId: 0,
Category: "North America",
OriginalOrdinal: 0,
Ordinal: 0
}, {
Name: "Canada",
CategoryId: 0,
Category: "North America",
OriginalOrdinal: 1,
Ordinal: 1
}, {
Name: "Mexico",
CategoryId: 0,
Category: "North America",
OriginalOrdinal: 2,
Ordinal: 2
}, {
Name: "Argentina",
CategoryId: 1,
Category: "South America",
OriginalOrdinal: 0,
Ordinal: 0
}, {
Name: "Colombia",
CategoryId: 1,
Category: "South America",
OriginalOrdinal: 1,
Ordinal: 1
}, {
Name: "Chile",
CategoryId: 1,
Category: "South America",
OriginalOrdinal: 2,
Ordinal: 2
}],
group: {
field: "Category"
},
sort: {
field: "Ordinal",
dir: "asc"
}
});
var grid = jQuery('#grid').kendoGrid({
dataSource: countries,
autoBind: true,
scrollable: true,
sortable: false,
selectable: false,
filterable: false,
columns: [{
field: "Name",
title: "Countries"
}, {
field: "Ordinal",
title: "Ordinal",
width: 125
}, {
field: "OriginalOrdinal",
title: "Original Ordinal",
width: 125
}, {
field: "Category",
groupHeaderTemplate: "#= value #",
hidden: true
}]
}).data('kendoGrid');
grid.table.kendoSortable({
filter: "> tbody > tr:not(.k-grouping-row)",
hint: $.noop,
cursor: "move",
placeholder: function (element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: "#grid tbody",
end: function (e) {
var newIndex = e.newIndex;
var draggedItem = grid.dataSource.getByUid(e.item.data("uid"));
var targetRow = jQuery(this.items()[newIndex]);
var targetItem = grid.dataSource.getByUid(targetRow.data('uid'));
if (draggedItem.CategoryId !== targetItem.CategoryId) {
alert("Country can only be sorted within its own Category");
e.preventDefault();
}
},
change: function (e) {
var sortable = this;
var draggedItem = grid.dataSource.getByUid(e.item.data("uid"));
var categoryId = draggedItem.CategoryId;
var dataSource = grid.dataSource;
var itemsInCategory = jQuery.grep(sortable.items().slice(0), function (item) {
var dataItem = dataSource.getByUid(jQuery(item).data("uid"));
return dataItem.CategoryId === categoryId;
});
for (var i = 0; i <= itemsInCategory.length - 1; i++) {
var item = itemsInCategory[i];
var dataItem = dataSource.getByUid(jQuery(item).data("uid"));
dataItem.set("Ordinal", i);
}
//dataSource.sync();
}
});
})();
<div id="grid"></div>
html {
font: 400 12px Arial, Helvetica, sans-serif
}
External resources loaded into this fiddle: