Data Binding Basics

The main function of the Angular Data Grid is to display model data.

Getting Started

The appropriate type of data binding depends on the scenario and features of your project. The Kendo UI Grid for Angular enables you to bind it to an array or GridDataResult objects by setting the data property of the <kendo-grid> tag.

When you bind the Grid to data, note the following specifics:

• When paging is disabled, bind the data directly as an Array object.
• When paging or virtual scrolling is enabled, use the GridDataResult option. It enables you to set the total number of records in a data length that is different from the currently provided one.
• When the data is received from an asynchronous source, pipe it through the async pipe.
• When the data contains dates, they need to be instances of the JavaScript Date object. This ensures that dates are handled correctly during formatting, sorting, filtering, and editing.

Indicating Ongoing Data Operations

Loading indicators designate an ongoing data operation to the user. As of version 3.1.0, the Kendo UI Grid for Angular features a built-in loading indicator functionality.

To toggle the loading panel, set the loading attribute to true.

Suggested Links

• Data-Binding Directives of the Grid
• Binding and Editing the Grid with Progress JSDO
• DataBindingDirective
• Manual Implementation of a Loading Indicator in the Grid
• API Reference of the GridComponent
• API Index of the Grid