Change Grid Height When Using Frozen Columns
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | Windows 10 64bit |
| Preferred Language | JavaScript |
Description
How can I resize a Kendo UI 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.
<div id="example">
<p>Group by the ShipCountry column and collapse some groups.</p>
<div id="grid"></div>
<script>
$(function() {
function attachGroupResizeHandler(grid) {
grid.wrapper.find(".k-grouping-row .k-icon").on("click", function(){
resizeGrid(grid);
});
}
function detachGroupResize(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();
});
}
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 15
},
height: 540,
dataBinding: detachGroupResize,
dataBound: onDataBound,
groupable: true,
resizable: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
},{
field: "ShipName",
title: "Ship Name",
locked: true,
width: 300
}, {
field: "ShipAddress",
lockable: false,
width: 400
}
]
});
});
</script>
</div>