AutoFit Columns in ASP.NET MVC Grid Component

18 Mar 20244 minutes to read

The Grid has a feature that allows it to automatically adjust column widths based on the maximum content width of each column when you double-click on the resizer symbol located in a specific column header.  This feature ensures that all data in the grid rows is displayed without wrapping. To use this feature, you need to enable the resizer symbol in the column header by setting the AllowResizing property to true in the grid.

Resizing a Column to fit its content using autoFit method

The autoFitColumns method resizes the column to fit the widest cell’s content without wrapping. You can autofit a specific column at initial rendering by invoking the autoFitColumns method in DataBound event.

@Html.EJS().Grid("AutoFit").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
    col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
    col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Format("C2").Add();
    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();

}).AllowPaging().DataBound("dataBound").Render()

<script>
    function dataBound(args) {
        this.autoFitColumns(['OrderDate', 'ShipCountry']);
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

You can autofit all the columns by invoking the autoFitColumns method without specifying column names.

AutoFit columns with empty space

The Autofit feature is utilized to display columns in a grid based on the defined width specified in the columns declaration. If the total width of the columns is less than the width of the grid, this means that white space will be displayed in the grid instead of the columns auto-adjusting to fill the entire grid width.

You can enable this feature by setting the AutoFitproperty set to true. This feature ensures that the column width is rendered only as defined in the Grid column definition.

@Html.EJS().Grid("AutoFit").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowResizing(true).Columns(col =>
   {
       col.Field("OrderID").HeaderText("Order ID").MinWidth("100").Width("150").MaxWidth("200").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
       col.Field("CustomerID").HeaderText("Customer ID").Width("150").MinWidth("8").Add();
       col.Field("Freight").HeaderText("Freight").Width("120").MinWidth("8").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
       col.Field("ShipCity").HeaderText("Ship City").Width("150").AllowResizing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
       col.Field("ShipCountry").HeaderText("Ship Country").MinWidth("8").Width("150").Add();

   }).Height("400").Width("850").AutoFit(true).Render()
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

If any one of the column width is undefined, then the particular column will automatically adjust to fill the entire width of the grid table, even if you have enabled the AutoFit property of grid.

AutoFit columns with specific rows

To adjust the column widths of a specific range of rows based on their content, you can use the autoFitColumns method by simply passing the second and third parameters (optional) as the start and end index for the column you want to fit. You can autofit specific columns at initial rendering by invoking the autoFitColumns method in dataBound event.

This feature will calculate the appropriate width based on the maximum content width of the specified range of rows or the header text width. Subsequently, the maximum width of the content of the specified rows or header text will be applied to the entire column of the grid.

Here is an example of how to autofit columns with specific rows. The first parameter is an array containing the specific column field names, such as Inventor, Number of INPADOC patents and Main fields of invention is passed to apply the autofit functionality to these columns. After, the second parameter are start index is set to 1 and third parameter are end index is set to 3. When specifying these start and end index, the autofit operation is applied only to the range of rows from 1 to 3 for column width adjustment.

@Html.EJS().Grid("AutoFitSpecficColumn").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
    col.Field("Inventor").HeaderText("Inventor").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();
    col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("150").Add();
    col.Field("Country").HeaderText("Country").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("Number of INPADOC patents").HeaderText("Number of INPADOC patents").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
    col.Field("Active").HeaderText("Active").Width("150").Add();
    col.Field("Mainfieldsofinvention").HeaderText("Mainfieldsofinvention").Width("150").Add();

}).AllowPaging().DataBound("dataBound").AllowResizing(true).Render()

<script>
    function dataBound(args) {
        this.autoFitColumns(['Inventor', 'Number of INPADOC patents', 'Mainfieldsofinvention'], 1, 3);
    }
</script>
public IActionResult Index()
{
    var orders = InventorDetails.GetAllRecords();
    ViewBag.datasource = orders;            
    return View();
}