Angular Grid Data-Binding Basics
The 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.
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.
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
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 section.
- Binding nested/hierarchical arrays to the Grid is not supported. Use a flat data structure instead.