Flex datagrid control with expanding rows

Question

I'm looking for a DataGrid with expandable rows implementation in Flex. I don't want to use Advanced DataGrid control because it's too slow and too complex.

The desired behavior is like this: when you click a row, a panel opens between the rows with some details and the rest of the rows are moved down, and when you click again the panel is closed and the rows are back to normal. If you click the other row, the one that was expanded collapses and the row you clicked is expanded.

Answer 1

You'll probably need to use a custom ItemEditor that responds to clicks and expands itself.

The variableRowHeight property may need to be set to true as well.

Answer 2

The behavior you are describing sounds an awful lot like an Accordion component, though that doesn't quite sound like what you are looking for. Another approach would be to use a List component with a custom itemRenderer that is expanded when in the selected (clicked) state, and collapsed when not selected.

Answer 3

We extended Flex Datagrid component and used custom item renderer for this. We actually expand one cell and resize it to cover all other cells in the same row. While this may be not the easiest solution it works and the Datagrid is very fast.

Answer 4

Hi there,

I am searching for this solution for a while, could you please add some code example to your solution because i didn't exactly understand how to implement this....

i could implement this by a List or other components, but i need the datagrid...