All Components

Data Binding

The main purpose of the Grid is to display your model data. The appropriate type of data binding depends on your scenario and the features you need.

The Grid can be bound to Array or GridDataResult objects by setting the data property of <kendo-grid>. When paging is disabled, bind the data directly as an Array object. When paging or virtual scrolling is enabled, use the GridDataResult option because it enables you to set the total number of records as different from the currently provided data length.

If the data is received from an asynchronous source, pipe it through the async pipe.

import { Component, ViewChild, Input, OnInit, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable, BehaviorSubject } from 'rxjs/Rx';

import {
    GridComponent,
    GridDataResult,
    DataStateChangeEvent
} from '@progress/kendo-angular-grid';

import {
    toODataString
} from '@progress/kendo-data-query';

/* Example service */
@Injectable()
export class CategoriesService extends BehaviorSubject<GridDataResult> {
    private BASE_URL: string = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
    private tableName: string = "Categories";

    constructor(private http: Http) {
        super(null);
    }

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

    private fetch(tableName: string, state: any): Observable<GridDataResult> {
        const queryStr = `${toODataString(state)}&$count=true`;
        return this.http
            .get(`${this.BASE_URL}${tableName}?${queryStr}`)
            .map(response => response.json())
            .map(response => (<GridDataResult>{
                data: response.value,
                total: parseInt(response["@odata.count"], 10)
            }));
    }
}
@Component({
  providers: [CategoriesService],
  selector: 'my-app',
  template: `
      <kendo-grid
          [data]="view | async"
          [pageSize]="pageSize"
          [skip]="skip"
          [pageable]="true"
        >
        <kendo-grid-column field="CategoryID" width="100"></kendo-grid-column>
        <kendo-grid-column field="CategoryName" width="200"></kendo-grid-column>
        <kendo-grid-column field="Description" [sortable]="false">
        </kendo-grid-column>
      </kendo-grid>
  `
})

class AppComponent {
    private view: Observable<GridDataResult>;
    private pageSize: number = 5;
    private skip: number  = 0;

    @ViewChild(GridComponent) private grid: GridComponent;
    constructor(private service: CategoriesService) {
        this.view = service;

        this.service.query({ skip: this.skip, take: this.pageSize });
    }

    public ngAfterViewInit(): void {
        this.grid.dataStateChange
            .do(({ skip, take }: DataStateChangeEvent) => {
                this.skip = skip;
                this.pageSize = take;
            })
            .subscribe(x => this.service.query(x));
    }
}

In this article