需要 window 调整大小事件来计算高度

Question

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

这个解决方案对我来说不是很好的答案。因为它有

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

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

demo stackblize

Answer 1

注释掉 <kendo-grid> 元素上的 [style.height.%]="100"；或者，如果您需要那个，请添加以下内容 css：.k-widget.k-grid { height:auto; }

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

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;
}

需要 window 调整大小事件来计算高度

Need window resize event to calculate height

javascript

kendo-ui

angular