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

    How do I set a context menu on datagrid item?

    dkelly60

      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

          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();
               dataGridContextMenu.hideBuiltInItems();
                              
               //Delete Row menu item
               deleteRowContextMenuItem = new ContextMenuItem("Delete Selected Row",false,false);
               deleteRowContextMenuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,deleteSelectedRow,false,0,true);
               dataGridContextMenu.customItems.push(deleteRowContextMenuItem);
                              
               dataGridContextMenu.addEventListener(ContextMenuEvent.MENU_SELECT,dataGridContextMenu_menuSelect,false,0,true);
               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{
               if(dataGrid.selectedIndex>-1){
               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

            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.