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

Automatically Fit Width of Grid Columns to Show All Data


Product Progress® ASP.NET MVC Grid Version 2023.3.1114


How can I have the columns of a ASP.NET MVC Grid automatically fit their width to accommodate their content?


  1. Subscribe to the DataBound event of the Grid.
  2. Loop through the Grid columns and pass the column index to the client-side autoFitColumn method.
      .Columns(columns =>
              columns.Bound(p => p.ProductName).Title("Product Name").Width(320);
              columns.Bound(p => p.UnitPrice).Title("Unit Price").Width(150);
              columns.Bound(p => p.UnitsInStock).Title("Units In Stock").Width(150).MinScreenWidth(800);
              columns.Bound(p => p.UnitsOnOrder).Title("Units On Order").Width(150).MinScreenWidth(800);
              columns.Bound(p => p.Discontinued).Width(130);
              columns.Command(command => command.Destroy()).Width(160);
      .Events(events => events.DataBound("onDataBound"))
      .DataSource(dataSource => dataSource
          .Model(model =>
              model.Id(p => p.ProductID);
              model.Field(p => p.ProductID).Editable(false);
          .Create("Products_Create", "Grid")
          .Read("Products_Read", "Grid")
          .Update("Products_Update", "Grid")
          .Destroy("Products_Destroy", "Grid")
  @addTagHelper *, Kendo.Mvc

  <kendo-grid name="Grid" navigatable="true" on-data-bound="onDataBound">
      <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
          <schema data="Data" total="Total">
              <model id="ProductID">
                      <field name="ProductID" type="number" editable="false"></field>
                      <field name="ProductName" type="string"></field>
                      <field name="UnitPrice" type="number"></field>
                      <field name="UnitsInStock" type="number"></field>
                      <field name="Discontinued" type="boolean"></field>
              <read url="@Url.Action("Products_Read", "Grid")"/>
              <update url="@Url.Action("Products_Update", "Grid")"/>
              <create url="@Url.Action("Products_Create", "Grid")"/>
              <destroy url="@Url.Action("Products_Destroy", "Grid")"/>
          <column field="ProductName" width="320" title="Product Name"/>
          <column field="UnitPrice" title="Unit Price" width="150"/>
          <column field="UnitsInStock" title="Units In Stock" width="150" min-screen-width="800"/>
          <column field="UnitsOnOrder" title="Units On Order" width="150" min-screen-width="800"/>
          <column field="Discontinued" width="130"/>
          <column width="160">
                  <column-command text="Delete" name="destroy"></column-command>
      <pageable enabled="true"/>
    function onDataBound(e){
        for (var i = 0; i < this.columns.length; i++) {


Applying auto-sizing to all columns of the Grid is a resource intensive operation. Depending on the number of configured columns, it may cause performance issues on the client-side.

More ASP.NET MVC Grid Resources

See Also

In this article