New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Resizing the Grid to Match the Visible Column Widths
Environment
Product | Progress® Telerik® UI Grid for UI for ASP.NET MVC |
Description
How can I resize the Grid to match the visible column widths when hiding or showing columns while the sum of the column widths is less than the initial width of the Grid?
Solution 1
Enforce a min-width
style to the table element using only CSS:
Razor
<style>
#grid table {
min-width:100%;
}
</style>
Solution 2
-
Create a function to calculate the sum of widths of all visible columns
getAllColumnsWidth(e)
. -
Call a method that sets the Grid's width, use
dataBound
,columnShow
, andcolumnHide
events.
Razor
@(Html.Kendo().Grid<AutoResizeGridRemovingColumns.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Width(100).Filterable(false);
columns.Bound(p => p.Freight).Width(200);
columns.Bound(p => p.OrderDate).Width(200).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName).Width(200);
columns.Bound(p => p.ShipCity).Width(100);
})
.Pageable()
.Scrollable()
.ColumnMenu()
.Events(ev=>
{
ev.DataBound("onDataBound");
ev.ColumnHide("onColumnHide");
ev.ColumnShow("onColumnShow");
})
.HtmlAttributes(new { style = "height:200px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)