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

Automatically Fit Width of Grid Columns to Show All Data

Environment

Product

Progress® ASP.NET Core Grid

Version

2023.3.1114

Description

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

Solution

Subscribe to the DataBound event of the Grid.
Loop through the Grid columns and pass the column index to the client-side autoFitColumn method.

Razor
  @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
      .Name("Grid")
      .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);
      })
      .Pageable()
      .Events(events => events.DataBound("onDataBound"))
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .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")
      )
  )
Razor
  @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">
                  <fields>
                      <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>
                  </fields>
              </model>
          </schema>
          <transport>
              <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")"/>
          </transport>
      </datasource>
      <columns>
          <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">
              <commands>
                  <column-command text="Delete" name="destroy"></column-command>
              </commands>
          </column>
      </columns>
      <pageable enabled="true"/>
  </kendo-grid>
JavaScript
    function onDataBound(e){
        for (var i = 0; i < this.columns.length; i++) {
              this.autoFitColumn(i);
        }
    }

Explore the solution in REPL

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

Notes

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.