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

Sorting

By default, the sorting functionality of the Telerik UI Grid for ASP.NET Core 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()
        ...
    )
     <kendo-grid name="Grid">
        <sortable enabled="true"/>
     </kendo-grid>

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))
        ...
    )
     <kendo-grid name="Grid">
        <sortable enabled="true" mode="single"/>
     </kendo-grid>

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))
        ...
    )
     <kendo-grid name="Grid">
        <sortable enabled="true" mode="multiple"/>
     </kendo-grid>

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))
        ...
    )
     <kendo-grid name="Grid">
        <sortable enabled="true" allow-unsort="true" mode="multiple" show-indexes="true"/>
     </kendo-grid>

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))
        ...
    )
     <kendo-grid name="Grid">
        <sortable enabled="true" mode="mixed"/>
     </kendo-grid>

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"))
        )
    )
     <kendo-grid name="Grid">
        <sortable enabled="true"/>
        <datasource type="DataSourceTagHelperType.Ajax" page-size="20" server-operation="false">
            <schema>
               <model id="OrderID">
                   <fields>
                       <field name="Freight" type="string"></field>
                   </fields>
               </model>
            </schema>
            <transport>
                <read url="@Url.Action("Orders_Read","Grid")"/>
            </transport>
        </datasource>
     </kendo-grid>

See Also

In this article