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 thetotal
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
.
Loading Template
To implement a loading template and override the default loading indicator inside the content area of the Grid, nest an <ng-template>
tag with the kendoGridLoadingTemplate
directive inside the <kendo-grid>
tag.
The following example demonstrates the loading template in action.
No Records Template
The no-records template allows you to customize the content of the Grid when no data is present. To implement the template, nest an <ng-template>
tag with the kendoGridNoRecordsTemplate
directive inside the <kendo-grid>
tag.
When the locked columns of the Grid are in use, the template is displayed in the non-locked part of the content.
The following example demonstrates the no-records template in action.