New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Resizing the Grid to Match the Visible Column Widths

Environment

ProductProgress® 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

  1. Create a function to calculate the sum of widths of all visible columns getAllColumnsWidth(e).

  2. Call a method that sets the Grid's width, use dataBound, columnShow, and columnHide 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"))
     )
 )

More ASP.NET MVC Grid Resources

See Also