Question

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

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

使用以下CSS：

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

但是当我尝试使用角度2的剑道网格时，它无法工作。

<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是您想要的偏移量。

有关正常工作的演示，请参阅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网格高度

2 个答案: