RadListView: Header and Footer

RadListView can be configured to display two special kinds of elements at the beginning and at the end of the data item list: a header and a footer respectively. The contents of these elements are defined in a similar manner to the way content of standard list items is defined - via templates. For that purpose RadListView exposes the following properties:

Here's a simple example of how these properties are used:

Example 1: Defining a header and a footer for RadListView in XML:

    <GridLayout backgroundColor="#65a565">
        <Label text="{{ headerTitle }}"/>

    <GridLayout backgroundColor="#7fff7f">
        <Label text="{{ footerTitle }}"/>


The views generated using the values of headerItemTemplate and footerItemTemplate have access to the binding context of RadListView so you can bind their properties to values exposed by your business object assigned as a binding context.

Assuming that we're using the following view-model setup:

Example 2: Using a model to define the header and footer content:

import { ObservableArray } from "tns-core-modules/data/observable-array";
import timer = require("tns-core-modules/timer");
import { Observable } from "tns-core-modules/data/observable";

export class ViewModel extends Observable {
    private _words = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];

    constructor() {
        this.footerTitle = "This is list footer";
        this.headerTitle = "This is list header";
        this.dataItems = new ObservableArray<DataItem>();
        for (var i = 0; i < 10; i++) {
            this.dataItems.push(new DataItem(i, "Item " + i, "This is item description."));

    get dataItems(): ObservableArray<DataItem> {
        return this.get("_dataItems");

    set dataItems(value: ObservableArray<DataItem>) {
        this.set("_dataItems", value);

    private getRandomLengthString() {
        var sentenceLength = Math.round((Math.random() * 15));
        var result = this._words[0];
        for (var i = 0; i < sentenceLength; i++) {
            result += (this._words[i % this._words.length] + " ");
        return result;

    get headerTitle(): string {
        return this.get("_headerTitle");

    set headerTitle(value: string) {
        this.set("_headerTitle", value);

    get footerTitle(): string {
        return this.get("_footerTitle");

    set footerTitle(value: string) {
        this.set("_footerTitle", value);

export class DataItem {
    public id: number;
    public itemName;
    public itemDescription;

    constructor(id: number, name: string, description: string) {
        this.id = id;
        this.itemName = name;
        this.itemDescription = description;

Here's how the list looks like:

Fugure 1: RadListView's header and footer in action:

TelerikUI-RadListView-Getting-Started TelerikUI-RadListView-Getting-Started


Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.