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 built-in DataBindingDirective—Allows you to implement data operations with less code.
• Manual binding by using the data property—Provides more control when implementing data operations.

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.

Copy Code<kendo-grid
    [kendoGridBinding]="gridData"
    [sortable]="true"
    [filterable]="true"
>
    <kendo-grid-column field="CompanyName"></kendo-grid-column>
    <kendo-grid-column field="ContactName"></kendo-grid-column>
</kendo-grid>

The following example demonstrates the kendoGridBinding directive in action.

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.

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

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:

• GridDataResult—Necessary when the paging or virtual scrolling functionality is enabled.
• Array—Could be used when paging or virtual scrolling is not applied.

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

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.

Suggested Links

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