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

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.
  • 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.

In this article

Not finding the help you need?