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

Column resizing

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_resizing.cshtml
                    
                        Column_ResizingController.cs
                    
                        OrderViewModel.cs

Also available for:

API REFERENCE

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"sortable":true,"columns":[{"title":"Order Date","width":"110px","field":"OrderDate","format":"{0:MM/dd/yyyy}","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Ship Country","width":"110px","minResizableWidth":100,"field":"ShipCountry","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Ship City","width":"110px","field":"ShipCity","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Ship Name","width":"200px","field":"ShipName","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Ship Address","field":"ShipAddress","format":"{0:MM/dd/yyyy}","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Order ID","width":"60px","field":"OrderID","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true}],"pageable":{"buttonCount":10},"resizable":true,"scrollable":{"height":"400px"},"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-core/Grid/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

This example demonstrates how you can enable the columns resizing feature of the ASP.NET Core Grid by using the Resizable(true) method.

Once it is set the users can resize columns by dragging the edges (resize handles) of their header cells. They can also auto-fit a column by double-clicking its resize handle as in Excel.

More about Telerik Grid for ASP.NET Core

Support & Learning Resources

Was this demo helpful?

YES NO

Tell us how we can improve this demo

Submit Skip