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

Binding the Angular Data Grid to Local Data

You can bind the Grid to a collection of items that is available locally on the client-side and display the data in tabular form. Use this approach when the whole collection is already stored in the application and needs to be accessible at any time, without depending on HTTP calls.

To bind the Grid to local data, choose one of the following approaches based on the specific data operation requirements (filtering, sorting, grouping, and paging):

Using the Data-Binding Directive

The DataBindingDirective enable you to bind local data and implement complex Grids by reducing the repetitive boilerplate code.

As a result, the source code is clean and easy to maintain.

To bind the Grid to local data, provide the collection to the built-in kendoGridBinding directive. You can enable any data operation by setting the corresponding properties of the Grid. See the Grid Data Operations article for more details.

    <kendo-grid-column field="CompanyName"></kendo-grid-column>
    <kendo-grid-column field="ContactName"></kendo-grid-column>

The following example demonstrates the kendoGridBinding directive in action.

View Source
Change Theme:

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 a local data, set the built-in data input property to the corresponding collection.

<kendo-grid [data]="gridData">
    <kendo-grid-column field="ProductID"></kendo-grid-column>
    <kendo-grid-column field="ProductName"></kendo-grid-column>

Using this approach allows you to take full control over the data operations applied to the Grid. To implement filtering, sorting, grouping, and paging, you must handle the respective Grid data operation events and process the data manually in their corresponding handlers. 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:

The following example demonstrates how to bind the data property to an array.

View Source
Change Theme:

Binding to a 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 the data property should be bound to a GridDataResult object.

The following example demonstrates how to bind the data property to a GridDataResult.

View Source
Change Theme: