How do I dynamically change the height of a TableViewRow?

Question

Application Type: mobile
Titanium SDK: 3.1.0.GA
Platform & version: iOS 6.1
Device: iOS Simulator
Host Operating System: OSX 10.8.3
Titanium Studio: 3.1.0.201304151600

I'd like to conditionally show/hide a textfield in a TableViewRow. In order to do this I need to expand the height of the row. The following code doesn't work, though. The TableViewRow is actually an Alloy controller. I first tried animating it before I realized that it can't be animated. Now I'm just trying to change the height and that isn't even working. I've tried using the setHeight method along with just setting the height property directly to no avail. Any ideas?

var notesVisible = false;

function notes_click() {

    if(notesVisible == false) {
        Ti.API.info('expanding');
        $.row.height = 200;
        // $.notes_container.setHeight(124);
        notesVisible = true;
    } else {
        Ti.API.info('contracting');
        $.row.height = 75;
        $.notes_container.setHeight(0);
        notesVisible = false;
    }

};

UPDATE: Not ideal, but the best "solution" I've found is to delete and re-add the row to the TableView control. It's definitely dirty, but it will work for the time being until a better answer surfaces. — ShawnCBerg

Mark Mark · Accepted Answer · 2013-06-18T14:58:40

There are two good ways of doing this, both should be done from the click event listener.

Method 1) One way is to directly change the "height" variable of the row Method 2) The second is to create a new row and replace the current row with the new row

Method 1 is more straightforward but I found it to be glitchy depending on what version of the SDK you are using, but with 3.1.0 it should work. Both methods should be called from the 'click' eventListener as its easier to tell Titanium which row to act on based on the click

So here is an example

currentTableview.addEventListener('click',function(e)
{
  // DO whatever your row is supposed to do when clicked

  // Now lets change the height of the row to a new height, 200 in this example
  e.row.height = 200
}

With Method two, it involves creating a new row and then replacing the current row with this call

currentTableview.updateRow(e.index,newlyCreatedUpdatedRow);

How do I dynamically change the height of a TableViewRow?

2 Answers