New to Kendo UI for Angular? Start a free 30-day trial

Binding the Angular Data Grid to OData

The Kendo UI for Angular Grid has representational functionality and is indifferent to where its data comes from and how it is retrieved and/or updated. This allows you to use any remote data source including the OData v4 protocol.

The following step-by-step guide shows how to bind the Grid, using the OData v4 protocol:

Create the necessary data service and implement methods to fetch and read the data.

public read(): void {
    this.fetch().subscribe((data) => {
        super.next(data);
    });
}

public fetch(): Observable<Product[]> {
    return this.http
        .get(`https://demos.telerik.com/kendo-ui/service-v4/odata/Products/`)
        .pipe(map((data: any) => <Product[]>data.value));
}

Inject the created data service where the Grid component is defined.
ts
```
constructor(public odataService: ODataService) {}
```

Get the data from the server and bind the Grid to the obtained collection. For more details on how to handle data operations on the server, check the Processing Data on the Server article.

public gridData!: Observable<GridDataResult>;

public ngOnInit(): void {
    this.gridData = this.odataService.pipe(
      map((data) => process(data, this.gridState))
    );
    this.odataService.read();
}

Set the data input property of the component to an Observable of type GridDataResult. Once the data is received from an asynchronous source, pipe it through the async pipe.
html
```
<kendo-grid [data]="gridData | async" ...>
    <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
    ...
</kendo-grid>
```

Create an editable Grid using the OData v4 protocol by following the steps outlined in the In-Cell Editing with OData Service article.

The following example demonstrates how to bind the Grid by using the OData v4 protocol.

Change Theme

Theme

Loading ...

Binding the Angular Data Grid to OData

Suggested Links