Sorting kendo grid on multiple columns
I have a kendo mesh. When the page loads, by default I want to sort the grid by column1 and then by column in descending order.
Question: Its sorting is as expected, but the sort arrow is displayed in the last sorted column. So in the example below, when the page is loaded, 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))
)
source to share
The way you add columns for sorting basically overrides the previous column and only takes into account the last column you write ( DueDate
in this case). This is because yours is .Sort()
recorded as a single statement.
For your sort to work correctly, you must change yours .Sort()
to:
.Sort(x =>
{
x.Add(y=>y.DownloadDate).Descending());
x.Add(y=>y.DueDate).Descending());
}
source to share