How do we reduce the height of the list based on the state of its item renderer...

Question

We have a requirement to show a list of appointment slots. So every hour of a schedule has a set of 10 min slots. The requirement is that if we click on a arrow button at the 8:00, 9:00 hour slot, the layout of the hour slots should change from a vertical list to a horizontal list.

For this we modeled the system as follows:

ScheduleComponent ->(contains) -> List (Hours of schedule) The HourViewComponent is an Item Renderer, that displays the 10 mins slots based on the available appointments by using a Slots List (list of slots in the 8:00 hour).

For the Slots List we have a Slot View Component as an Item Renderer.

Now the issue is that when we click on the 8:00 slot we are able to change the HourViewSlot from a VerticalState to a Horizontal state. But The container height is not collapsing in the minimized state. It occupies the same size as the vertical layout!

We tried using variableRowHeight attribute.

We tried setting the rowHeight in the Item Renderer button Click event Handler but this causes all the items list row height to change. We want only the current hour height to change.

We are not sure now if List is the right component to use. Please Help. link text

Answer 1

I think you're on the right track with List, item renderers, and variableRowHeight. I suspect that the HourViewComponent is not recalculating its height or recalculating it wrong. It may be that nothing you do in the event handler is triggering an invalidateSize call or that sizes are somehow calculated in the wrong order.