Kendo Angular 2 网格高度答案

【问题标题】：Kendo Angular 2 Grid HeightKendo Angular 2 网格高度
【发布时间】：2016-11-24 08:51:23
【问题描述】：

我希望我的网格具有动态高度。在使用 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>

【问题讨论】：

标签： kendo-ui-angular2

【解决方案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 以获得工作演示。

【讨论】：

谢谢，这正是我要找的！

【解决方案2】：

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

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

在 TS 文件中

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

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

【讨论】：