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

Question

我想在加载数据时阻止/禁用 Kendo Angular2/4 Grid。

最好的方法是什么？

在我的组件中，我有一个 isWorking 变量，如果数据正在加载（ajax API 调用），则该变量为真/假：

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

我发现的唯一不使用的选项是在 kendo-grid 元素上使用 *ngIf="!isWorking" 隐藏/显示网格，但它有点笨重而且不是很用户友好。

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>