4 Replies Latest reply on Jun 12, 2011 8:38 PM by dkelly60

    How do I set a context menu on datagrid item?


      I have a datagrid that I want to use a contextmenu on to remove items. I know how to add a context menu to the datagrid but this adds it to the whole grid including header and empy list area. I really only want the menu to show when you right click on an item in the list. Could someone please show me a example of how to do this?

        • 1. Re: How do I set a context menu on datagrid item?
          EvyatarBH Level 3

          Here's what I did -


          1. Assign the Context Menu and required methods to the DataGrid itself as follows -


          private var deleteRowContextMenuItem:ContextMenuItem;
          private var lastRollOverIndex:int;
          private function dataGrid_createContextMenuItems():void{
               //DataGrid menu
               var dataGridContextMenu:ContextMenu = new ContextMenu();
               //Delete Row menu item
               deleteRowContextMenuItem = new ContextMenuItem("Delete Selected Row",false,false);
               dataGrid.contextMenu = dataGridContextMenu;
          private function dataGridContextMenu_menuSelect(event:ContextMenuEvent):void{
               //Set the selected row and enable its deletion when using right-click
               dataGrid.selectedIndex = lastRollOverIndex;
               deleteRowContextMenuItem.enabled = true;
          private function deleteSelectedRow(event:ContextMenuEvent):void{
               Alert.show("Delete selected row ("+dataGrid.selectedItem.name+")?", 
               "Verification (cannot undo this operation)", Alert.YES|Alert.NO, null, actuallyDeleteSelectedRow);
          private function actuallyDeleteSelectedRow(event:CloseEvent):void{
               if(event.detail == Alert.YES){
               //// (Code for deleting the selected row from the DataGrid dataProvider) ////
                    dataGrid.selectedIndex = -1;
                    deleteRowContextMenuItem.enabled = false;


          2. Have the following event listener on the (mx) DataGrid definition -

          itemRollOver="{lastRollOverIndex = event.rowIndex}"


          That's pretty much it!

          (Anyway, that's the solution I did for this issue...)


          • 2. Re: How do I set a context menu on datagrid item?
            harihisu Level 2

            You could try putting the context menu on itemRenderer component, because each item is rendered by ItemRenderer, not the DataGrid itself.

            • 3. Re: How do I set a context menu on datagrid item?
              EvyatarBH Level 3

              In my opinion, from memory perspective, it would be better to assign the context menu to the DataGrid itself and maybe add target validation on the event handler, something like this -


              //Untested example code
              if (event.target is DataGridItemRenderer){
                   menuContextItem.enabled = true;


              Assigning the context menu to lower level elements (like item-renderers) would probably create new object instances of context-menu and context-menu-item for each element...


              I don't think it's worth it, but again, that's only my opinion.

              • 4. Re: How do I set a context menu on datagrid item?
                dkelly60 Level 1

                Thanks I think this will achieve what I need.