Flex datagrid: Add a Menu control for each row/column

Question

I tried to figure this out but I was not able to. I have an AdvancedDataGrid and in each row, there are columns. And each column element can contain text/images or any custom UiComponent.

What I want is the user to be able to click on a column and then I show a custom menu like this !(http://livedocs.adobe.com/flex/3/html/images/menu.png)

So, when a user click on row 1 column 1 (employee name for example), options in the menu could be: -Delete employee -Show employee reports

And when user click on row 1 column 2 (employee status), options could be: -Delete employee -Set employee to retired

My problem is that the click event is not fired when I click on the UiComponent or on the Text in the datagrid. Even if I set the backgroundfill and the alpha.

Thanks

Mahesh Parate Mahesh Parate · Accepted Answer · 2012-06-18T06:09:59

Please find sample below where you can get some idea: - Here i am posting sample through which you can achieve what you are looking for. You can make it more customize by using below logic.

<?xml version="1.0" encoding="utf-8"?>
<s: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">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:XML format="e4x" id="myMenuDataEmpName">
            <root>
                <menuitem label="Delete employee"  data="ShowAlertPopup"/>
                <menuitem label="Show employee reports"  data="ShowAlertPopup"/>
            </root>
        </fx:XML>

        <fx:XML format="e4x" id="myMenuDataEmpStatus">
            <root>
                <menuitem label="Delete employee" data="ShowAlertPopup"/>
                <menuitem label="Set employee to retired"  data="ShowAlertPopup"/>
            </root>
        </fx:XML>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.Menu;
            import mx.events.FlexEvent;
            import mx.events.MenuEvent;

            [Bindable]
            private var dpHierarchy:ArrayCollection= new ArrayCollection([
                {name:"A", region: "Arizona"},
                {name:"B", region: "Arizona"},
                {name:"C", region: "California"},
                {name:"D", region: "California"}
            ]); 

            private function init():void
            {
                myADG.addEventListener(AGDRowCloumnMenuEvent.MENU_EVENT, menuHandler);
            }

            private function menuHandler(event:AGDRowCloumnMenuEvent):void
            {
                if(event.eventInfo == 'name')
                {
                    createAndShowEMP("Name")
                }
                else{
                    createAndShowEMP("Status")
                }
            } 

            private function createAndShowEMP(displayMenu:String):void {
                var myMenu:Menu;  
                    if(displayMenu == "Name")
                        myMenu = Menu.createMenu(null, myMenuDataEmpName, false);
                    else
                        myMenu = Menu.createMenu(null, myMenuDataEmpStatus, false);

                myMenu.labelField="@label";
                myMenu.addEventListener(MenuEvent.ITEM_CLICK, executeItemClickMenuHandler);
                myMenu.show(10, 10);
            }

            private function executeItemClickMenuHandler(menuEvent:MenuEvent):void {
                callLater(this[menuEvent.item.@data]);
            }

            private function ShowAlertPopup():void
            {
                Alert.show("Menu Item Clicked")
            }
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG" x="50" y="50"
                         width="400" height="300" creationComplete="init()"
                         variableRowHeight="true" dataProvider="{dpHierarchy}">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="name" headerText="Emp Name" itemRenderer="ADGRowColumnMenu"/>
            <mx:AdvancedDataGridColumn dataField="region" headerText="Emp Status" itemRenderer="ADGRowColumnMenu"/>
        </mx:columns>   

    </mx:AdvancedDataGrid>
</s:Application>

Item Renderer Name: - ADGRowColumnMenu

 <?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true">
    <fx:Script>
        <![CDATA[

            override public function set data(value:Object):void
            {
                super.data = value;
                lblData.addEventListener(MouseEvent.CLICK, clickHandler);   
            }

            private function clickHandler(event:MouseEvent):void
            {
                var eventData:AGDRowCloumnMenuEvent = new AGDRowCloumnMenuEvent(AGDRowCloumnMenuEvent.MENU_EVENT,true);
                eventData.eventInfo = listData['dataField'];
                dispatchEvent(eventData);
            }

        ]]>
    </fx:Script>
    <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />
</s:MXAdvancedDataGridItemRenderer>

Custom Event through which you can dispatch your custom data Name: - AGDRowCloumnMenuEvent

package
{
    import flash.events.Event;

    public class AGDRowCloumnMenuEvent extends Event
    {
        public static const MENU_EVENT:String = "menuEvent";

        public var eventInfo:Object = null;

        public function AGDRowCloumnMenuEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

Hope above code may help you.

Flex datagrid: Add a Menu control for each row/column

1 Answers