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
DataBoundevent of the Grid. - Loop through the Grid columns and pass the column index to the client-side
autoFitColumnmethod.
@(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")
)
)
@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>
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:
- Sample code with the Autofit Grid Columns HtmlHelper
- Sample code with the Autofit Grid Columns TagHelper
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.