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

Sorting

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        sorting.cshtml
                    
                        SortingController.cs

Also available for:

API REFERENCE

Grid with single column sorting enabled

Ship Country	Freight	Order Date

kendo.syncReady(function(){jQuery("#singleSort").kendoGrid({"columns":[{"title":"Ship Country","headerAttributes":{"data-field":"ShipCountry","data-title":"Ship\u0026#32;Country"},"width":"300px","field":"ShipCountry","encoded":true},{"title":"Freight","headerAttributes":{"data-field":"Freight","data-title":"Freight"},"width":"300px","field":"Freight","encoded":true},{"title":"Order Date","headerAttributes":{"data-field":"OrderDate","data-title":"Order\u0026#32;Date"},"field":"OrderDate","format":"{0:dd/MM/yyyy}","encoded":true}],"pageable":{"buttonCount":5},"sortable":{"allowUnsort":false},"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/Grid/Sorting_Orders_Read"},"prefix":""},"pageSize":5,"page":1,"groupPaging":false,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"OrderID":{"type":"number"},"CustomerID":{"type":"string"},"ContactName":{"type":"string"},"Freight":{"type":"number","defaultValue":null},"ShipAddress":{"type":"string"},"OrderDate":{"type":"date","defaultValue":null},"ShippedDate":{"type":"date","defaultValue":null},"ShipCountry":{"type":"string"},"ShipCity":{"type":"string"},"ShipName":{"type":"string"},"EmployeeID":{"type":"number","defaultValue":null}}}}}});}); Grid with multiple column sorting enabled

Ship Country	Freight	Order Date

kendo.syncReady(function(){jQuery("#multipleSort").kendoGrid({"columns":[{"title":"Ship Country","headerAttributes":{"data-field":"ShipCountry","data-title":"Ship\u0026#32;Country"},"width":"300px","field":"ShipCountry","encoded":true},{"title":"Freight","headerAttributes":{"data-field":"Freight","data-title":"Freight"},"width":"300px","field":"Freight","encoded":true},{"title":"Order Date","headerAttributes":{"data-field":"OrderDate","data-title":"Order\u0026#32;Date"},"field":"OrderDate","format":"{0:dd/MM/yyyy}","encoded":true}],"pageable":{"buttonCount":5},"sortable":{"mode":"multiple","showIndexes":true},"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/aspnet-mvc/Grid/Sorting_Orders_Read"},"prefix":""},"pageSize":5,"page":1,"groupPaging":false,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"OrderID":{"type":"number"},"CustomerID":{"type":"string"},"ContactName":{"type":"string"},"Freight":{"type":"number","defaultValue":null},"ShipAddress":{"type":"string"},"OrderDate":{"type":"date","defaultValue":null},"ShippedDate":{"type":"date","defaultValue":null},"ShipCountry":{"type":"string"},"ShipCity":{"type":"string"},"ShipName":{"type":"string"},"EmployeeID":{"type":"number","defaultValue":null}}}}}});}); .demo-section h3 { margin: 5px 0 15px 0; }

Description

You can learn in this sample how to enable sorting for the Telerik MVC grid. Since this functionality is built-in, all you have to do is to set the sorting configuration via the Sortable attribute. The supported sorting modes are single and multiple, which can be specified through the SortMode property.

Sorting

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo