Kendo Angular 2 网格高度

Question

我希望我的网格具有动态高度。在使用 angular 1 和 kendo 之前，我会这样做。

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

具有以下CSS：

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

但是 Kendo 网格 angular2 当我尝试这个时它不会工作。

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

Answer 1

使用滚动（和静态 headers）时，网格内容区域也需要有高度。目前不支持基于页面动态计算它，并且不适用于 angular-universal。您可以将其记录为 kendo-angular2 repo 上的功能请求，以便考虑实施。

也就是说，您可以使用以下 hack 来使其工作：

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

这将传递组件本身的样式。值 46px 是 header 的大小，3em 是您想要的偏移量。

有关工作演示，请参阅 this plunkr example。

Answer 2

我可以通过以下配置设置动态高度

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

TS文件中

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

您可以根据您的要求从 TS 设置高度

Kendo Angular 2 网格高度

Kendo Angular 2 Grid Height

kendo-ui-angular2