Sorting kendo grid on multiple columns

Question

i have a kendo grid. When the page loads, by default i want to sort the grid by column1 then by column2 in descending order.

Issue: Its sorting as expected however sort arrow shows up on last sorted column. So in the case below when the page loads the sort arrow is on "DueDate" instead of "DownloadDate"

 @(Html.Kendo().Grid<TrackingVM>()
    .Name("Grid")
    .Columns(col =>
    {
        col.Bound(p => p.ID).Hidden();
        col.Bound(p => p.Year);
        col.Bound(p => p.State);                        
        col.Bound(p => p.DueDate).Format("{0:MM/dd/yyyy}");
        col.Bound(p => p.DownloadDate).Format("{0:MM/dd/yyyy}");            
    })
    .AutoBind(false)
    .Pageable(x => x.PageSizes(UISettings.PageSizes))
    .Sortable(x => x.AllowUnsort(false))
    .Resizable(resizing => resizing.Columns(true))
    .Scrollable(s => s.Height("auto"))
    .DataSource(dataSource => dataSource
        .Ajax()            
        .Sort(x => x.Add(y=>y.DownloadDate).Descending()).Sort(x=>x.Add(y=>y.DueDate).Descending())
        .Read(read => read
            .Action("GetData", "Tracking"))
    .ServerOperation(false))
)

Answer 1

There is a syntax error in the proposed answer. Sort statement should be:

.Sort(x =>
{
    x.Add(y=>y.DownloadDate).Descending();
    x.Add(y=>y.DueDate).Descending();
})

Answer 2

The way you're currently adding columns to sort basically overrides the previous column and only takes into account the last column that you write (DueDate in this case). This happens because your .Sort() is written as one single statement.

To get your sorting to work properly you should change your .Sort() to:

.Sort(x =>
{
    x.Add(y=>y.DownloadDate).Descending();
    x.Add(y=>y.DueDate).Descending();
}) 

Answer 3

If you want to enable users to both optionally sort by multiple columns and/or unsort, make the following change:

from: .Sortable(x => x.AllowUnsort(false))

to: .Sortable(x=> x .SortMode(GridSortMode.MultipleColumn) .AllowUnsort(true) )