busyindicator for angular2 kendo ui grid before data is loaded through http

问题

I'm using angular2 kendo ui grid and binding data to the grid by http call

before http call returns the data i need to show busy indicator without showing grid header till data is assigned.How to achive this

Thanks, Raghu s

回答1:

I achieved this by declaring the following within the HTML template.

Add a new div above the grid with a conditional loading text for when the grid is loading:

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

Add a div wrapper around the grid for when the loading in completed:

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

In 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)
            );
    }
}

回答2:

You can use one of following elements adding conditionally -

<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>

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

回答3:

As of version 3.1.0, the Kendo UI Grid for Angular features a built-in loading indicator functionality.

See the sample documentation here.

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

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

And then in your service class set a boolean loading variable to true or false depending on the status of your queries to your 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)
            );
    }
}

来源：https://stackoverflow.com/questions/39893940/busyindicator-for-angular2-kendo-ui-grid-before-data-is-loaded-through-http