Making a jump list for your listview

In a previous post I was talking about making the contact list available in your app..

In this post, I will detail a simple way you can put in another list view that allows the user to jump quickly to a contact.



First the XML

<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally" loaded="onLoaded" backgroundColor="transparent" xmlns:imageButton="helpers/buttonhelper">
  <GridLayout columns="*" rows="auto,*" width="320" height="500" cssClass="popup">
    <GridLayout columns="auto,*" rows="auto" cssClass="popuptitle" row="0" col="0">
      <Image src="{{image}}" cssClass="iconwhite" col="0"/>
      <Label text="{{title}}"  textWrap="true" col="1"/>
    </GridLayout>
    <StackLayout  row="1" col="0" cssClass="popupouter">
      <GridLayout columns="*,30" rows="auto,*,auto,auto,auto" cssClass="popupinner">
        <SearchBar text="{{search}}" row="0" col="0" colSpan="2" visibility="{{searchVisibility}}"/>
        <ListView row="1" col="0" items="{{values}}" id="listView" marginBottom="5">
        </ListView>
        <ListView row="1" col="1" items="{{letters}}" id="listViewLetters" marginBottom="5" cssClass="itembreak">
        </ListView>
        <Label text="{{name}}" row="2" col="0" colSpan="2" cssClass="itembreak" textWrap="true"/>
        <Label text="{{key}}" row="3" col="0" colSpan="2" cssClass="itemtitle" textWrap="true"/>
        <StackLayout orientation="horizontal" horizontalAlignment="center" row="4" col="0" colSpan="2">
          <imageButton:ImageButton textPadded="{{languageData.OK}}" tap="{{ok}}" icon="tick"/>
          <imageButton:ImageButton textPadded="{{languageData.Cancel}}"  tap="{{cancel}}" icon="cross"/>
        </StackLayout>
      </GridLayout>
    </StackLayout>
  </GridLayout>
</Page>

Then relevant sections of the code.

export interface IKeyLetter {
    letter: string;
    index: number;
}

var listLettersObservable: observableArray.ObservableArray<IKeyLetter> = new observableArray.ObservableArray<IKeyLetter>();

....
....
....

 // loop through list of contacts and make up list of first letters

    updateKeys() {
        listLettersObservable.splice(0);
        var observableKeys: Array<IKeyLetter> = [];
        var firstLetter = "";
        for (var i = 0, imax = listOptionsObservable.length; i < imax; i++) {
            var listOption = listOptionsObservable.getItem(i);
            var letter = listOption.contact.name.substr(0, 1).toUpperCase();
            if (letter != firstLetter) {
                observableKeys.push({ letter: letter, index: i });
                firstLetter = letter;
            }
        }
        listLettersObservable.push(observableKeys);
    }

....
....
....

 // Add label with letter to listview

        listViewLetters.on(listview.ListView.itemLoadingEvent,(args: listview.ItemEventData) => {
            var observableKey = listLettersObservable.getItem(args.index);
            var labelAdd = new label.Label();
            labelAdd.text = observableKey.letter;
            args.view = labelAdd;
        });

        // when letter tapped, scroll other list to item required

        listViewLetters.on(listview.ListView.itemTapEvent,(args: listview.ItemEventData) => {
            var keyLetter = listLettersObservable.getItem(args.index);

            if (platform.device.os == platform.platformNames.android) {
                this.listView.android.setSelection(keyLetter.index);
            }

            if (platform.device.os == platform.platformNames.ios) {
                var indexPath = new NSIndexPath(keyLetter.index);
                this.listView.ios.scrollToRowAtIndexPathAtScrollPositionAnimated(indexPath, UITableViewScrollPosition.UITableViewScrollPositionTop, true);
            }
        });