Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Collapsable / Nested tableView demo
Started by ksan Jan 08 2014 11:11 PM

40 replies to this topic
[TOPIC CONTROLS]
Page 1 of 2 1 2
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

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!!!

Attached Files



[TOPIC: post.html]
#2

munadelq

[GLOBAL: userInfoPane.html]
munadelq
  • Starter
  • Pip
  • 6 posts
  • Newbie

thank you that's what i'm looking for



[TOPIC: post.html]
#3

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

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.



[TOPIC: post.html]
#4

dgaedcke

[GLOBAL: userInfoPane.html]
dgaedcke
  • Pro
  • PipPipPipPipPipPip
  • 261 posts
  • Jedi

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



[TOPIC: post.html]
#5

euphoriacorona

[GLOBAL: userInfoPane.html]
euphoriacorona
  • Starter
  • PipPipPipPipPipPip
  • 124 posts
  • Jedi

Nice work Ksan! :)

[TOPIC: post.html]
#6

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

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. 



[TOPIC: post.html]
#7

atanas

[GLOBAL: userInfoPane.html]
atanas
  • Pro
  • PipPipPipPipPipPip
  • 225 posts
  • Jedi

Looks great, Kerem !

[TOPIC: post.html]
#8

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

Looks great, Kerem !

 

I am learning from the best!  :)



[TOPIC: post.html]
#9

ibmprgmrsince1964

[GLOBAL: userInfoPane.html]
ibmprgmrsince1964
  • Starter
  • PipPipPipPipPipPip
  • 70 posts
  • Jedi

Thank ksan

Setfillcolor on newtext fooled me for a while...

Corona Version 2013.1202 (2013.8.28) -back level.



[TOPIC: post.html]
#10

Hesive

[GLOBAL: userInfoPane.html]
Hesive
  • Pro
  • PipPip
  • 18 posts
  • Member

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.



[TOPIC: post.html]
#11

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

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.

[TOPIC: post.html]
#12

Hesive

[GLOBAL: userInfoPane.html]
Hesive
  • Pro
  • PipPip
  • 18 posts
  • Member

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?



[TOPIC: post.html]
#13

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

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.

[TOPIC: post.html]
#14

Hesive

[GLOBAL: userInfoPane.html]
Hesive
  • Pro
  • PipPip
  • 18 posts
  • Member

I have already tried this as well :).

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



[TOPIC: post.html]
#15

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

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.

[TOPIC: post.html]
#16

Hesive

[GLOBAL: userInfoPane.html]
Hesive
  • Pro
  • PipPip
  • 18 posts
  • Member

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.



[TOPIC: post.html]
#17

Hesive

[GLOBAL: userInfoPane.html]
Hesive
  • Pro
  • PipPip
  • 18 posts
  • Member

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.



[TOPIC: post.html]
#18

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

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. 



[TOPIC: post.html]
#19

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

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

 

 

Attached Files



[TOPIC: post.html]
#20

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Starter
  • PipPipPipPipPipPip
  • 447 posts
  • Jedi

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.



[TOPIC: post.html]
#21

dgaedcke

[GLOBAL: userInfoPane.html]
dgaedcke
  • Pro
  • PipPipPipPipPipPip
  • 261 posts
  • Jedi

@primoz  That would be really awesome if you found a clean way to do this....and if your solution is low impact to the existing code, perhaps we could get CL to merge your improvement back into the master branch......



[TOPIC: post.html]
#22

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

@primoz - indeed it would be much better to implement this capability in the widget code itself. For me, what I shared above was an exercise in Corona SDK programming and an attempt to make do with what we have today. I would love to see a solution implemented inside the widget. Look forward to seeing your mods if you share them here. Maybe we can work together and make it G2 ready. Thanks!!!



[TOPIC: post.html]
#23

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Starter
  • PipPipPipPipPipPip
  • 447 posts
  • Jedi

Just to clarify the G1 widgets I made were made because of issues I had with the existing widgets. The table view however did not have the functionality discussed here. I was just stating that in G1 a lot of properties and objects were accessible and could be manipulated without modifying the widget source code. I have seen that some things are no longer accessible in G2 so they have either been hidden or moved. Due to this I don't know if it can be done outside the widget source so it might be better to add the functionality in the widget source itself.

 

I will take a look at it and see what I can come up with.

Stay tuned.



[TOPIC: post.html]
#24

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Starter
  • PipPipPipPipPipPip
  • 447 posts
  • Jedi

This is what I came up with without changing the widget source.
I have modified your test project.
It needs to be generalized and isolated into a separate module.
Will add the transitions later.
 
WARNING! This kind of coding is very susceptible to changes in the underlying library. Therefore I strongly suggest keeping the tableView.lua source included in your project to make sure it doesn't break in the next build. It would actually be wise to include the widget.lua as well as it gets called from the tableView. It works with the current version though so you may remove it and change the tableView.new back to widget.newTableView but you have been warned.

 

Updated on page 2



[TOPIC: post.html]
#25

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Pro
  • PipPipPipPipPipPip
  • 2,741 posts
  • Jedi

@primoz - thank you so much for your contribution!!! This is exactly what I was hoping for when I started this thread. That other devs would jump in, improve code and show us all better ways to achieve results. I think we all need more threads like this one. Thank you very much. Will checkout your version right away. Have a good weekend.




[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]