Collapsable / Nested tableView demo

Solar2D Widgets
#1

This topic came up recently in couple threads. How can we create a tableView which allows expanding and collapsing of category rows such that records under these categories get hidden & revealed?

It would of course be wonderful if tableView widget in future had some public methods to do all this but till then I think we can figure out how to get by using our current means… Here goes another community challenge. I will get the ball rolling. Please do chip in.

This sample makes use of Corona Sample app called Listview2. I added a new element to the data table to contain collapsed state. In real life we would not expect our database to contain a flag like this but we would probably keep this info dynamically in another table. For now this should do to give you a starting point to take it away from…

Please note this is a real quick and dirty implementation. Probably much to be cleaned up. Please post improved versions or ideas. Enjoy!!!

#2

thank you that’s what i’m looking for

#3

Super. Glad to be of help. Mind those listeners. Code here does not remove them. If you need this in a larger app context you will probably need to deal with this.

#4

ksan – you rock!!

That’s nicely done and quickly as well.

Couple of questions for you:

  1. have you seen or heard of problems with having too many “category” rows in tableView?

  2. I notice the code uses “display.screenOriginY” to place the title bar – is that necessary??  I’ve not seen it used before and I’ve always assumed that Y=0 was the top of my screen.  Is my top down anchoring likely to be broken on certain devices without using this technique

Also, two tips:  instead of having two images:  “rowArrow” and “rowArrowDown”, you can just rotate “rowArrow” 90 and -90 degrees

Also, (and I suspect this is original code) you can avoid a number of extra indexing operations by replacing:

for i = 1, #listItems do

with

for i, v in ipairs(listItems) do

#5

Nice work Ksan! :slight_smile:

#6

Thanks for checking it out. It was a pleasure tackling this one. I actually hope to find a way to achieve the same without having to delete all rows and render all again but even then thanks to the lazyloading implementation of tableView it seems to be ok performance wise.

Regarding questions above - 

  1. Haven’t seen any problems but then again I never worked with a table with more than 20 categories and about 500 records in total. From what I can see, no matter how many rows / categories you have the tableView widget only loads about a 1.5 screen worth of them at a time. This being the case (lazyloading) I can’t see a problem with having too many categories. User experience may of course dictate that you find ways to focus further but that is something only you can determine based on your use case. 

  2. I was simply using the CL Sample Listview 2. I am sure it can be improved in many ways but these possibilities were not something I worried about for now. As for the routine inserting records into the tableView, this area would change a lot depending on where your data is coming from and its format etc. Just left it as is for now. 

rotate the object. Of course thats a great idea. Here’s how you can get rid of the existing code in that section and achieve the same result with one file + rotate.

 local catIndicator = display.newImage( row, "rowArrow.png", false ) if not listItems[row.id].collapsed then catIndicator:rotate(90) end

Hope this helps. 

#7

Looks great, Kerem !

#8

I am learning from the best!  :slight_smile:

#9

Thank ksan

Setfillcolor on newtext fooled me for a while…

Corona Version 2013.1202 (2013.8.28) -back level.

#10

Thanks for the demo. I tried this. The only problem that I have is that with a lot of elements in the tableview, I want the tableview control to show the current category collapsed and keep showing all the above rows as it is. Right now, it redraws everything which essentially means that the tableview shows the rows from the top.

Any ideas about how to have this functionality.

#11

Not sure I understand the problem. Is it that it takes too long to redraw everything or is it that the redrawn tableView does not position itself to show the last touched category? If it’s the latter this should be easy to fix. I forgot to put a tableView:scrollToIndex() in there. Will try this later tonight.

#12

It’s the latter one and I played with scrollToIndex.

I think it will be easy if you want to move the newly opened category to the top of the screen. However, I was trying to open the category such that the rows above it don’t move. Any ideas about that?

#13

Got it. I think it’s doable. Try http://docs.coronalabs.com/api/type/TableViewWidget/getContentPosition.html#TOC to record the position of the category row tapped and then use scrollToY to jump back there. Should work.

#14

I have already tried this as well :).

When I collapse, sometimes, it moves the collapsing category out of visible area.

#15

Hmmm. Maybe when we’re collapsing a category a better way to go about it is to delete just the rows under the category being collapsed. This might be faster and work better with the positioning stuff. Will try later.

#16

hmm that might work. Also with scrollToY after deletingAllRows and expanding a catetory, the reload is not smooth (even when I set the time to 0). One can notice the text being rendered and then quickly vanishing as scoll kicks in :(. 

Anyway to make it more smoother.

Ideally, if there’s an API which allows me to add content to a category and delete content from a category would be great.

#17

Adding to that. Deleting everything and scrolling causes a flicker on expanding a category. It has a very bad user experience.

Another hack could be to delete all the rows below the current category and all following categories and then insert again but TableView doesn’t allow deleting category rows.

#18

Yup. There are some significant shortcomings in the tableView Category implementation. Most tableView methods are not functional over categories. This limits the usefulness of categories in the current state. 

#19

Ok. Hit another showstopper while trying to improve this demo. I was trying to delete child records under a Category and this (attached screenshot) is what I ended up with… Will have to put this effort on hold until this bug (Case # 29772 filed) is fixed as there is no way to delete multiple records right now.

More discussion here : 

http://forums.coronalabs.com/topic/41631-tableview-removing-multiple-rows/?p=226305

#20

Has anyone tried to do this in the widget source itself or just trying to do it with the existing state of it?

I remember in graphics 1.0 I could get access to almost all the properties of a table view and change just about everything (positioning, scrolling, …) I actualy made a data grid and a listview (table view) from scratch based on scrollView but it is broken since graphics 2.0. And haven’t gotten around to fixing it. I think this would be much easier to tackle by simply fixing and modifying the tableview source. But there is the problem of future updates that would have to merged in the changed source. But it would give you the ability to transition the lines smoothly to slide down and show the detail rows. I can check to see if this would be feasable.