Flex DataGrid in GridItemRenderer

Question

I've got some hierarchical data that I would like to show in a Flex Spark DataGrid, looking something like this:

|------|---------------------------|
| row1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
|  in  | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| outer|---------------------------|
| grid | a component that spans    |
|      | over multiple columns here|
|----------------------------------|
| row2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
|  in  | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| outer|---------------------------|
| grid | a component that spans    |
|      | over multiple columns here|
|----------------------------------|

What I'm trying to do is to use a custom GridItemRenderer that holds an inner DataGrid. The basic concept looks something like this:

<s:DataGrid dataProvider="{outerDataProvider}" width="100%" height="100%" variableRowHeight="true">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="name">
                <s:itemRenderer>
                    <fx:Component>
                        <s:DefaultGridItemRenderer />
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>
            <s:GridColumn>
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                            <s:states>
                                <s:State name="normal" />
                                <s:State name="toggled" />
                            </s:states>
                            <s:layout>
                                <s:VerticalLayout />
                            </s:layout>
                            <s:HGroup>
                                <s:DataGrid dataProvider="{data.innerDataProvider}"  columns="{outerDocument.myDynamicGeneratedColumns}">
                                </s:DataGrid>
                                <s:Group>
                                    <s:ToggleButton label="Toggle" />
                                </s:Group>
                            </s:HGroup>

                            <MyComponent width="100%" height="50" includeIn="toggled" />
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

I'm experiencing some serious performance issues when adding the inner DataGrid. Vertical scrolling is horribly slow.

I've been trying to understand what to optimize, but I'm not really sure where to begin. The inner DataGrid need to have a dynamic number of columns, and I guess this is one of the parts where something needs to be done.

Is it completely wrong to do something like this? Could I use another component than DataGrid for the inner Grid structure and get better performance?

The grid is basicly a grid containing images depending on the values inside each row.

Any suggestions or links to DataGrid tips?

ahh something interesting.. DataGrid inside DataGrid.. never thought of it. Lets see how it goes with other guyz around. — M.D.
Erm, why use a datagrid for that? I'm not sure I understand the point or the data. — J_A_X

Nate Nate · Accepted Answer · 2011-07-21T15:16:03

How about using a list with a TileLayout for the inner grid. This would definitely perform much better:

    <s:List>
        <s:layout>
            <s:TileLayout/>
        </s:layout>
    </s:List>

Flex DataGrid in GridItemRenderer

1 Answers