How to append a row to a TableViewSection in Titan

Question

I'm developing an iPhone application in Titanium, and need to append a row to a particular TableViewSection. I can't do this on page load, as it's done dynamically by the user throughout the lifecycle of the application. The documentation says that the TableViewSection has an add method which takes two arguments, but I can't make it work. Here's my existing code:

for(var i = 0; i <= product_count; i++){
    productsTableViewSection.add(
        Ti.UI.createTableViewRow({
            title:'Testing...'
        })
     );
}

That is just passing one argument in, and that causes Titanium to die with an uncaught exception:

2010-04-26 16:57:18.056 MyApplication[72765:207] *** Terminating app due to uncaught 
exception 'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of rows in 
section 2. The number of rows contained in an existing section after the update (2) must be 
equal to the number of rows contained in that section before the update (1), plus or minus the 
number of rows inserted or deleted from that section (0 inserted, 0 deleted).'
2010-04-26 16:57:18.056 MyApplication[72765:207] Stack: (

The exception looks like it did add the row, but it's not allowed to for some reason. Since the documentation says that TableViewSection takes in "view" and "row", I tried the following:

for(var i = 0; i <= product_count; i++){
    productsTableViewSection.add(
        Ti.UI.createView({}),
        Ti.UI.createTableViewRow({
            title:'Testing...'
        })
     );
}

The above code doesn't throw the exception, but it gives a [WARN]:

[WARN] Invalid type passed to function. expected: TiUIViewProxy, 
was: TiUITableViewRowProxy in  -[TiUITableViewSectionProxy add:] (TiUITableViewSectionProxy.m:62)

TableViewSections don't seem to support any methods like appendRow, or insertRow, so I don't know where else to go with this. I've looked through the KitchenSink app, but there are no examples that I could find of adding a row to a TableViewSection. Any help is appreciated.

Answer 1

I've fought with this issue myself and after a lot of trial and error I discovered that setting the data on the enclosing TableView of the TableViewSection is what's necessary:

var win = Ti.UI.currentWindow;
var tableview = Ti.UI.createTableView();
var sec1 = Titanium.UI.createTableViewSection();
var sec2 = Titanium.UI.createTableViewSection();
var data = [];

for(var v=0; v<=10; v++) {
    var row = Ti.UI.createTableViewRow({
        title:'Section 1 row '+v,
        className:'sectionrow'
    });
    sec1.add(row);
}
for(var c=0; c<=10; c++) {
    var row = Ti.UI.createTableViewRow({
        title:'Section 2 row '+c,
        className:'sectionrow'
    });
    sec2.add(row);
}

data[0] = sec1;
data[1] = sec2;
tableview.data = data;

win.add(tableview);

setTimeout(function() {
    alert('Adding additional rows to section 1');
    for(var x=0; x<=5; x++) {
        var row1 = Ti.UI.createTableViewRow({
            title:'Section 1 additional row '+x,
            className:'sectionrow'
        });
        sec1.add(row1);
    }
    alert('Adding additional rows to section 2');
    for(var y=0; y<=5; y++) {
        var row2 = Ti.UI.createTableViewRow({
            title:'Section 2 additional row '+y,
            className:'sectionrow'
        });
        sec2.add(row2);
    }
    // this is the line that makes the magic happen!
    tableview.data = data;
}, 3000);

Good luck!

Answer 2

have you tried creating the view outside the for add method? It appears it may be a constructor issue.

Try creating a generic view outside the for loop and see if that gets you past the warn message.

Answer 3

What rewinder said works well. Here is similar trick that works, presented in a simpler form. Include the following (seemingly silly) statement after you have added the new row to the TableViewSection:

$.table.data = $.table.data

HTH