Unable to change backgroundColor of a label inside a TableViewRow onClick (android) - appcelerator titanium

Question

I am trying to update the background color of a Label inside a TableViewRow. I am using a View/Controller for the rows, creating them in code and appending them as an array to the TableView. Using onClick of the TableViewRow and Label.setBackgroundColor() inside the TableViewRow controller.

ExampleRow.xml

<TableViewRow id="exampleRow" class="exampleClass" onClick="exampleClick">
    <Label id="exampleLabel" text="test" />
</TableViewRow>

ExampleRow.js

var test = 1;
function exampleClick(e) {
    if(test == 1) {
        $.exampleLabel.setBackgroundColor('#0f0');
        test = 0;
    } else {
        $.exampleLabel.setBackgroundColor('#fff');
        test = 1;
    }
}

ExamplePage.xml

<TableView id="exampleTable" />

ExamplePage.js

var tableViewRows = [];
for(var i = 0; i < 5; i++) {
    tableViewRows.push(
        Alloy.createController('exampleRow', {}).getView()
    );
}
$.exampleTable.setData(tableViewRows);

The problem is this does not work on the first page as soon as the app loads. If I scroll the TableViewRows outside of the screen and back in, the background color change works. If an alert box is popped up the background change works. But after first app load, the background color will not change. It also works if we use appendRow for each row, but this is substantially slower.

appendRow fix example:

for(var i = 0; i < 5; i++) {
    $.exampleTable.appendRow(
        Alloy.createController('exampleRow', {}).getView()
    );
}

appending the rows individually sometimes fixes the bug (not every row), but for our list takes 5-8 seconds to display the table, rather than <1second using setData*

Example of the real app not working:

Example of the real app working:

This occurs after having an alert box displayed or scrolling the rows out and back in to the screen, or using appendRow for each row

Methods I have attempted to fix (did not fix):

using animations
removing the label then recreating and adding a new label in code
removing class from the TableViewRow

I am using Titanium SDK 5.0.2.GA and compiling on android 5.1.1.

Yes the click event fires. I can see this by adding a debug message. The setBackgroundColor also fires and if the app is put in the background and then brought to the foreground again the label will update. — JJ Cantillon, Oct 28 '15 at 12:51
Ok so basically, the background color does update, but the UI doesn't, so you can't see it. A force re-rendering of the view (scroll out and in of view) does reflect the correct UI. It appears you discovered a bug here — Rene Pot, Oct 28 '15 at 13:49

score 2 · Answer 1 · answered Oct 29 '15 at 16:10

Try to use click event of tableView instead of tableViewRow :

<TableView onClick="yourTableViewClickEvent"></TableView>

and then define what logic will be executed inside this function callback :

function yourTableViewClickEvent(e){
    // access selected row 
    var currentSelectedRow = e.row;
    // current selected Label we assume here that the row contain a label as first child (exactly what you have in your row definition
    var currentLabel = currentSelectedRow.children[0]
    // change label background color 
    currentSelectedRow.backgroundColor = "#0f0"
    // You can even (i know it is no good to do that :)) test if the color is white or #0f0 like so 
    if(currentSelectedRow.backgroundColor == "#fff")
        currentSelectedRow.backgroundColor = "#0f0"
    else 
        currentSelectedRow.backgroundColor = "#fff"
}

Unable to change backgroundColor of a label inside a TableViewRow onClick (android) - appcelerator titanium

1 Answers1