Angular Grid Data Binding Basics
The Angular Grid is a powerful component that requires data-binding to display model data in a tabular format.
Choosing the right data-binding approach depends on the requirements of your project, the specific scenario, and desired features.
All data-binding mechanisms use the same public API to pass the data to the Grid.
You can bind the Grid to:
Local Data—Recommended when the items collection is stored or already available on the client-side and doesn't depend on HTTP requests.OData—Recommended when the items collection is stored on a server using the OData protocol and should be accessed remotely through HTTP requests.Remote Data—Recommended when the items collection is stored on a server and should be accessed remotely through HTTP requests.Streaming Data—Recommended when the Grid must display streaming updates in real-time.
Columns Definition
By default, when you bind the Grid to data, it automatically generates a column for each field in the data set. You can override this behavior and manually define the necessary columns. To achieve this, nest the necessary columns declaratively inside the <kendo-grid> tag.
The following code snippet demonstrates a basic grid with two columns.
<kendo-grid [data]="data">
<kendo-grid-column field="id" title="ID"></kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name"> </kendo-grid-column>
</kendo-grid>For more details on how to define and configure the Grid columns, check the Columns Configuration documentation section.
Known Limitations
- Binding nested/hierarchical arrays to the Grid is not supported. Use a flat data structure instead.