Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sorting kendo grid on multiple columns

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))
)
like image 919
LP13 Avatar asked Jul 15 '15 18:07

LP13


People also ask

How do I sort Kendo Grid column?

Grid with mixed column sorting enabled To multi-sort the columns, hold the "CTRL" key and click the columns header. A single-click (without holding the "CTRL" key) on any column un-sorts the currently sorted columns and applies single-sorting to the clicked column.

How do I add sorting to Kendo grid?

To enable the sorting when the kendoGridBinding directive is applied: Set the sortable option of the Grid. (Optional) Set the sort property to a collection of SortDescriptor objects. This allows you to sort the data by specific criteria during the initialization of the Grid.

How do I group data in kendo grid?

To enable grouping, set the groupable option to true . As a result, the Grid exposes a new area in its header which enables the user to group the Grid data by a column. To group the data by multiple columns, users can drag the desired columns to the grouping header. $("#grid").

How do you put a filter on a kendo grid?

With the Kendo UI grid you can enable filter row in its header by setting the grid's filterable->mode property to row.


2 Answers

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();
})
like image 193
Netgiant Glen Avatar answered Oct 05 '22 23:10

Netgiant Glen


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();
} 
like image 40
Nico Avatar answered Oct 06 '22 00:10

Nico