Grid with Multiple Headers

Hi guys,

I’ve been following the tutorial for Grid component and it only shows two rows for grouping headers. how can you group the headers with three rows?

like:

Remember
in TB | Pick
U | A | U |A


Remember

  • in TB
    [list]
  • U
  • A

    [/list]
  • Pick
    [list]
  • U
  • A

    [/list]

Best Regards,

Hi, you just pass the property ids of all the columns you want to span to HeaderRow.join:

grid.prependHeaderRow().join(col1, col2, col3, col4).setText("Remember");

If I do that, it will only create two rows for header…


| Remember |


| col1 | col2 | col3 | col4 |

what I want to achieve is:


| Remember |


| col1 | col2 |


| col3 | col4 | col5 | col6 |

Well, I presumed you already had the second header row. Just call prependHeaderRow as many times you want to:

HeaderRow second = grid.prependHeaderRow();
second.join(col1, col2).setText("In TB");
second.join(col3, col4).setText("Pick");

HeaderRow third = grid.prependHeaderRow();
third.join(col1, col2, col3, col4).setText("Remember");

Got it!

Thank you! Thank you!

It works!

Best Regards,

:slight_smile:

Gracias Johannes Dahlström =)