Titanium Community Questions & Answer Archive

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

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.

— asked November 25th 2010 by Tom Schouteden
  • allowsselected
  • clickable
  • selectable
  • tableviewrow
0 Comments

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.

    — answered January 13th 2011 by Scott Cheezem
    permalink
    0 Comments
  • 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 { }
    });
    
    — answered January 13th 2011 by Colton Arabsky
    permalink
    1 Comment
    • This worked for me…..even though the row lights up its better than opening the window I have when the user clicks. Plus you can add - row.selectionStyle = 'none'; and that solves the light up, at least for the iPhone. ;P

      — commented January 23rd 2011 by Tracy Hayman
  • 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
    
    — answered November 25th 2010 by Paul Dowsett
    permalink
    1 Comment
    • Hi Hal

      Thanks for your response. Since allowsSelected is set per tableView and not per row this would not change anything I suppose. As soon as I disable allowsSelected, the rows will no longer respond to any click events.

      In light of that I tried splitting up the table in multiple parts, with one table only containing the row that need allowsSelected. However, it doesn't seem possible to add multiple tableViews to a window.

      — commented November 25th 2010 by Tom Schouteden
  • 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?

    — answered November 25th 2010 by Paul Dowsett
    permalink
    1 Comment
    • When I set touchEnabled false for this rows, like this:

      table.data[0].rows[0].touchEnabled = 'false';
      

      Nothing really changes. The blue indicator, which indicates the line is being touched, still lights up.

      I did indeed try to add multiple tableViews to a window like this:

      win.add(tableView1);
      win.add(tableView2);
      win.add(tableView3);
      

      And only the last tableView was shown.
      Thanks again for your time.

      — commented November 25th 2010 by Tom Schouteden
  • 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();
    
    — answered November 25th 2010 by Paul Dowsett
    permalink
    4 Comments
    • This is a screenshot of the above script in action.

      — commented November 25th 2010 by Paul Dowsett
    • Maybe the behavior in Android is different? When I add two tableviews in my app the iPhone only shows the last one although I did not specify any height attributes or anything like that. I will give it a try with height and top attributes.

      — commented November 26th 2010 by Tom Schouteden
    • Tried it with top and height attributes but then it just shows three different tables that scroll separately. If you have any more ideas, it's much appreciated. tnx.

      — commented November 28th 2010 by Tom Schouteden
    • I am attempting to also have one non-selectable table view row within a single table view. I do not intend to make multiple table views as all of the table view rows must be in a table view 'section'. Hence, I was wondering if you have a solution for this issue that does not involve creating another table view?

      — commented October 14th 2011 by Chantel Garcia
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.