[SalesForce] How to handle lightning:buttonMenu onselect event to identify edit or delete

I need to implement Edit and Delete option in custom component like this below

enter image description here

Component

<lightning:buttonMenu alternativeText="More options" onselect="{!c.lineAction }" iconSize="small" aura:id="editDelete">
  <lightning:menuItem label="Edit" value="1"  />
  <lightning:menuItem label="Delete" value="2" /> 
</lightning:buttonMenu>

Controller script

lineAction:function(component, event, helper){

  // Here I need to identify whether edit or delete selected and its corresponding values

}

Best Answer

Update (API Change)

In order to determine which menu item was used, check the event's "id" and "value" parameters to determine which meny item was used:

({
  handleSelect: function(component, event, helper) {
    switch(event.getParam('value')) {
      case "1": helper.doEdit(); break;
      case "2": helper.doDelete(); break;
    }
  }
})

The previous method has been deprecated and may eventually cease to work.

Original Answer

See lightning:menuItem for details, but basically, you can check event.detail.menuItem to determine which menu item was selected.

({
    handleSelect: function(component, event, helper) {
        var menuValue = event.detail.menuItem.get("v.value");
        switch(menuValue) {
            case "1": helper.doEdit(); break;
            case "2": helper.doDelete(); break;
        }
    }
})
Related Topic