• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.

Example of AutoFit and Resizing in ASP.NET MVC 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.


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 MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing