Binding the Grid to JSON Data

Environment

Product

Progress® Kendo UI® for Angular Data Grid

Description

How can I bind the Kendo UI for Angular Grid component to JSON data?

Solution

To display JSON data inside the Grid component:

1. Use either the built-in data property or the DataBindingDirective and pass the JSON data.

   html

   <kendo-grid [kendoGridBinding]="gridData">
       ...    
   </kendo-grid>

2. Set the field property of the Grid columns to the corresponding attribute in the JSON data.

   html

   <kendo-grid ...>
       <kendo-grid-column field="ProductID" ...> </kendo-grid-column>
       <kendo-grid-column field="ProductName" ...> </kendo-grid-column>
   </kendo-grid>

The following example demonstrates the suggested approach for binding the Grid component to JSON data.

Change Theme

Theme

Loading ...

Suggested Links

• Grid Overview
• API Reference of the GridComponent
• Grid Data Binding
• Binding and Editing with Progress JSDO