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>