RadListView Data Operations

This article will guide you through the process of enabling one or all of the data operations available as built-in functionality into the RadListView. The component provides all of the basic data operations with an easy to use API that enables powerful configuration of the grouping, filtering and sorting criteria to achieve any desired configuration of the displayed items in the RadListView.

By 'data operations' in the context of the RadListView we mean doing operations on the 'raw' source collection that is set to the items property. Those operations can be grouping, sorting and filtering. Each one can be used separately or combined with the others, this way you can filter the items and group them without changing the 'raw' business object collection you have provided to the items.

Grouping

In order to enable grouping you simply need to set the groupingFunction property to a function that simply returns the object which will be used as criteria for grouping functionality. Here is a simple example of such function:

this.myGroupingFunc = (item: DataItem) => {
    return item.category;
};

Grouping template

Setting up custom grouping template.

<ng-template tkGroupTemplate let-category="category">
    <GridLayout ios:height="50">
        <Label class="nameLabel" [text]="category" class="groupLabel"></Label>
    </GridLayout>
</ng-template>

Sorting

Sorting is enabled by simply setting the sortingFunction property to a function that takes one parameter and returns true if the item passed as parameter should be included and false otherwise. Here is a simple example of such function:

this.mySortingFunc = (item: DataItem, otherItem: DataItem) => {
    let res = item.id < otherItem.id ? SortingOrder.NSOrderedAscending : item.id > otherItem.id ? SortingOrder.NSOrderedDescending : SortingOrder.NSOrderedSame;
    return res;
};

Filtering

To enable filtering in the RadListView simply set its filteringFunction property to a function that takes two parameters and returns 0 (the params are equal), 1 (first param is greater) or -1 (second param is greater). Here is a simple example of such function:

this.myFilteringFunc = (item: DataItem) => {
    return item && item.name.includes("Special Item");
};

Example 1: Implementing grouping, filtering and sorting

In this example we are going to enable all of the data operations on the same RadListView with the following criteria:

Filter the business objects which name property contains the string "Special Item"
Sort the business objects by the value of their id property
Group the business objects by the value of their category property

HTML
TypeScript
CSS

<GridLayout tkExampleTitle tkToggleNavButton rows="*, *7">
    <StackLayout orientation="horizontal">
        <Button width="33%" [text]="isFilteringEnabled ? 'Disable filtering' : 'Enable filtering'" (tap)="toggleFilter()" ios:margin="5"></Button>
        <Button width="33%" [text]="isSortingEnabled ? 'Disable sorting' : 'Enable sorting'" (tap)="toggleSorting()" ios:margin="5"></Button>
        <Button width="33%" [text]="isGroupingEnabled ? 'Disable grouping' : 'Enable grouping'" (tap)="toggleGrouping()" ios:margin="5"></Button>
    </StackLayout>
    <RadListView selectionBehavior="Press" (itemSelected)="onItemSelected($event)" [items]="dataItems" row="1" #myListView 
                    [sortingFunction]="mySortingFunc" 
                    [filteringFunction]="myFilteringFunc"
                    [groupingFunction]="myGroupingFunc" >
        <ng-template tkListItemTemplate let-item="item">
            <StackLayout orientation="vertical">
                <Label class="nameLabel" [text]="item.name"></Label>
                <Label class="descriptionLabel" [text]="item.description"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

import { Component, OnInit, ViewChild } from "@angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { RadListViewComponent } from "nativescript-ui-listview/angular";
import { DataItem } from "../dataItem";
import { DataItemService } from "../dataItem.service";

@Component({
    moduleId: module.id,
    selector: "tk-listview-data-operations-multiple",
    providers: [DataItemService],
    templateUrl: "listview-data-operations-multiple.component.html",
    styleUrls: ["listview-data-operations-multiple.component.css"]
})
export class ListViewDataOperationsMultipleComponent implements OnInit {
    private _dataItems: ObservableArray<DataItem>;
    private _isEnabled: boolean;
    private _isGroupingEnabled: boolean;
    private _isFilteringEnabled: boolean;
    private _isSortingEnabled: boolean;
    private _myGroupingFunc: (item: any) => any;
    private _mySortingFunc: (item: any, otherItem: any) => number;
    private _myFilteringFunc: (item: any) => any;

    @ViewChild("myListView", { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;

    constructor(private _dataItemService: DataItemService) {
        this.myGroupingFunc = (item: DataItem) => {
            return item.category;
        };
        this.mySortingFunc = (item: DataItem, otherItem: DataItem) => {
            const res = item.id < otherItem.id ? -1 : item.id > otherItem.id ? 1 : 0;
            return res;
        };
        this.myFilteringFunc = (item: DataItem) => {
            return item && item.name.includes("Special Item");
        };
        this.isFilteringEnabled = true;
        this.isSortingEnabled = true;
        this.isGroupingEnabled = true;
    }

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

    get isGroupingEnabled() {
        return this._isGroupingEnabled;
    }

    set isGroupingEnabled(value: boolean) {
        this._isGroupingEnabled = value;
    }

    get isFilteringEnabled() {
        return this._isFilteringEnabled;
    }

    set isFilteringEnabled(value: boolean) {
        this._isFilteringEnabled = value;
    }

    get isSortingEnabled() {
        return this._isSortingEnabled;
    }

    set isSortingEnabled(value: boolean) {
        this._isSortingEnabled = value;
    }

    get myFilteringFunc(): (item: any) => any {
        return this._myFilteringFunc;
    }

    set myFilteringFunc(value: (item: any) => any) {
        this._myFilteringFunc = value;
    }

    get myGroupingFunc(): (item: any) => any {
        return this._myGroupingFunc;
    }

    set myGroupingFunc(value: (item: any) => any) {
        this._myGroupingFunc = value;
    }

    get mySortingFunc(): (item: any, otherItem: any) => number {
        return this._mySortingFunc;
    }

    set mySortingFunc(value: (item: any, otherItem: any) => number) {
        this._mySortingFunc = value;
    }

    ngOnInit() {
        this._dataItems = new ObservableArray(this._dataItemService.getDataOperationsItems());
    }

    public toggleFilter() {
        const listView = this.myListViewComponent.listView;
        if (!listView.filteringFunction) {
            listView.filteringFunction = this.myFilteringFunc;
            this.isFilteringEnabled = true;
        } else {
            listView.filteringFunction = undefined;
            this.isFilteringEnabled = false;
        }
    }

    public toggleSorting() {
        const listView = this.myListViewComponent.listView;
        if (!listView.sortingFunction) {
            listView.sortingFunction = this.mySortingFunc;
            this.isSortingEnabled = true;
        } else {
            listView.sortingFunction = undefined;
            this.isSortingEnabled = false;
        }
    }

    public toggleGrouping() {
        const listView = this.myListViewComponent.listView;
        if (!listView.groupingFunction) {
            listView.groupingFunction = this.myGroupingFunc;
            this.isGroupingEnabled = true;
        } else {
            listView.groupingFunction = undefined;
            this.isGroupingEnabled = false;
        }
    }

    onItemSelected(args: any) {
        const selectedItems = args.object.getSelectedItems();
        console.log(selectedItems[0].id);
    }
}

.nameLabel {
    font-size: 20
}

.descriptionLabel {
    font-size: 14;
}

This will produce the following UI with the filtered, sorted and grouped objects:

Figure 1: Grouping, filtering and sorting enabled in RadListView:

RadListView Data-Operations on iOS

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 Data Operations Example

NativeScript Angular