Titanium Community Questions & Answer Archive

Question

mobile: problems with TableViewRow on iPhone

I have two problems with TableViewRow on iOS (3.2 and 4). On a TableView, I try to show a folder-like structure, where subfolders will flip out on clicking a TableViewRow. This is my code to create a TableViewRow:

var row = Titanium.UI.createTableViewRow();
var icon = 'images/document.png';

if (item.childs != undefined) {
    if (opened) {
        icon = 'images/folder_document.png';
    } else {
        icon = 'images/folder_closed.png';
    }
}

var imageIcon = Titanium.UI.createImageView({
    url:icon,
    width:24,
    height:24,
    left:4 + (20 * level), top:8
});

var labelTitle = Titanium.UI.createLabel({
    text:item.title,
    font:{fontSize:16,fontWeight:'bold'},
    color:'#000',
    width:'auto',
    textAlign:'left',
    top:6, left:35 + (20 * level), height:16
});

var labelDescription =  Titanium.UI.createLabel({
    text:item.description,
    font:{fontSize:11,fontWeight:'normal'},
    color:"#444",
    width:'auto',
    textAlign:'left',
    top:26, left:35 + (20 * level), height:12
});

row.indentionLevel = level;
row.hasChild=true;
row.backgroundColor = '#fff';

row.add(imageIcon);
row.add(labelTitle);
row.add(labelDescription);

On the click event of a row, I insert some rows with level=1 underneath the clicked row and change the icon of the clicked one. On clicking another row, I delete the previously added rows, add rows to the new clicked row and change both icons.

My first problem is that all images are only correctly painted on the first view. When I open a folder, all images are shown. Closing and reopening the folder, only some images are shown. It seems to be a painting problem but I'm not sure.

The next problem is the small text underneath the title text in the row (labelDescription). On the first view, the text overlaps the hasChild indicator. After opening and closing a folder and the updateRow action (with the same data), the small text is shown correctly. Why not the first time?

Here are some screenshots:

screen shots

Hope that someone can help me.

Answer 1

I did something similar some time ago.

I also encountered a number of glitches when adding a row on the run, so I opted for pre-created rows of height 1, and invisible label inside (that row only had a label).

The label is assigned to the previous row as a custom property (it works perfectly), and when the folder row is clicked, I change the height of the next row (already created and inserted, I find it in the global array of data using event.index + 1) and use event.row.myLabel.visible to make the label visible.
When I want to close the folder, the process is reversed.

In your case you have somewhat more of the rows in each folder, but I dont see any reason, why you cannot create 10 "child" rows, insert them, and then assign to the folder row the ARRAY of controls to make visible when it opens.

I had difficulties changing the rightImage of the row on the run (I dropped it, as it was not important), but I guess, in this case the visible/invisible trick can also save you. Add both images and switch visibility.

Dont forget to use tableClass property on each row, because it will make creating each next row faster (like me, you have two classes - parents and children)

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

mobile: problems with TableViewRow on iPhone

1 Answer