Titanium Community Questions & Answer Archive

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

Changing all rows in a tableview

I am trying to change the layout of all rows in a tableview at the same time. Is there a way to do that?

This is what I want to do:

http://4.bp.blogspot.com/_QLwms0mVa4w/SQN0MqPIpXI/AAAAAAAAAA8/lEikKn9eP_0/s320/Screenshot+2008-10-25+15:31:21+-0400-1.png

Here's what I want to do in detail. I'm attempting to build an edit mode for a tableview which will be toggled by a button. When the edit mode is on, I can select multiple rows (blog articles, in fact) and apply a certain action to them (delete/move/edit settings).

I could do the select UI by adding hascheck to each row on click, however I would really like to be able to add some UI element to the rows to indicate that they are now ready to be selected. Is there a way I can add this UI element to all the rows in the tableview and change the position of existing elements without using a for loop?

I'm doing this currently:

for( var r = 0 ; r < tableView.data[0].rows.length ; r++){
   tableView.data[0].rows[r].children[0].animate({left:50, duration:500});
   tableView.data[0].rows[r].children[1].animate({left:50, duration:500});
   tableView.data[0].rows[r].children[2].show();
}

It's slow, and sometimes fails halfway through.
I can also see the views cascading to the left one after the other instead of simultaneously.

I'd like something smooth like when we toggle tableview.editing = true

— asked August 27th 2010 by Jay Liu
  • row
  • tableview
  • tableviewrows
0 Comments

4 Answers

  • Maybe recreating the rows and using setData will do the trick.

    — answered August 27th 2010 by Dan Tamas
    permalink
    1 Comment
    • I've tried that approach, but then I am unable to animate the transition, and I also have to create an entire set of redundant views. The loss of the animation is not that big of a deal, but it's noticeably slower to load, so I'm worried about the hit on performance when the tableview has a large number of rows. That's why I wanted to see if there was any way I could apply a change to all rows in a tableview, or possibly all rows with a className.

      — commented August 27th 2010 by Jay Liu
  • Mmm, what about adding all the UI elements in the row, and depending on the state you have, to show or hide what you need? Would this work for you ?

    — answered August 27th 2010 by Dan Tamas
    permalink
    1 Comment
    • That's exactly what I'm attempting to do. What I can't figure out is how to change the state of all the rows at the same time.

      In the code I posted above, I have

      tableView.data[0].rows[r].children[2].show();
      

      children[2] is actually the checkbox imageview. Is there some way I can make that imageview show in all rows at the same time?

      — commented August 27th 2010 by Jay Liu
  • Maybe caching the elements before you put it into the rows and accessing form here would be more faster.

    var buttons = [b1,b2,b3,b4];
    
    row1.add(b1)...
    ...
    
    
    for ( b in buttons ) {
    butons[b].hide();
    }
    
    — answered August 27th 2010 by Dan Tamas
    permalink
    1 Comment
    • That's a great idea. I'll try that and see if it makes is faster.

      Your post gave me another idea too. I'm gonna try adding an event listener to every row, and then firing that event on a button click so all the rows receive the event at the same time. However, this seems like a really dirty way to do a simple operation, as I may end up with hundreds of event listeners. If anyone knows the nice and clean way to change all rows at once without looping, please let me know!

      — commented August 30th 2010 by Jay Liu
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.