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 Progress NativeScript UI following the Getting started article.

Adding a RadListView to Your Page

Depending on the version of Progress NativeScript UI 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 Progress NativeScript UI (free)
  • xmlns:lv="nativescript-telerik-ui-pro/listview" for Progress NativeScript UI (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.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 "tns-core-modules/data/observable-array";
import { Observable } from "tns-core-modules/data/observable";
import timer = require("tns-core-modules/timer");

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

    constructor() {
        super();
        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;
    }
}

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

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

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: