Kendo Angular 2 网格高度

Question

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

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

使用以下 CSS：

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

但是当我尝试使用 angular2 的 Kendo 网格时，它不起作用。

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

Answer 1

使用滚动（和静态标题）时，网格内容区域也需要有一个高度。目前不支持基于页面动态计算它，并且不适用于 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是标题的大小，3em是您想要的偏移量。

有关工作演示，请参阅此 plunkr 示例。

Answer 2

我能够使用以下配置设置动态高度

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

在 TS 文件中

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

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