tableViewRow hasCheck property change kills click color change
Hi all,
I have an event listener listening for a click, which in turn toggles the hasCheck property. This works fine. What doesn't appear to work very consistently is the gradient displayed (the default blue gradient) on click down and undisplayed on click up. When I click and hold the row, I can see the blue gradient, when I release it's gone, just like it's supposed to be, but when I just click (not click and hold) the gradient doesn't appear at all. Does anyone know a solution to this? Help would greatly be appreciated, below is a code snippet:
var win = Titanium.UI.currentWindow;
var categoryArray = ['one','two','three'];
var rowArray = [];
for(var i=0; i<categoryArray.length; i++) {
var row = Ti.UI.createTableViewRow({className:'aRow',hasCheck:true});
row.height = 69;
row.backgroundImage = './images/table_view_row.png';
var label = Titanium.UI.createLabel({
color:'#fff',
font:{fontSize:14},
text:categoryArray[i],
top:5,
left:10
});
row.add(label);
rowArray.push(row);
}
var tableview = Ti.UI.createTableView({
data:rowArray,
backgroundColor:'transparent',
separatorStyle:0
});
tableview.addEventListener('click', function(e)
{
if(e.rowData.hasCheck) {
e.rowData.hasCheck = false;
}
else {
e.rowData.hasCheck = true;
}
});
win.add(tableview);
3 Answers
-
hasCheck is just an indication
in order to have the default blue color displayed (and staying) you must specify allowsSelection:true in your Ti.UI.createTableView
var tableview = Ti.UI.createTableView({ data:rowArray, backgroundColor:'transparent', separatorStyle:0, allowsSelection:true }); -
I'm sorry, maybe I wasn't clear enough, I do not want the blue color to stay, I just want it to indicate the user is touching the row, it needs to be gone on click up. My problem is a short click doesn't display the color at all, just a click and hold. If I don't modify the hasCheck value it works fine.
-
I have not really a solution but more a hack … using a setTimeOut, it looks like modifying hasCheck like you do repaint the row so you can't see the blue animation. waiting for the repaint to end solve your issue
tableview.addEventListener('click', function(e) { setTimeout(function() { if(e.rowData.hasCheck) {e.rowData.hasCheck = false;} else { e.rowData.hasCheck = true;}}, 100); });