Get selectedIndex in Datagrid from itemRenderer

Question

I have a DataGrid and the first column cells have an itemRenderer with an embebed image and doubleClick event linked.

So, when o double click event occur, this renderer catch the event and the handler. The question is that I would like to dispatch an Event with the index of the selected item in the Datagrid and I do not find out how to ge it.

s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true"
                width="50" height="30">

<fx:Script>
    <![CDATA[
        import events.EditItemEvent;

        import mx.controls.Alert;
        override public function prepare(hasBeenRecycled:Boolean):void {}

        protected function btn_edit_doubleClickHandler(event:MouseEvent):void {
            /* here I dispatchEvent with the 'index' of the selectedItem of the datagrid */
        }

    ]]>
</fx:Script>
<s:Image id="btn_edit" horizontalCenter="0" source="@Embed('assets/images/edit_icon.png')"
         verticalCenter="0"
         doubleClickEnabled="true"
         doubleClick="btn_edit_doubleClickHandler(event)"/>

Any idea?

score 1 · Answer 1 · answered May 10 '13 at 13:24

1

Can you use grid.selectedIndex?

Honestly, I think this is a bad idea. The renderer should not know anything about the DataGrid including the selectedIndex. If you want to dispatch a custom event so you can operate on the renderer data in someplace in the displaylist hierarchy; you should include the data, not the index. Your handler method operate on the data.

answered May 10 '13 at 13:24

JeffryHouser

39,401
4
38
59

Could you post an example? – Apalabrados May 10 '13 at 15:28
I don't have time to do an in depth example. Start by reading the Flex documentation on events: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7ee9.html and try to get it working, then come back with a specific question. – JeffryHouser May 10 '13 at 16:38

michaPau · Answer 2 · 2013-05-12T15:15:45.500

you can access it via it's owner property:

(this.owner as DataGrid).selectedIndex

simple itemRenderer which dispatches a custom event:

<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>
    <![CDATA[   

        override public function prepare(hasBeenRecycled:Boolean):void {
            lblData.text = data[column.dataField]
        }
        protected function onClickButton(ev:MouseEvent):void {
            trace("ButtonDispatchItemRenderer::onClickButton");
            //dispatch the Event which has a static const GET_SELECTED_INDEX for the event type
            this.owner.dispatchEvent(new MyEvent(MyEvent.GET_SELECTED_INDEX));
        }
    ]]>
</fx:Script>

<s:HGroup verticalAlign="baseline">
    <s:Label id="lblData" top="9" left="7"/>
    <s:Button label="dispatch" click="onClickButton(event)"/>
</s:HGroup>

</s:GridItemRenderer>

simple Application with a DataGrid listening to the event

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600" creationComplete="onCreationComplete()">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        import spark.components.gridClasses.GridColumn;


        [Bindable]
        public static var initDG:ArrayCollection = new ArrayCollection([
            {label:"firstItem"}, {label:"secondItem"}, {label:"thirdItem"}

        ]); 


        protected function onCreationComplete():void {

            dataGrid.addEventListener(MyEvent.GET_SELECTED_INDEX, onRendererButtonClick, false, 0, true);
        }
        protected function onRendererButtonClick(ev:MyEvent):void {
            trace("Application::RenderButtonClick");
        }

    ]]>

</fx:Script>
<s:VGroup>
    <s:DataGrid id="dataGrid" verticalCenter="0" horizontalCenter="0"  dataProvider="{initDG}">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="label" itemRenderer="renderers.ButtonDispatchItemRenderer"></s:GridColumn>                   
            </s:ArrayList>
        </s:columns>            
    </s:DataGrid>
</s:VGroup>

</mx:Application>

you have to add a property to your event which holds the selectedIndex. And you have to pass the value to the event inside the renderer (second argument in the constructor for example) This example just dispatches the event

Hi @michaPohh, I have just implemented your code and it does not work. The call this.owner.dispatchEvent( new EditItemEvent( EditItemEvent.EDIT_CLICKED ) ); --------- The receiver: preciosGrid.addEventListener( EditItemEvent.EDIT_CLICKED, showMessage, false, 0, true ); — Apalabrados, May 10 '13 at 15:22
Isn't rowIndex related to the number of rows displayed on screen? I don't think that correlates to the index of the renderer's data in the dataProvider. — JeffryHouser, May 10 '13 at 16:39
I mean that the Listener do not receive the Event. I only have an Alert when the function is invoked via the Listener. — Apalabrados, May 10 '13 at 16:42
Try to make the event bubble. I'm not an expert on the Spark DataGrid architecture; but I suspect that the parent of the renderer is not the instance of the DataGrid, but rather a child of it. — JeffryHouser, May 10 '13 at 17:01
I will add code of an itemrenderer tomorrow to make it clearer... It's true that rowIndex is not a good choice like Rebboog has already mentioned (stick with the selectedIndex) because the underlying data could be sorted, filtered, scrolled etc.... — michaPau, May 11 '13 at 20:36

Get selectedIndex in Datagrid from itemRenderer

2 Answers2