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

Question

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

最好的方法是什么？

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

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

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

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>