Kendo Angular2/4 的网格 - 加载数据时阻止网格

Question

我想block/disable Kendo Angular2/4 Grid 在加载数据的时候。

最好的方法是什么？

在我的组件中，我有一个 isWorking 变量，如果正在加载数据（ajax API 调用），它是 true/false：

export class GridFilterComponent { public view: Observable<GridDataResult>; public state: State = { skip: 0, take: 10 }; public isWorking = true;

我找到的唯一未使用的选项是在 kendo-grid 元素上使用 *ngIf="!isWorking" 来 hide/show 网格，但它有点笨拙且不太用户友好。

Answer 1

将网格放入<div>

<div [ngClass]="isWorking ? 'gridDisabled': ''">
    <kendo-grid [data]="gridData"></kendo-grid>
</div>

.gridDisabled{
    pointer-events: none;   
    opacity: 0.5;
}

简短版本：

<div [class.gridDisabled]="isWorking">
    <kendo-grid [data]="gridData"></kendo-grid>
</div>

Kendo Angular2/4 的网格 - 加载数据时阻止网格

Kendo Grid for Angular2/4 - block grid while loading data

kendo-grid

kendo-ui-angular2