New to Kendo UI for jQuery? Download free 30-day trial

Adjust Row Heights When Data Grid Columns Are Locked


Product Progress® Kendo UI® Grid for jQuery
Preferred Language JavaScript


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.


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>

      .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;

      angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope, $timeout){
        $scope.visible = false;
        $scope.mainGridOptions = {
          dataSource: {
            type: "odata",
            transport: {
              read: "//"
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
          sortable: true,
          dataBound: function(e){
          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;

See Also

In this article