tableview with only one clickable row
Hello
I have a tableview with multiple rows, one of the rows has a child. I only want to be that row selectable/clickable. Is there any way of doing this?
I tried adding a button to that row, but then the text is center-aligned instead of left-aligned.
5 Answers
-
I am also trying to figure this out! its driving me crazy!!! tried everything that seems like it might work (including setting the selctedBackgroundColor to transparent) the only thing that I've been able to come up with so far is adding a click event for a specific row object then pushing that row object on to the data object for a table.
var somData = []; var someRow = Ti.UI.createTableViewRow({title:e.rowData.title, hasChild:true}); someRow.addEventListener('click', function(e){ Ti.API.info('clicked'); }); someData.push(someRow); someTable.data = someData;
but that doesn't take care of the blue touch indication!
edit!!! ok for the iphone I have found out how to remove the blue selection indication on arbitrary row
someData.push({title:'a title', selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE});`
for android, you can also add focusable:'false' since the above only applies to iphone, but it
then use the previously mentioned technique for adding a click event only on the row you want users to be able to click on.
Hope this helps people, its not exactly obvious from kitchensink or documentation.
-
Wait, unless I am reading wrong couldn't you just do something like:
var data = [ {title:'Test'}, {title:'Test2'}, {title:'Test3',hasChild:true} ]; var tableView = Ti.UI.createTableView({ data:data }); tableView.addEventListener('click', function(e) { if (e.rowData.hasChild == true) { // Do stuff here } else { } });
-
Tom
Firstly, your best bet is to explicitly create tableViewRows rather than to rely on the basic tableview, as you will have more control over its appearance and behaviour. See my explanation here.
If you give the row (that should respond to clicks) a name, then you can use an if condition to check for it before taking action.
For instance, your row property/name could be:
customName:'myrow'
and in your click eventlistener, you would test it as follows:
if( (typeof(e.source.customName) !== 'undefined') & (e.source.customName === 'myrow') ){ // do something } Hope this helps
-
Tom
I see what you mean by allowsSelection - you don't want the selection indicator to appear on rows that should not respond. Have you tried setting touchEnabled:false on the non-selectable tableviewrows?
I would be very surprised if multiple tableviews are not possible in a single window? Are you certain this is the case? Have you tried it?
-
Tom
Just to confirm, you can certainly have two tableviews on one window. This is a modified table_view_api_basic.js from the KitchenSink that demonstrates it:
var data = []; data[0] = Ti.UI.createTableViewRow({hasChild:true,title:'Table 1 Row 1'}); data[1] = Ti.UI.createTableViewRow({hasDetail:true,title:'Table 1 Row 2'}); data[2] = Ti.UI.createTableViewRow({hasCheck:true,title:'Table 1 Row 3'}); data[3] = Ti.UI.createTableViewRow({title:'Table 1 Row 4'}); var tableview = Titanium.UI.createTableView({ top:0, height:250, data:data }); tableview.addEventListener('click', function(e) { var index = e.index; var section = e.section; var row = e.row; var rowdata = e.rowData; Titanium.UI.createAlertDialog({title:'Table View',message:'row ' + row + ' index ' + index + ' section ' + section + ' title ' + rowdata.title}).show(); }); Titanium.UI.currentWindow.add(tableview); var data2 = []; data2[0] = Ti.UI.createTableViewRow({hasChild:true,title:'Table 2 Row 1'}); data2[1] = Ti.UI.createTableViewRow({hasDetail:true,title:'Table 2 Row 2'}); data2[2] = Ti.UI.createTableViewRow({hasCheck:true,title:'Table 2 Row 3'}); data2[3] = Ti.UI.createTableViewRow({title:'Row 4'}); var tableview2 = Titanium.UI.createTableView({ top:251, height:250, data:data2 }); Titanium.UI.currentWindow.add(tableview2); Titanium.UI.currentWindow.open();