Using a custom context menu with the Flex DataGrid control

I saw this question come up on a list today and thought this was pretty handy. Plus, I think it is the first time I’ve had a chance to play with the ContextMenu and ContextMenuItem classes in Flex in quite a while.

The following example pops up a custom context menu when the user right-clicks on an item in an data grid. After selecting the custom item (“View item…”) from the context menu an Alert control is displayed showing the selected item’s properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/using-a-custom-context-menu-with-the-flex-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            [Bindable]
            private var cm:ContextMenu;

            private var alert:Alert;

            private function init():void {
                var cmi:ContextMenuItem = new ContextMenuItem("View item...", true);
                cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect);

                cm = new ContextMenu();
                cm.hideBuiltInItems();
                cm.customItems = [cmi];
                cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
            }

            private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
                dataGrid.selectedIndex = lastRollOverIndex;
            }

            private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {
                var obj:Object = dataGrid.selectedItem;
                alert = Alert.show("Property A: " + obj.@propertyA + "\\n" + "Property B: " + obj.@propertyB, obj.@label, Alert.OK);
            }
        ]]>
    </mx:Script>

    <mx:XML id="itemsXML">
        <items>
            <item label="Item 1" data="i001" propertyA="Item 1.A" propertyB="Item 1.B" />
            <item label="Item 2" data="i002" propertyA="Item 2.A" propertyB="Item 2.B" />
            <item label="Item 3" data="i003" propertyA="Item 3.A" propertyB="Item 3.B" />
            <item label="Item 4" data="i004" propertyA="Item 4.A" propertyB="Item 4.B" />
            <item label="Item 5" data="i005" propertyA="Item 5.A" propertyB="Item 5.B" />
            <item label="Item 6" data="i006" propertyA="Item 6.A" propertyB="Item 6.B" />
            <item label="Item 7" data="i007" propertyA="Item 7.A" propertyB="Item 7.B" />
            <item label="Item 8" data="i008" propertyA="Item 8.A" propertyB="Item 8.B" />
        </items>
    </mx:XML>

    <mx:Number id="lastRollOverIndex" />

    <mx:DataGrid id="dataGrid"
            width="400"
            dataProvider="{itemsXML.item}"
             contextMenu="{cm}"
             itemRollOver="lastRollOverIndex = event.rowIndex">
        <mx:columns>
            <mx:DataGridColumn id="labelCol"
                    dataField="@label"
                    headerText="Label:" />

            <mx:DataGridColumn id="propACol"
                    dataField="@propertyA"
                    headerText="Property A:" />

            <mx:DataGridColumn id="propBCol"
                    dataField="@propertyB"
                    headerText="Property B:" />
        </mx:columns>
    </mx:DataGrid>

    <mx:Label text="{dataGrid.selectedItem.@label}" />

</mx:Application>

View source is enabled in the following example.

57 thoughts on “Using a custom context menu with the Flex DataGrid control

  1. I know this post is pretty ancient so I don’t have high hopes of actually getting an answer, but though I’d ask anyway. The example tracks which grid row the mouse is over in order to select that row when the context menu comes up. It appears the selection is working because the data displayed in the popup is for the row where the right click occurred, but … the highlighting of the selected item doesn’t happen until after the context menu is dismissed. I do the same thing in my app and have the same problem, but I could have sworn that it used to work, since it is really bad to select an action on the context menu that acts on a selection that has changed with no visible indication. I’ve even tried everything I can think of to force an update of the display, so wondering if maybe some behavior has changed in newer versions of flash player.

Comments are closed.