Binding the Angular Data Grid to Local Data
You can bind the Angular 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
dataproperty—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.
<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.
<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 thepagingorvirtual scrollingfunctionality is enabled.Array—Could be used whenpagingorvirtual scrollingis 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.