New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Sorting

By default, the sorting functionality of the Telerik UI Grid for ASP.NET MVC is disabled.

Getting Started

To control the sorting in the Grid, use the Sortable option. as a result, the default single-column sorting functionality will be applied.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .Sortable()
        ...
    )

Only columns that are bound to a field can be sortable. To enable sorting on a column bound to an object, bind the column to a field of that object.

Sort Modes

The Grid supports the following sort modes:

Single-Column Sorting

By default, the Grid applies single-column sorting when the Sortable() method is enabled. Alternatively, you can configure single-column sort mode by setting the SortMode.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .Sortable(sortable => sortable
            .SortMode(GridSortMode.SingleColumn))
        ...
    )

Multi-Column Sorting

To allow the multi-column sorting, set the SortMode() method to MultipleColumn.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .Sortable(sortable => sortable
            .SortMode(GridSortMode.MultipleColumn))
        ...
    )

You can also specify if the columns can be unsorted by setting the AllowUnsort property to true or false. for a runnable example, refer to the demo on sorting in the grid.

With the multi-column sorting you can configure the Grid to display the sort indexes in the header by enabling the ShowIndexes property.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.MultipleColumn)
            .ShowIndexes(true))
        ...
    )

Mixed-Column Sorting

The mixed sorting allows you to single-sort columns by clicking their header and multi-sort columns by holding the CTRL key and clicking 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.

To enable the mixed-column sorting, set the SortMode() option to Mixed.

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .Sortable(sortable => sortable
            .SortMode(GridSortMode.Mixed))
        ...
    )

Defining Field Type

If you want to sort a column as a different type than the original one in the database (for example, decimal<->string and vice versa), you can use the following approach:

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .Sortable()
        ...
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(m =>
            {
                m.Id("OrderID");
                m.Field("Freight", typeof(string));
            })
            .ServerOperation(false)
            .PageSize(20)
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
    )

See Also

In this article