Recently got a few good questions about how to customize the right click functionality:

 

  • Is there a build in mechanism to disable and “grey out” certain menu items of the “CustomContextMenu” ?
  • Moreover: is it possible to add Icons before the menu item?
  • Is there a possibility to rename the build in menu items?
  • Moreover I’d like to provide my custom menu items at first, can I reorder this?

The answer to the first three questions is yes, and it is fairly straight forward to do so. The grid exposes a customContentMenuItems array, which is nothing but a data provider used to populate the customContextMenu (also exposed as a public property btw). So all that needs to be done is to provide a menu item that has a enabled=false flag. Same applies to the second question, all that needs to be done is to provide a icon property. Here is the code:

 

protected function flexdatagrid1_itemRightClickHandler(event:FlexDataGridEvent):void{
   grid.customContextMenuItems = [{type:'Separator'}
     ,{type:'Disabled Item',caption:'This is a disabled item',enabled:false}
     ,{type:'Item with icon',caption:'This is item with icon',icon:previous}
     ,"Custom Column Action: " + event.cell.column.headerText];}

 

 


For the built in items, there are 5 properties exposed as can be seen in the following code:

 

 

  1. copyCellMenuText
  2. copySelectedRowMenuText
  3. copyAllRowsMenuText
  4. copySelectedRowsMenuText
  5. copySelectedCellsMenuText

 

 

Finally, the fourth question unfortunately requires a little extension. You can create custom extension to FlexDataGrid and override onRightClick method.

Below is default implementation,

          

            /**
            * If enable custom right click is true, we handle it in this function.
            */        
            protected function onRightClick(event:MouseEvent):void            {
                   if(ToolTipManager.currentToolTip){
                        ToolTipManager.destroyToolTip(ToolTipManager.currentToolTip);
                        ToolTipManager.currentToolTip=null;
                   }
               //we are over a column header
                  var items:Array=[];
                  if(currentCell is IFlexDataGridCell ){
                        //contextMenu.customItems=cmis;
                        items.push({caption:this.copyCellMenuText});
                        items.push({caption:this.copySelectedRowMenuText});
                        items.push({caption:this.copyAllRowsMenuText});
                        items.push({caption:this.isRowSelectionMode?copySelectedRowsMenuText:copySelectedCellsMenuText});
                  }
                  if(currentCell)
                  {
                        var evt:FlexDataGridEvent = new FlexDataGridEvent(FlexDataGridEvent.ITEM_RIGHT_CLICK, this, currentCell.level, currentCell.column, currentCell, currentCell.rowInfo.data,event);
                        dispatchEvent(evt);
                  }

                  for each(var rightClickItem:Object in customContextMenuItems)
                  {
                        if(rightClickItem is String)
                        {
                              items.push({caption:rightClickItem});     
                        }
                        else
                        {
                              items.push(rightClickItem);
                        }                                        

                  }
                  if(items.length>0){
                        //UIUtils.addPopUp(menu,FlexGlobals.topLevelApplication as DisplayObject,false);
                        customContextMenu.labelField = "caption";
                        customContextMenu.dataProvider=items;                    

                        if(customContextMenu.visible){
                              customContextMenu.hide();
                        }
                        customContextMenu.show(event.stageX,event.stageY);
                        cellUnderRightClick=currentCell;
                  }
            }     

Finally, below is the screenshot and the code:


 

 

RightClick.mxml (3.22 kb)