Question

我对可滚动网格的网格高度有疑问。事情来自source

此解决方案无法为我提供很好的答案。因为它有

    styles: [`
  html, body, my-app {
    height: 100%;
  }
']

但是我的网格有很多控件，我不知道网格中有很多行。所以我给一个固定的高度。现在，我想为网格使用动态高度。

demo stackblize

Answer 1

在[style.height.%]="100"元素上注释<kendo-grid>；或者，如果需要该CSS，请添加以下CSS：.k-widget.k-grid { height:auto; }

从您的example stackblitz将 app.component.ts 更新为以下内容：

import { Component, ViewEncapsulation } from '@angular/core';
import { products } from './products';
import { sampleProducts } from './products';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" >
            <kendo-grid-column field="ProductID" title="ID" width="40">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name" width="250">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price" width="80">
            </kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
            </kendo-grid-column>
            <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
  /*html, body, my-app {
    height: 100%;
  }*/
  /* Add the following if you don't remove [style.height.%]="100" from  <kendo-grid [data]="gridData" > */
  /*
  .k-widget.k-grid { height:auto; }
  */
    `]
})
export class AppComponent {
    public gridData: any[] = sampleProducts;
}

需要窗口调整大小事件以计算高度

1 个答案: