FLEX - How Can I Click On A Row In A DataGrid And Highlight All Related Rows

Question

Hi,

Can someone show me a basic example of how I can select a row in a datagrid in flex and have it highlight that row plus any related rows. Let me give you can example:

Let's say that I have a datagrid. In the grid I have two columns for each row. One column has what type of car they own, and the other column has the owners name. Let's say that an owner has two cars. So you have a datagrid that looks like this (4 rows, 2 columns):

Camery Jon

Tundra Billy

Jaguar Jon

Range Rover Mike

What I am looking for... if you click on the Camery row, the Jaguar row and the Camery row are both highlighted.

I have a datagrid that has items, and has related items to its parent.

Thanks

Answer 1

1. Use the ItemClick event on the datagrid
2. Get the selectedItem (meaning the selected row data)
3. Enable multipleSelection on the datagrid
4. Loop trough the dataprovider and find the indexes of the items that you want to highlight (for ex all indexes where Jon appears).
5. Set the selectedIndexed on the dataprovider with the info collected at step 4

Answer 2

Here's a quick and dirty implementation using a handler for the change event:

private function onChange(e:ListEvent):void {
    var dp:ArrayCollection = e.currentTarget.dataProvider as ArrayCollection;
    var matches:ArrayCollection = new ArrayCollection();
    for (var i:int = 0; i < dp.length; i++) {
        if (dp[i].person == e.itemRenderer.data.person) {
            matches.addItem(dp[i]);
        }
    }
    (e.currentTarget as DataGrid).selectedItems = matches.source;
}

And here's the MXML for the datagrid:

<mx:DataGrid change="onChange(event)">
    <mx:dataProvider>
        <s:ArrayCollection>
            <fx:Object person="Jon" car="Camry"/>
            <fx:Object person="Billy" car="Tundra"/>
            <fx:Object person="Jon" car="Jaguar"/>
            <fx:Object person="Mike" car="Range Rover"/>
        </s:ArrayCollection>
    </mx:dataProvider>
    <mx:columns>
        <mx:DataGridColumn dataField="person"/>
        <mx:DataGridColumn dataField="car"/>
    </mx:columns>
</mx:DataGrid>

Hope that helps.