Search code examples
apache-flexdatagridflex3rowadvanceddatagrid

Finding x,y position of a datagrid / adavancedDataGrid row in Flex


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


Solution

  • 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>