Templates

The ListView content can be defined by utilizing the provided templates for list item, header, footer and loader.

Item Template

To provide a template for each item that will be rendered in the ListView, nest an <ng-template> tag with the kendoListViewItemTemplate directive inside a <kendo-listview> tag.

The following values are available as context variables:

  • let-dataItem="dataItem" (any) - The current data item. Available as implicit context variable.
  • let-index="index" (number) - The current item index.
  • let-isFirst="isFirst" (boolean) - Indicates whether the current data item will be rendered as the first item on the list.
  • let-isLast="isLast" (boolean)- Indicates whether the current data item will be rendered as the last item on the list.

The following example demonstrates the kendoListViewItemTemplate directive in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Header Template

To render a header section above the content container of the ListView, nest an <ng-template> tag with the kendoListViewHeaderTemplate directive inside a <kendo-listview> tag.

The following example demnstrates adding a filter input in the header of the ListView.

Example
View Source
Edit In Stackblitz  
Change Theme:

To render a footer section below the content container of the ListView, nest an <ng-template> tag with the kendoListViewFooterTemplate directive inside a <kendo-listview> tag.

The following example demnstrates adding a meta data section and a reload data button in the footer of the ListView.

Loader Template

When the loading property of the ListView is set to true, the built-in loader indicator will be displayed (see example).

To render a custom loading indicator inside the content area of the ListView, nest an <ng-template> tag with the kendoListViewLoaderTemplate directive inside a <kendo-listview> tag.

In this article

Not finding the help you need?