Multi Section TableView

aroldopc · February 11, 2018, 7:09pm

Hello,

I am developing an app and I need to know hoe to display the table in groups.

I did enter one line in the array with the section title, but I think there must be another way.

groupA[1] = { flag="flags/clear.png", country="Group A" } groupA[2] = { flag="flags/ksa.png", country="Saudi Arabia" } groupA[3] = { flag="flags/egy.png", country="Egypt" } groupA[4] = { flag="flags/uru.png", country="Uruguai" } groupA[5] = { flag="flags/uru.png", country="Uruguai" } --and I add them to the list for i = 1, #groupA do &nbsp; &nbsp; &nbsp; myList:insertRow{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowHeight = 60, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isCategory = false, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowColor = { 1, 1, 1 }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;lineColor = { 0.90, 0.90, 0.90 }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;params = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flag = groupA[i].flag, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; country = groupA[i].country &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp;end

Is there another widget that I can use to group TableViews ?

I already did a tableview , but I need to break it in groups.

What I wan to display is:

Group A

Image1 Text

image2 Text

Image3 Text

Image4 Text

Group B

Image5 Text

image6 Text

Image7 Text

Image8 Text

Group N

ImageNText

imageN+1 Text

ImageN+2 Text

ImageN+3 Text

rob · February 11, 2018, 8:22pm

TableViews support grouping by setting the isCategory value to true for your divider rows. I don’t know how you’re going to insert multiple groups. That is are you going to use nested for loops or individual for loops for each group. But using your example:

myList:insertRow { rowHeight = 60, isCategory = true, rowColor = { 0.8, 0.8, 0.8 }, lineColor = { 0.90, 0.90, 0.90 }, params = { title = "Group A", } } for i = 1, #groupA do myList:insertRow{ rowHeight = 60, isCategory = false, rowColor = { 1, 1, 1 }, lineColor = { 0.90, 0.90, 0.90 }, params = { flag = groupA[i].flag, country = groupA[i].country } } end

Then in your onRowRender function, you can test to see if it’s a category row and display it differently. You can look at the WidgetDemo sample app for an example.

Rob

aroldopc · February 11, 2018, 9:00pm

Rob,

Thank you for your answer.

I tried your suggestion and I am getting an error in my onRowRender:

Attempt to index field ‘flag’ (a nil value)

for some reason it is not finding the params.flag.

If I comment the insert Row title from scene:Show and from onRowRender , it works fine.

function scene:show( event ) &nbsp; &nbsp; local sceneGroup = self.view &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; params = event.params &nbsp; &nbsp; print("scene show " .. #groupA) &nbsp; &nbsp; myList:insertRow { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowHeight = 60, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isCategory = true, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowColor = { 0.8, 0.8, 0.8 }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;lineColor = { 0.90, 0.90, 0.90 }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;params = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title = "Group A", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} } &nbsp; &nbsp; for i = 1, #groupA do &nbsp; &nbsp; &nbsp; myList:insertRow{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowHeight = 60, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isCategory = false, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowColor = { 1, 1, 1 }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;lineColor = { 0.90, 0.90, 0.90 }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;params = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flag = groupA[i].flag, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; country = groupA[i].country &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp;end end local function onRowRender( event ) &nbsp; &nbsp;--Set up the localized variables to be passed via the event table &nbsp;--print ("onRowRender") &nbsp; &nbsp;local row = event.row &nbsp; &nbsp;local id = row.index &nbsp; &nbsp;local params = event.row.params &nbsp; &nbsp;row.bg = display.newRect( 0, 0, display.contentWidth, 60 ) &nbsp; &nbsp;row.bg.anchorX = 0 &nbsp; &nbsp;row.bg.anchorY = 0 &nbsp; &nbsp;row.bg:setFillColor( 1, 1, 1 ) &nbsp; &nbsp;row:insert( row.bg ) &nbsp; &nbsp;if id \> #groupA then return true end &nbsp; &nbsp;if ( event.row.params ) then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; row.titleText = display.newText( params.title, 12, 0, native.systemFontBold, 20 ) &nbsp; &nbsp; &nbsp; row.titleText.anchorX = 0 &nbsp; &nbsp; &nbsp; row.titleText.anchorY = 0.5 &nbsp; &nbsp; &nbsp; row.titleText:setFillColor( 0 ) &nbsp; &nbsp; &nbsp; row.titleText.y = 20 &nbsp; &nbsp; &nbsp; row.titleText.x = 42&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;row.flag = display.newImageRect( params.flag,70, 46 )&nbsp; &nbsp; &nbsp;row.flag.anchorX=0 &nbsp; &nbsp;row.flag.anchorY=0 &nbsp; &nbsp;row.flag.x= 0 &nbsp; &nbsp;row.flag.y = row.height \*0.5-row.flag.height\*0.5 &nbsp; &nbsp; &nbsp; row.countryText = display.newText( params.country, 12, 0, native.systemFont, 18 ) &nbsp; &nbsp; &nbsp; row.countryText.anchorX = 0 &nbsp; &nbsp; &nbsp; row.countryText.anchorY = 1.0--0.5 &nbsp; &nbsp; &nbsp; row.countryText:setFillColor( 0.5 ) &nbsp; &nbsp; &nbsp; row.countryText.y = 40 &nbsp; &nbsp; &nbsp; row.countryText.x = 75 &nbsp; &nbsp; &nbsp; row.rightArrow = display.newImageRect(myApp.icons, 15 , 40, 40) &nbsp; &nbsp; &nbsp; row.rightArrow.x = display.contentWidth - 20 &nbsp; &nbsp; &nbsp; row.rightArrow.y = row.height / 2 &nbsp; &nbsp; &nbsp; row:insert( row.rightArrow ) &nbsp; &nbsp; &nbsp; row:insert( row.countryText ) &nbsp; &nbsp; &nbsp; row:insert( row.flag ) &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;end &nbsp; &nbsp;return true end

rob · February 11, 2018, 9:29pm

eThat’s right. On the first insert row, I suggested only passing in a value for something called “title”, since that will be a category row. For that row, you’re not passing in the values of “flag” and “country”. You have to put an “if” statement in your onRowRender that determines if it is a category row or a data row and then add the objects appropriate for that type:

if params.title then -- is category row &nbsp; &nbsp; &nbsp; row.title =&nbsp;display.newText( params.title, 12, 0, native.systemFontBold, 20 ) else&nbsp; &nbsp; &nbsp; &nbsp; -- code for a normal rows here end

aroldopc · February 12, 2018, 12:08pm

Hello Rob,

That worked, thank you.

Now I would like to know why the group title does not scroll like the rest of the TableView? it stays at the top.

nick_sherman · February 12, 2018, 5:02pm

You are not inserting row.titleText into row.

rob · February 13, 2018, 12:53am

The behavior of category rows is based on the iOS behavior which freezes that category at the top while items in that category are still being displayed.

Rob

rob · February 11, 2018, 8:22pm