Kendo DataSource: Grouping then Sorting

Falafel Software Bloggers
Falafel Software
Published in
2 min readDec 6, 2016

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"
}]
});
badsort

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"});
}
}
goodsort

Special thanks to Rachel Hagerman for the assist in figuring this one out!

--

--