Binding the Angular Data Grid to OData

The Kendo 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:

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

   Copy Codepublic 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));
   }

2. Inject the created data service where the Grid component is defined.

   Copy Codeconstructor(public odataService: ODataService) {}

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

   Copy Codepublic gridData!: Observable<GridDataResult>;
   
   public ngOnInit(): void {
       this.gridData = this.odataService.pipe(
         map((data) => process(data, this.gridState))
       );
       this.odataService.read();
   }

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

   Copy Code<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.

Suggested Links

• Binding to Remote Data
• Built-in DataBindingDirective
• API Reference of the GridComponent
• API Index of the Grid