Changing Grid Height When Using Frozen Columns
Environment
| Product | Grid for Progress® Telerik® UI for UI for ASP.NET Core |
Description
How can I resize a Telerik UI for ASP.NET Core Grid which has frozen columns?
Solution
The frozen column functionality requires the Grid to have fixed height. However, the suggested approach ensures that the Grid is able to calculate and construct its layout properly during resizing.
The following example demonstrates how to change the height style of the div wrapper element and then call the resize method of the Grid.
<p>Group by the ShipCountry column and collapse some groups.</p>
@(Html.Kendo().Grid<GridHeightFrozenColumns.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false).Locked(true).Lockable(false).Width(150);
columns.Bound(p => p.Freight).Width(150);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(150);
columns.Bound(p => p.ShipCountry).Width(150);
})
.Pageable()
.Groupable()
.Scrollable()
.Height("550")
.Events(ev =>
{
ev.DataBinding("onDataBinding");
ev.DataBound("onDataBound");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
function attachGroupResizeHandler(grid) {
grid.wrapper.find(".k-grouping-row .k-icon").on("click", function () {
resizeGrid(grid);
});
}
function onDataBinding(e) {
e.sender.wrapper.find(".k-grouping-row .k-icon").off("click")
}
function onDataBound(e) {
attachGroupResizeHandler(e.sender);
resizeGrid(e.sender);
}
function resizeGrid(grid) {
setTimeout(function () {
var lockedContent = grid.wrapper.children(".k-grid-content-locked")
var content = grid.wrapper.children(".k-grid-content");
grid.wrapper.height("");
lockedContent.height("");
content.height("");
grid.wrapper.height(grid.wrapper.height());
grid.resize();
});
}