Busyindicator for angular2 network kendo ui before data is downloaded via http

Question

I am using angular2 kendo ui grid and grid snap data by http call

before the HTTP call returns the data, I need to show a busy indicator without showing the grid title until the data is assigned. How to achieve this

Thanks, Raghu s

Answer 1

I achieved this by declaring the following in an HTML template.

Add a new div above the grid with conditional loading text to load the grid:

<div *ngIf="loading == true" class="loader">Loading..</div>

Add a wrapper div around the grid to complete the download:

<div *ngIf="loading == false">
  <kendo-grid [data]="view1">
  <kendo-grid>
</div>

AT app.component.ts

export class AppComponent{
    private loading: boolean = true;

constructor(private http: Http      
    ) {
        http.get('/api/Data')
            .map(response => response.json())
            .subscribe(result => {

                this.loading = false;
                this.view1 = result;
                this.loadProducts();
            },
                 err => console.log(err)
            );
    }
}

Answer 2

You can use one of the following elements, conditionally adding -

<span class="k-icon k-i-loading"></span>
<span class="k-icon k-i-loading" style="font-size: 64px;"></span>
<span class="k-icon k-i-loading" style="color: limegreen;"></span>

As i did

<div *ngIf="!this.gridData">
    <span class="k-icon k-i-loading" style="font-size: 64px;"></span>
</div>

http://www.telerik.com/kendo-angular-ui/components/styling/icons/#toc-flipping

Answer 3

Starting with version 3.1.0, the Kendo UI Grid for Angular has a built-in progress bar.

See sample documentation here .

The basic premise is to set the property[loading] kendo-grid :

<kendo-grid 
  [loading]="yourService.loading"
  ...
>
<!-- Grid column configuration -->
</kendo-grid>

And then in your class of service, set the boolean variable to true or false, depending on the state of your queries to remote data sources:

export abstract class NorthwindService extends BehaviorSubject<GridDataResult> {
    public loading: boolean;

    private BASE_URL = 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/';

    constructor(
        private http: HttpClient,
        protected tableName: string
    ) {
        super(null);
    }

    public query(state: any): void {
        this.fetch(this.tableName, state)
            .subscribe(x => super.next(x));
    }

    protected fetch(tableName: string, state: any): Observable<GridDataResult> {
        const queryStr = '${toODataString(state)}&$count=true';
        this.loading = true;

        return this.http
            .get('${this.BASE_URL}${tableName}?${queryStr}')
            .pipe(
                map(response => (<GridDataResult>{
                    data: response['value'],
                    total: parseInt(response['@odata.count'], 10)
                })),
                tap(() => this.loading = false)
            );
    }
}