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

Binding the Angular Grid to Remote Data

You can bind the Angular Grid to server-side (remote) data and display the data in tabular form. This approach is suitable for scenarios that involve remote data services and server-side data operations.

The Kendo Angular Grid has representational functionality and isn't affected by the way how the data gets updated and where it comes from. This allows you to use any remote data source. Once the data is received from the server, it can be loaded in two ways. Choose the appropriate approach based on the specific configuration requirements:

Use manual binding through the data property—Provides more control when implementing data operations.
Provide a custom data-binding directive—Suitable for abstracting away the communication with the remote data service.

Using Manual Binding

The manual binding provides the most straightforward way of binding an array of items to the Grid. To bind the Grid to remote data:

Create the necessary remote requests.

Set the data input property of the component. 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="CompanyName"></kendo-grid-column>
    <kendo-grid-column field="ContactName"></kendo-grid-column>
</kendo-grid>

The following example demonstrates how to bind the data property to an array received from an asynchronous source.

Change Theme

Theme

Loading ...

Using the manual binding approach allows you to take full control over the data operations applied to the Grid. To implement custom logic while modifying the data:

Handle the respective data operation events triggered when the user interacts with the Grid.
Modify the received descriptors in the event handlers.
Initiate the necessary remote requests.
Provide the received data set back to the Grid. As a result, the Grid will reflect the changes and update the UI.

Depending on the enabled data operations, you can bind the data property to:

GridDataResult object—when paging or virtual scrolling is enabled.
Array—when paging or virtual scrolling is not applied.

Binding to GridDataResult Object

To improve the Grid performance when the data contains a lot of records, utilize the paging or virtual scrolling features. In such scenarios, bind the data property of the component to a GridDataResult object.

The following example demonstrates how to bind the data property to a GridDataResult object, received from an asynchronous source.

Change Theme

Theme

Loading ...

Using a Remote-Binding Directive

To encapsulate the data operations logic and the requests to the server, you have to implement a custom directive that extends the built-in DataBindingDirective.

A remote data-binding directive is suitable for reducing the boilerplate code, required for the communication between the Grid and the remote data service. The directive can be also reused across multiple Grids throughout the application as necessary.

The following step-by-step guide shows how to create a remote data-binding directive.

Extend the built-in DataBindingDirective of the Grid. This enables you to reuse the state persistance.

    @Directive({
        selector: '[productsBinding]'
    })
    export class ProductsBindingDirective extends DataBindingDirective {}

Use the DI to provide:
- The instance of the data service that will be used to fetch the data.
- The instance of the Grid component—used to update the data and optionally toggle the built-in loading indicator.
ts
```
    constructor(
        private productsService: ProductsService,
        grid: GridComponent) {
        super(grid);
    }
```

Inside the OnInit hook, subscribe to the appropriate service observable that will return the remote server responses and assign the received data set to the data property of the Grid.

By default, the Grid does not trigger an event when it receives a new data set from the server. Use the notifyDataChange method of the DataBindingDirective to notify the Grid that the data is changed.

private serviceSubscription: Subscription;

public ngOnInit(): void {
    this.serviceSubscription = this.productsService.subscribe((result) => {
        this.grid.loading = false; // Hide the loading indicator.
        this.grid.data = result;
        this.notifyDataChange(); // Notify the grid that the data is changed.
    });

    super.ngOnInit(); // Call the base implementation.

    this.rebind(); // Custom function for querying the data.
}

Use the rebind function to pass the current Grid State to a dedicated data service method that returns the updated collection. In this case, the ProductsService extends the NorthwindService which has a query method that is responsible for the communication with the remote server. The query method passes the information required for server-side data operations like paging and sorting
ts
```
    public rebind(): void {
        this.grid.loading = true; // Optionally show loading indicator.

        this.productsService.query(this.state);
    }
```

Use the newly created productsBinding directive on the Grid.

html

<kendo-grid
    productsBinding
    [pageSize]="10"
    [pageable]="true"
    [sortable]="true">
</kendo-grid>

The following example demonstrates how to implement a remote data binding directive extending the built-in DataBindingDirective.

Change Theme

Theme

Loading ...

Indicating Ongoing Data Operations

Loading indicators inform the user about ongoing data operations.

You can show a loading indicator by:

Setting the built-in loading property of the Grid. For an example, see the Remote-Binding Directive section.
Using the Grid Loading Template.
Utilizing the Kendo UI for Angular Loader component.

The following example demonstrates how to integrate the Kendo UI Loader with the Grid.

Change Theme

Theme

Loading ...

Binding the Angular Grid to Remote Data

Using Manual Binding

Binding to GridDataResult Object

Using a Remote-Binding Directive

Indicating Ongoing Data Operations

Suggested Links