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

Column reordering

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

            
                        column_reordering.cshtml
                    
                        Column_ReorderingController.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"columns":[{"title":"Order Date","headerAttributes":{"data-field":"OrderDate","data-title":"Order\u0026#32;Date"},"width":"120px","field":"OrderDate","format":"{0:MM/dd/yyyy}","encoded":true},{"title":"Ship Country","headerAttributes":{"data-field":"ShipCountry","data-title":"Ship\u0026#32;Country"},"field":"ShipCountry","encoded":true},{"title":"Ship City","headerAttributes":{"data-field":"ShipCity","data-title":"Ship\u0026#32;City"},"field":"ShipCity","encoded":true},{"title":"Ship Name","headerAttributes":{"data-field":"ShipName","data-title":"Ship\u0026#32;Name"},"field":"ShipName","encoded":true},{"title":"Shipped Date","headerAttributes":{"data-field":"ShippedDate","data-title":"Shipped\u0026#32;Date"},"field":"ShippedDate","format":"{0:MM/dd/yyyy}","encoded":true},{"title":"Order ID","headerAttributes":{"data-field":"OrderID","data-title":"Order\u0026#32;ID"},"width":"110px","field":"OrderID","encoded":true}],"pageable":{"buttonCount":10},"sortable":true,"resizable":true,"reorderable":true,"scrollable":{"height":"200px"},"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/columnreordering_orders_read"},"prefix":""},"pageSize":15,"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}}}}}});});

Description

You can see in this demo how simple it is to reorder columns in Telerik ASP.NET MVC Grid. Just drag a column header over another header cell.

You can enable this behavior by setting the Reorderable property of the grid.

Column reordering

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo