Kendo UI Grid custom sorting - asp.net-mvc

Question

I have a grid in my application where the user wants the following functionality.
Scenerio
There are 4 columns in the grid, let's call them A, B, C and D.
Multiple columns are sortable and can be reordered.
The default sort is column A, B, C, D
If the user drags column C to be the first column, then the sort should be C, A, B, D.
I know there's a columnOrder event on the grid. Is this functionality possible? Is there an example anywhere or could someone give me direction on how to accomplish this functionality?
Thanks
Jim

Answer 1

In the event handler you can get the new column order from: this.columns. Then you should compose the sorting criteria and apply it.
Something like:
columnReorder: function() {
var sort = [];
$.each(this.columns, function(idx, elem) {
// In my case order by those columns that start with "Ship"
if (elem.field.lastIndexOf("Ship", 0) === 0) {
sort.push({field: elem.field, dir: "asc"});
}
});
this.dataSource.sort(sort);
},
Following a runnable example.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShippedDate: {type: "date" }
}
}
},
pageSize: 15
},
height: 550,
sortable: true,
reorderable: true,
resizable: true,
pageable: true,
columnReorder: function() {
var sort = [];
$.each(this.columns, function(idx, elem) {
if (elem.field.lastIndexOf("Ship", 0) === 0) {
sort.push({field: elem.field, dir: "asc"});
}
});
this.dataSource.sort(sort);
},
columns: [
{
field: "OrderID",
title: "ID",
width: 80
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}",
width: 200
}
]
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-office365.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.office365.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<div id="grid"></div>