Kendo Angular 2 Grid Height

Question

I want my grid to have a dynamic height. Before with angular 1 and kendo i would do like this.

<kendo-grid id="grid" options="entityGrid.gridOptions"></kendo-grid>

With the following CSS:

#grid {
    height: calc(100% - 1em);
}

But with Kendo grid for angular2 when i try this it wont work.

<kendo-grid id="grid"
            [data]="entityGrid?.view | async"
            [scrollable]="'virtual'">
 </kendo-grid>

Answer 1

When using scrolling (and static headers), the grid content area needs to have a height, too. Computing it dynamically based on the page is not supported at this time, and is not going to work with angular-universal. You can log this as a feature request on the kendo-angular2 repo, so that it is considered for implementation.

That said, you can use the following hack to make it work:

encapsulation: ViewEncapsulation.None,
styles: [
  `kendo-grid {
    height: calc(100% - 3em);
    margin-top: 3em;
  }
  kendo-grid .k-grid-content {
    height: calc(100% - 46px);
  }`
],

This will pass the styles in the component itself. The value 46px is the size of the header, and 3em is your desired offset.

See this plunkr example for a working demo.

Answer 2

I was able to set dynamic height with following configuration

<kendo-grid class="grid"
   [kendoGridGroupBinding]="data"
   [ngStyle]="gridHeight"
</kendo-grid>

In TS file

public gridHeight = {
   height: 'calc(100vh - 140px)'
};

You can set height as per your requirement from TS