RadListView Item Customization

Providing item template for your RadListView with XML is quite easy and straightforward task. Even though this method allows you to create complicated and beautiful designs, it is not flexible enough if you want to have different design for some items.

In this article we are going to use the itemLoadingEvent event in order to create a RadListView with different item designs.

The 'itemLoading' event

The itemLoadingEvent event is called every time an item is about to be visualized in RadListView. It allows us to customize each item separately as it provides us with the NativeScript item view and the native view. In order to use this customization technique we need to register a handler for the itemLoadingEvent event in our XML and implement a corresponding handler:

<lv:RadListView id="listView" items="{{ dataItems }}" row="1" itemLoading="onItemLoading">
    <lv:RadListView.itemTemplate>
        <StackLayout orientation="vertical" padding="15">
            <Label id="nameLabel" fontSize="20" text="{{ itemName }}" marginBottom="10"/>
            <Label id="descLabel" fontSize="14" text="{{ itemDescription }}"/>
        </StackLayout>
    </lv:RadListView.itemTemplate>
</lv:RadListView>

In the snippet above we are creating a simple ListView with a registered handler for the itemLoadingEvent event called onItemLoading:

export function onItemLoading(args: ListViewEventData) {
    if (args.index % 2 === 0) {
        args.view.backgroundColor = new Color("#b3ecff");
        args.view.getViewById<Label>("nameLabel").fontSize = 24;
        args.view.getViewById<Label>("descLabel").fontSize = 18;
    }
    else {
        args.view.backgroundColor = new Color("#ccf2ff");
        args.view.getViewById<Label>("nameLabel").fontSize = 20;
        args.view.getViewById<Label>("descLabel").fontSize = 14;
    }
}

The args object exposes the following important properties:

• itemIndex - the data source index of the item currently being visualized
• view - the {N} view that represents the visual container for the item
• ios (iOS specific) - exposes the native iOS cell used to visualize the item
• android (Android specific) - exposes the native Android View used to visualize the item

This structure gives us complete freedom to change and customize the appearance of every single item. In this particular case we are applying one set of styles for items with even indexes and another for items with odd indexes. This is the final result:

iOS:

Android: