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

Automatically Fit Width of Grid Columns to Show All Data


Product Progress® ASP.NET Core Grid Version 2023.3.1114


How can I have the columns of a ASP.NET Core 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++) {

Explore the solution in REPL

You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:


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 Core Grid Resources

See Also

In this article