6

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

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

使用以下 CSS：

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

但是当我尝试使用 angular2 的剑道网格时，它不会工作。

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

2 回答 2

5

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

也就是说，您可以使用以下技巧使其工作：

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 示例。

于 2016-11-24T12:51:55.700 回答
3

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

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

在 TS 文件中

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

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

于 2020-04-14T11:35:13.873 回答