RadListView: Getting Started

This article will guide you through the process of adding a RadListView in your application, binding it to a data-source and visualizing the items by using an item template of your choice. For more information on how each separate feature of RadListView is used, please refer to the dedicated articles which are using the same scenario and extend it further. This article assumes that you have successfully installed Telerik UI for NativeScript following the Getting started article.

Adding a RadListView to Your Page

Depending on the version of Telerik UI for NativeScript you are using, you need to define one of the following namespaces on your XML root to be able to access the RadListView:

  • xmlns:lv="nativescript-telerik-ui/listview" for Telerik UI for NativeScript (free)
  • xmlns:lv="nativescript-telerik-ui-pro/listview" for Telerik UI for NativeScript (Pro)

After that, you can use the following XML construct to put RadListView in your page:

Example 1: Adding RadListView to your Page

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:lv="nativescript-telerik-ui-pro/listview" xmlns="http://www.nativescript.org/tns.xsd">
    <lv:RadListView items="{{ dataItems }}" >

        <lv:RadListView.listViewLayout>
            <lv:ListViewLinearLayout scrollDirection="Vertical"/>
        </lv:RadListView.listViewLayout>
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="vertical">
                <Label fontSize="20" text="{{ itemName }}"/>

                <Label fontSize="14" text="{{ itemDescription }}"/>

            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</navigation:ExamplePage>

This will initialize a new RadListView instance with a Linear Layout and put it as a direct child of your page.

You can read more about layouts here: Item layouts

Now we want to prepare a list of items as a source and pass them to the RadListView. Let's create a view-model which will become the binding context of our page and will expose a collection of objects that we will use to populate the control. Create a new file called view-model in your application and paste the following code:

Example 2: Creating the models used to feed RadListView with data

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

export class ViewModel {

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

    constructor() {
    }

    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;
    }
}

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 observable_array_1 = require("data/observable-array");
var ViewModel = (function () {
    function ViewModel() {
        this._words = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"];
    }
    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;
    };
    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;

Now, to provide a binding context for the page, we can use the pageLoaded event and assign an instance of the view-model to the bindingContext property of the page as follows:

Example 3: Assigning the binding context to the RadListView page

import viewModel = require("./getting-started-model");
export function onPageLoaded(args){
    var page = args.object;
    page.bindingContext = new viewModel.ViewModel();
}
var viewModel = require("./getting-started-model");
function onPageLoaded(args) {
    var page = args.object;
    page.bindingContext = new viewModel.ViewModel();
}
exports.onPageLoaded = onPageLoaded;

Note that we have also set the listViewLayout property to an instance of the ListViewLinearLayout class. This is needed for the RadListView to work.

Building and running the application will produce the following result:

Figure 1: Getting started with RadListView for NativeScript:

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.

Related articles you might find useful: