Appcelerator Titanium JS: Table Alphabetical Index not working

Question

I'm trying to get my head around using a the TableView index property to create native right hand alphabetical navigation - similar to that in the Apple iOS Contacts app - shown in the picture below:

enter image description here

I created a really simple example, with a set of rows, with row headers, but it doesn't work - whenever I tap on an index item, it just jumps to the top of the TableView again.

Here is my example code:

// Create the first TableViewSection
var section1 = Ti.UI.createTableViewSection({
    headerTitle:'A'
});
// use a loop to add some rows
for (var i=0; i < 20; i++) {
    section1.add(Ti.UI.createTableViewRow({
        title:'Row '+i
    }));
}
// do it all again...
var section2 = Ti.UI.createTableViewSection({
    headerTitle: 'B'
});
for (var i=4; i < 10; i++) {
    section2.add(Ti.UI.createTableViewRow({
        title:'Row '+i
    }));
}
// Now, here's our table, and we're setting the data to hold the sections
var tv = Ti.UI.createTableView({
    data:[section1,section2]
});

// Create a table view index
var index = [
    { title: "A", index: 0 },
    { title: "B", index: 1 }
];

// Set the index on the table view
tv.setIndex(index);

$.index.open();
$.index.add(tv);

Wahhab_mirza Wahhab_mirza · Accepted Answer · 2014-03-31T14:46:36

Here is an example for you dear

var win = Ti.UI.createWindow();

var table = Ti.UI.createTableView({});

    var contacts = ["Adam", "Andrew", "Boris", "Claus", "Debby", 'Saba', 'Sana', 'Wahhab', 'Zohaib', 'Zzaid', 'Zzxad'];
    var curheader = 'A';
    var sectionArr = [];
    var index = [];
    for (var i = 0, lastL, l, currSection, ilen = contacts.length; i < ilen; i++) {
        l = contacts[i].substr(0, 1);
        if (lastL != l) {
            index.push({
                title : l,
                index : i
            });
            currSection = Ti.UI.createTableViewSection({
                headerTitle : l
            });
            sectionArr.push(currSection);
        }
        currSection.add(Ti.UI.createTableViewRow({
            title : contacts[i],

        }));
        lastL = l;

    }
    table.setData(sectionArr);
    table.index = index;
    win.add(table);
    win.open();

Thanks

Appcelerator Titanium JS: Table Alphabetical Index not working

1 Answers