Hiding <TableViewRow> in Titanium

Question

Ok, this is (or ought to be) straightforward - unless I am overlooking something (which probably is the case).

I have created a very simple example:

index.xml

<Alloy>
    <Window>
        <TableView>
            <TableViewSection>
                <TableViewRow>
                    <Label>Row 1</Label>
                </TableViewRow>
                <TableViewRow visible="false">
                    <Label>Row 2</Label>
                </TableViewRow>
                <TableViewRow id="row3">
                    <Label>Row 3</Label>
                </TableViewRow>
            </TableViewSection>
        </TableView>
    </Window>
</Alloy>

... and index.tss:

"#row3":{visible:false}

"Window": {
    top: 60
}

I would have expected that row 2 and row 3 were NOT displayed. However, all rows display (in the iOS Simulator).

I have read about similar issues in earlier versions of Titanium Studio. The workaround from these 2-4 years old posts were to set the height of the tableviewrow to 1 (as 0 is ignored). However, this still shows part of the label. Then I can hide the label (visible="false" workst for that!) and then I only see a "thin" row. But with the standard view row separators you still see that there is a row....

So, what am I doing wrong here??

I use the TableView layout to create a form for entering data - and some of the rows should only be shown to the user if a switch is set. Is there a better pattern for doing this?

I am on Studio 3.4.1GA, Mac OS X 10.10.1 and using the 8.1 iOS in simulator ;-)

Thank you in advance!

/John

Lucky Luke Lucky Luke · Accepted Answer · 2014-12-20T15:50:11

I am not sure if it is the best approach but you could try populating your section inside your controller.

You will populate an array with all (and only) the rows you would like to show each time and then update the rows attribute of your TableViewSection. I quote some pseudocode:

var section = Ti.UI.createTableSection({...});
var row1 = Ti.UI.createTableViewRow({...});
var row2 = Ti.UI.createTableViewRow({...});
var row3 = Ti.UI.createTableViewRow({...});

var rows_options = [];
if (show_less) rows_options.push(row1, row2); //"hide" 3rd row
else rows_options.push(row1, row2, row3); //show all 3 rows

section.rows = rows_options;

Alternatively, consider not using a tableview, if it is not necessary, and instead build your own view with layout: vertical hosting your rows that will much simulate the same use. In this case I believe the visible hack will work for you.

Hiding <TableViewRow> in Titanium

2 Answers