+ Start a Discussion
Raghavendra ARaghavendra A 

How to create a lightning button menu for Edit and Delete

Hi,

i have ave been trying to add a code in the lightning component where for each record I would like to display Edit and Delete actions just like the standard lightning Related UI. How do we achieve this? When I tried to add the button menu component, and when I click down arrow, nothing happens. Is there anything that am missing?

Any help is highly appreciated! 

thanks,
raghu 
Suraj TripathiSuraj Tripathi
Hi Raghavendra,

Please try the following example of button menu in lightning where you can perform edit and delete both operation. Hope this helps you.

//Markup
<lightning:buttonMenu title="Show 2 more actions" iconName="utility:down" class="downbtnwiddate"
                                                              iconSize="x-small" alternativeText="Settings" 
                                                              onselect="{! c.handleMenuSelect }"> 
 <lightning:menuItem class="moreoptionmenu" label="Edit" value="{!entry.Ids+'_EDIT'}" 
      accesskey='1'/>
 <lightning:menuItem class="moreoptionmenu" label="Delete" value="{!entry.Ids+'_DELETE'}" 
      accesskey='2'/>
                                            
</lightning:buttonMenu>

//Controller
handleMenuSelect: function(c, e, h) {
  console.log('handleMenuSelect function called');
     var menuValue = e.detail.menuItem.get("v.accesskey");
  console.log('menuValue ====>> '+menuValue);
     switch(menuValue) {
         case "1": h.doEdit(c, e, h); break;
         case "2": h.doDelete(c, e, h); break;
     }
 },

//Helper 
doEdit: function(c, e, h) {
  var selectedMenuItemValue = e.getParam("value");
  var editRecordEvent = $A.get("e.force:editRecord");
     editRecordEvent.setParams({
          "recordId": selectedMenuItemValue.replace('_EDIT', '')
          });
          editRecordEvent.fire();
          },
    
doDelete: function(c, e, h) {
  var selectedMenuItemValue = e.getParam("value");
   var idtask = selectedMenuItemValue.replace('_DELETE', '');
   var action = c.get("c.deleteTaskById");
         action.setParams({
         "taskid":idtask,
         "recordId" : c.get("v.recordId")
         });
         action.setCallback(this, function(r) {
          if(r.getState()==='SUCCESS'){
           h.doInit(c,e,h);
          }else{
           //console.log(r.getError());
          }
         });
         $A.enqueueAction(action);
  },

Regards,
Suraj