Kendo DataSource: Grouping then Sorting
It seems that Kendo DataSource (and, thus, the Kendo Grid) cannot do both Grouping and Sorting. When sorting is defined without grouping, then everything works fine. But, when records are grouped, then the sorting within each groups does not work at all.
Consider this simple example: http://jsfiddle.net/jfollas/z3297jtx/
$("#grid").kendoGrid({
dataSource: {
data: orders,
group: {
field: 'group'
},
sort: {
field: 'sort'
}
},
columns: [{
field: "group"
}, {
field: "sort"
}]
});
The sorting is all over the place!
One workaround (there are probably many more) is to perform a sort AFTER the DataSource has already grouped the data. For a data-bound Kendo Grid, this can be done in the DataBound event handler. However, there is a Chicken-and-Egg situation when doing this: performing a .sort() will cause the DataBound event to fire again, so you have to also add guard code to prevent tail-call recursion from crashing your browser.
dataBound: function(e) {
if (this.dataSource.sort().every(function(s) { return s.field != "sort"; })) {
this.dataSource.sort({field: "sort", dir: "asc"});
}
}
Special thanks to Rachel Hagerman for the assist in figuring this one out!