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:

<lv:RadListView.headerItemTemplate>
    <GridLayout backgroundColor="#65a565">
        <Label text="{{ headerTitle }}"/>

    </GridLayout>
</lv:RadListView.headerItemTemplate>
<lv:RadListView.footerItemTemplate>
    <GridLayout backgroundColor="#7fff7f">
        <Label text="{{ footerTitle }}"/>

    </GridLayout>
</lv:RadListView.footerItemTemplate>

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:

export class ViewModel {

    private _items: ObservableArray<DataItem>;
    private _words = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];
    private _footerTitle;
    private _headerTitle;

    constructor() {
        this._footerTitle = "This is list footer";
        this._headerTitle = "This is list header";
    }

    get dataItems() {
        if (!this._items) {
            this._items = new ObservableArray<DataItem>();

            for (var i = 0; i < 10; i++) {
                this._items.push(new DataItem(i, "Item " + i, "This is item description."));
            }
        }
        return this._items;
    }

    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(){
        return this._headerTitle;
    }

    get footerTitle(){
        return this._footerTitle;
    }
}

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;
    }
}
var ViewModel = (function () {
    function ViewModel() {
        this._words = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];
        this._footerTitle = "This is list footer";
        this._headerTitle = "This is list header";
    }
    Object.defineProperty(ViewModel.prototype, "dataItems", {
        get: function () {
            if (!this._items) {
                this._items = new observable_array_1.ObservableArray();
                for (var i = 0; i < 10; i++) {
                    this._items.push(new DataItem(i, "Item " + i, "This is item description."));
                }
            }
            return this._items;
        },
        enumerable: true,
        configurable: true
    });
    ViewModel.prototype.getRandomLengthString = function () {
        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;
    };
    Object.defineProperty(ViewModel.prototype, "headerTitle", {
        get: function () {
            return this._headerTitle;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ViewModel.prototype, "footerTitle", {
        get: function () {
            return this._footerTitle;
        },
        enumerable: true,
        configurable: true
    });
    return ViewModel;
}());
exports.ViewModel = ViewModel;
var DataItem = (function () {
    function DataItem(id, name, description) {
        this.id = id;
        this.itemName = name;
        this.itemDescription = description;
    }
    return DataItem;
}());
exports.DataItem = DataItem;

Here's how the list looks like:

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

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

References

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.