Question

I have a RPC-generated list of widgets with headers and bodies. I would like to display them vertically, with only the headers showing. When the user clicks a header, the corresponding body slides down into view, and any other open bodies slide out of view.

The accordion effect can be achieved with a StackPanel. However, I also want the ease of paging and accessing remote data afforded by CellList and AsyncDataProvider. It looks like the two will be available together in GWT 2.5, which unfortunately is not out yet.

Another idea I had was to just use a CellList, and use relative positioning on each cell to get the accordion effect. The logic is simple enough to implement, but grabbing the cells from the cell list and messing with their style attribute seems like a dirty hack.

Is there a better way to do this?

Followup: (I’m not sure if this should be a separate question.) The CellList’s structure looks something like this:

<div __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true" class="GJOQRHCBPB GJOQRHCBMK">  

<div onclick="" __idx="0" class="GJOQRHCBLB" style="outline:none;" tabindex="0">
  <!-- my cell html -->
</div>
<div onclick="" __idx="1" class="GJOQRHCBLB" style="outline:none;" tabindex="1"> <!-- ... -->
<div onclick="" __idx="2" class="GJOQRHCBLB" style="outline:none;" tabindex="2"> <!-- ... -->
<!-- ... -->
</div></div>

Styling my cell is easy enough, and it displays correctly on the page. However, my styling of the cell doesn’t influence the parent divs (with __idx), and they still stretch out the entire original length. This means that if you click beneath where the cell list “should be”, selection events will be fired. This could be fixed if I could just access and style the __idx divs directly, but I’m afraid that’s a horribly dirty hack. Is there a better way to do this?

Answer 1

What GWT 2.5 will add is a way to build several rows for a single item in a CellTable (or DataGrid); it won’t change anything for CellLists. Also, you’ll still be in charge of handling the events to expand/collapse the rows, possibly animating them, and at most one expanded row won’t come for free either.

All in all, it won’t change anything for your use-case.

You need to bake this expand/collapse behavior in your cell’s rendering/event handling. As for collapsing other rows, you’ll have to process the DOM starting from the list level (i.e. find all collapsible elements and make sure they’re collapsed, then expand the row that needs it).
Alternatively, you could use, say, a NoSelectionModel or SingleSelectionModel and simply render the selected/last-selected item as expanded, and others collapsed (triggering redraw from the SelectionHandler if needed). You’d probably lose animations though.