Example of AutoFit and Resizing in ASP.NET Core Data Grid Control

This sample demonstrates the Grid column rendering with a specified width. This sample also shows how to enable the resizing feature. Click and drag the right corner of each column header to resize it.

DEMO
SOURCE

By default, if the total width of the columns is less than the width of the Grid, columns will automatically fill to the grid's width. The Grid's AutoFit feature prevents Grid columns from filling more than their specified width by enabling the autoFit as true.


The Grid columns can be resized by clicking and dragging at the right edge of column's header. To enable column, resize behavior, set the allowResizing property to true. You can also prevent the resize of a particular column by setting columns->allowResizing to false in columns definition. And, by double clicking at the right edge of column header, the respective column width will get auto adjusted to its fit using the autoFitColumns method.


In this demo, the allowResizing feature is enabled by setting the allowResizing property to true and Order ID column can be resized between the range of minWidth (100px) and maxWidth (200px). Also, column resizing is disabled for the Shipped Date column.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE