RadListView Item Templates

By default when using the RadListView in order for the items from its data source to be visualized all that you need to do is declare your own itemTemplate and set it to the desired UI View. This will make sure that each of the business objects of the passed to the items property are visualized using that template, but there are scenarios where you may want to use different template for specific business objects (different sections, important business objects, more detailed objects etc.). IN such scenarios the the itemTemplates can be used.

Using multiple item templates

In order to setup the RadListView to use different templates for its items representation you will need to:

• Create a function or pass a string representation of a "property" by which the template for each business object will be determined. This is done by setting the itemTemplateSelector property
• Create multiple separate template, add them to the itemTemplates collection property and set their key to the desired unique template identifier. The key is what will be used to do the comparison in the itemTemplateSelector

Example 1: Setting up itemTemplateSelector and itemTemplates

In the code snippets bellow we are declaring multiple <template></template> instances in the XML and setting them to the RadListView.itemTemplates. After that we are creating a function in our bindingContext that simply returns the property of the business object that will be used to determine the template of its item representation and finally we are binding that function to the itemTemplateSelector property:

<lv:RadListView items="{{ dataItems }}" itemTemplateSelector="{{ templateSelector }}" groupingFunction="{{ myGroupingFunc }}">
    <lv:RadListView.itemTemplate>
        <StackLayout orientation="vertical">
            <Label fontSize="20" text="{{ itemName }}" margin="5"/>
            <Label fontSize="17" text="{{ type }}" margin="0 5 0 5"/>
            <Label fontSize="14" text="{{ itemDescription }}" margin="5"/>
        </StackLayout>
    </lv:RadListView.itemTemplate>

    <lv:RadListView.itemTemplates>
        <template key="first">
            <StackLayout orientation="vertical" style.backgroundColor="black">
                <Label fontSize="20" text="{{ itemName }}" color="yellow" margin="5"/>
                <Label fontSize="17" text="{{ type }}" color="yellow" margin="0 5 0 5"/>
                <Label fontSize="14" text="{{ itemDescription }}" color="yellow" margin="5"/>
            </StackLayout>
        </template>
        <template key="Red">
             <StackLayout orientation="vertical" style.backgroundColor="red">
                <Label fontSize="20" text="{{ itemName }}" color="white" margin="5"/>
                <Label fontSize="17" text="{{ type }}" color="white" margin="5"/>
            </StackLayout>
        </template>
        <template key="green">
            <StackLayout orientation="vertical" style.backgroundColor="green">
                <Label fontSize="20" text="{{ itemName }}" color="white" margin="5"/>
                <Label fontSize="17" text="{{ type }}" color="white" margin="5"/>
            </StackLayout>
        </template>
        <template key="Blue">
            <StackLayout orientation="vertical" style.backgroundColor="blue">
                <Label fontSize="20" text="{{ itemName }}" color="white" margin="5"/>
                <Label fontSize="17" text="{{ type }}" color="white" margin="5"/>
            </StackLayout>
        </template>
        <template key="last">
            <StackLayout orientation="vertical" style.backgroundColor="yellow">
                <Label fontSize="20" text="{{ itemName }}" color="black" margin="5"/>
                <Label fontSize="17" text="{{ type }}" color="black" margin="0 5 0 5"/>
                <Label fontSize="14" text="{{ itemDescription }}" color="black" margin="5"/>                
            </StackLayout>
        </template>
    </lv:RadListView.itemTemplates>
</lv:RadListView>

export function onPageLoaded(args) {
    let page = args.object;
    page.bindingContext = new ViewModel();
}

import { ObservableArray } from "tns-core-modules/data/observable-array";
import { Observable } from "tns-core-modules/data/observable";

export class ViewModel extends Observable {

    constructor() {
        super();
        this.dataItems = new ObservableArray<DataItem>();
        this._templateSelector = this.templateSelectorFunction;
        let itemsCount = 50;
        for (let i = 0; i <= itemsCount; i++) {
            this.dataItems.push(new DataItem(i, "Item " + i, "This is item description", this.getType(i, itemsCount)));
        }
    }

    get myGroupingFunc(): (item: any) => any {
        return (item: DataItem) => {
            return item.type;
        };
    }

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

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

    get _templateSelector(): (item: DataItem, index: number, items: any) => string {
        return this.get("templateSelector");
    }

    set _templateSelector(value: (item: DataItem, index: number, items: any) => string) {
        this.set("templateSelector", value);
    }

    public templateSelectorFunction = (item: DataItem, index: number, items: any) => {
        return item.type;
    }

    private getType(index: number, end: number): string {
        let lastDigit = index % 10;
        let type = index === 0 ? "first" : index === end ? "last" : undefined;
        if (!type) {
            type = lastDigit === 0 ? "default" : lastDigit <= 3 ? "red" : lastDigit <= 6 ? "blue" : lastDigit <= 9 ? "green" : "default";
        }

        return type;
    }
}

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

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

Figure 1: RadListView with multiple item templates:

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.

• Multiple Item Templates Example