Hi,
My requirement is that when an user selects a row of the table, the backgroundColor of the table row should change to red and then it should stay at that colour till the user selects another row of the table whose backgroundColor now gets changed to red and the backgroundColor of the last selected row is changed to white.
I have tried doing it in different ways but have not been able to solve it till now. Other details : CLI version 3.2.3, Titanium SDK version 3.2.3.GA, Alloy version 1.3.1
Developing mobile app for android.
My code so far -
leftTable.xml ============ <Alloy> <View id="leftView"> <TableView id="leftTable" onClick="openTableRows"> <TableViewSection> <TableViewRow id="myFirstRow" class="leftMenuRow"/> <TableViewRow id="mySecondRow" class="leftMenuRow"/> </TableViewSection> <TableViewSection> <TableViewRow id="myThirdRow" class="leftMenuRow"/> <TableViewRow id="myFourthRow" class="leftMenuRow"/> </TableViewSection> </TableView> </View> </Alloy>leftTable.js - ==========
function openTableRows(e) { // In the table there are more than 1 section // Grab the array of sections. var sections = $.leftTable.data; Ti.API.info("sections is " + sections); // Get the rows in each section. for ( i = 0; i < sections.length; i++) { var section = sections[i]; Ti.API.info("No of sections is" + section); // Get the rows of each section. var rowOfEachSection = section.rows; Ti.API.info("rowOfEachScetion is " + rowOfEachSection); // Set the background colour of each row to white. for ( i = 0; i < rowOfEachSection.length; i++) { rowOfEachSection[i].backgroundColor = "white"; } } // this will set selected row color to red e.row.backgroundColor = 'red'; }I am not sure what I am doing wrong, but with the above code I am getting the rows selected to have all backgroundColor red and they are not changing to white colour when another row is selected.
Hope some one can guide me in the right direction.
Thanks.