Adjust Row Heights When 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>

See Also

In this article
Not finding the help you need? Improve this article