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

Automatically Fit Width of Grid Columns to Show All Data

Environment

Product

Progress® ASP.NET MVC Grid

Version

2023.3.1114

Description

How can I have the columns of a ASP.NET MVC 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);
        }
    }

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.

Automatically Fit Width of Grid Columns to Show All Data

Environment

Description

Solution

Notes

More ASP.NET MVC Grid Resources

See Also