Adjust Row Heights When Data Grid Columns Are Locked
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Preferred Language | JavaScript |
Description
You might have to handle a scenario with locked columns where the content of the column template is initially hidden through the ng-if directive.
In such cases, if you show the content later, you might cause issues related to the proper calculation of the row heights for the locked and unlocked parts of the Grid. To avoid such possible issues, conditionally call the resize() and refresh() methods of the Grid in its dataBound event when the scope value that controls the visibility of the template content is changed.
Solution
The following example demonstrates how to adjust the row heights in a Kendo UI Grid with locked columns and with a column template that uses the ng-if directive.
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid k-scope-field="grid" options="mainGridOptions"></kendo-grid>
<kendo-button k-click="toggleVisible">Toggle hidden</kendo-button>
</div>
</div>
<style>
.contact-info-form {
list-style-type: none;
margin: 30px 0;
padding: 0;
}
.contact-info-form li {
margin: 10px 0;
}
.contact-info-form label {
display: inline-block;
width: 100px;
text-align: right;
font-weight: bold;
}
</style>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope, $timeout){
$scope.visible = false;
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
dataBound: function(e){
if(!$scope.visible){
e.sender.resize(true);
}
},
pageable: true,
height: 500,
columns: [{
field: "FirstName",
title: "First Name",
width: "120px",
locked: true
},{
field: "LastName",
title: "Last Name",
width: "320px",
template: '<div ng-if=visible><div>Custom content</div><div>Custom content</div><div>Custom content</div><div>Custom content</div><div>Custom content</div></div>'
},{
field: "Country",
width: "320px"
},{
field: "City",
width: "320px"
},]
};
$scope.toggleVisible = function(){
$scope.visible = !$scope.visible;
$scope.grid.refresh();
}
})
</script>