Question

I have flex advancedDataGrid (could use dataGrid if that works better, though i like my meta-column headers), and i want to have a component popup on top of a selected row.

The problem is, i can figure out how to reference an actual rendered row of a datagrid (rather than an item of the dataprovider) in order to get its position on the screen.

Does anyone have any theories on how to access a “row” of a datagrid, or at least get its position?

Cheers

Answer 1

We ended up doing this in an itemrender that references the parent document. Basically, when clicked, the item renderer would evoke a function in the parent with a reference to itself.

At that point our parent document knew which cell was selected, and we did some manipulation to determine its x,y coordinates:

public function showPopup(selectedItemRenderer:UIComponent):void {
        selectedCell = selectedItemRenderer;

        PopUpManager.removePopUp(editPopup);

        editPopup.height = dg.rowHeight;

        BindingUtils.bindProperty(editPopup, "width", dg, "width");

        editPopup.setStyle("backgroundColor", 0xFF0000);
        if(selectedCell != null) {
            editPopup.x = selectedCell.localToGlobal(new Point(0,0)).x - 1;
            editPopup.y = selectedCell.localToGlobal(new Point(0,0)).y - 1;
        }

        PopUpManager.addPopUp(editPopup, DisplayObject(Application.application));

    }

<mx:DataGrid id="dg" width="500" height="100%"
    dataProvider="{dummyData2}">
<mx:columns>        
    <mx:DataGridColumn
        width="60">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox>
                    <mx:Button label="edit" click="{parentDocument.showPopup(this)}" />
                </mx:HBox>                          
            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn 
        dataField="Category">
    </mx:DataGridColumn>     
</mx:columns>