CODEWITHSUNDEEP
kendo-gridkendo-ui-angular2
Skorunka František
Skorunka František

Reputation: 5430

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

I would like to block/disable Kendo Angular2/4 Grid when it is loading a data.

What is the best approach?

In my component i have a isWorking variable which is true/false if the data are loading(ajax API call):

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

The only option I found, without using is to hide/show grid using *ngIf="!isWorking" on the kendo-grid element, but it is a bit clunky and not very user-friendly.

Upvotes: 0

Views: 152

Answers (1)

dev_in_progress
dev_in_progress

Reputation: 2494

Put grid in <div>

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

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

Short version:

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

Upvotes: 1

Related Questions