Flex datagrid header row right click

Question

I got a Datagrid in my Flex application.

I need to make appear a context menu when the header row is right-clicked. The latter context menu must not appear when the rest of the datagrid items (the ones containing data) are clicked.

Edit: the application runs in AIR environment, so i got no flash-player troubles

Answer 1

In flex, and more generally in flash, there is no way to catch the the right click event.

Answer 2

I'm not sure about the right mouse click, cos flex apps run in flash player, and right click brings up its menu. The best bet would be to use headerRelease event on your DatagRid. In your event handler you can then create your menu (maybe in a popup or some hovering panel?) and then do what you need to do there. Read more about it here

edit: Maybe you could use a contextMenu class, and attach it to your dataGrid.contextMenu?

Answer 3

Below code may help you: -

I have created sample in which i have added only one ITEM. You can convert it and change logic as per requirement. My idea is to provide one of the base logic. You may gey better solution but this can work for you.

   <?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:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <mx:DataGrid id="myDG" width="350"> 
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:source>
                    <fx:Object Artist="" Price="11.99" 
                               Album="Slanted and Enchanted" />
                    <fx:Object Artist="" 
                               Album="Brighten the Corners" Price="11.99" />
                </mx:source>
            </mx:ArrayCollection>
        </mx:dataProvider>
        <mx:columns>
            <mx:DataGridColumn dataField="Artist" headerRenderer="StackLabelRenderer"/>
            <mx:DataGridColumn dataField="Album" headerRenderer="StackLabelRenderer"/>
            <mx:DataGridColumn id="price" dataField="Price" headerRenderer="StackLabelRenderer"/>
        </mx:columns>
    </mx:DataGrid>

</s:Application>

StackLabelRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx"
          click="dispatchClickEvent()">

    <fx:Script>
        <![CDATA[
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.core.mx_internal;

            private function dispatchClickEvent():void
            {
                trace("Item Clicked")
            }

            import mx.controls.Alert;

            [Bindable]
            private var cm:ContextMenu;

            override protected function createChildren():void
            {
                    cm = new ContextMenu();
                    cm.hideBuiltInItems();
                    cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
                    this.contextMenu = cm;
            }

            private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
                //condition to check length of column data length
                var allNull:Boolean=true;
                var columnName:String = DataGridColumn(data).headerText;
                for each(var o:Object in DataGrid(owner).dataProvider) {
                    if(o[columnName] != "") {
                        allNull=false;
                        break;
                    }
                }
                if(!allNull)
                {
                    var cmi:ContextMenuItem = new ContextMenuItem("First Element...", true);
                    cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);
                    cm.customItems = [cmi];
                }
            }

            private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {
            }
        ]]>
    </fx:Script>
</mx:Label>