How to show three dotted menu for edit and delete in last column for each row

Question

How to show three dotted menu for edit and delete in last column for each row in Syncfusion Grid in angular.Edit and delete buttons dialog should show on click of three dotted menu.

Rajapandi Ravi · Accepted Answer

Hi Kumar,Greetings from Syncfusion supportYou can achieve this requirement by using Command Column and Context Menu features of the Grid. In the command column, we have rendered the button with three dot icon. The commandClick event will be triggered while clicking it.Command Column: https://ej2.syncfusion.com/angular/documentation/grid/editing/command-column-editing/#custom-command-columnCommandClick: https://ej2.syncfusion.com/angular/documentation/api/grid/commandClickEventArgs/We have created the ContextMenu with custom items and we programmatically shown this while clicking the command button. When you are clicking an item in the context menu, the contextMenuClick event will be triggered. In that event, you can perform your action as you want. Please refer the below code example and sample for more information.ContextMenu: https://ej2.syncfusion.com/angular/documentation/grid/context-menu/#custom-context-menu-itemscontextMenuClick: https://ej2.syncfusion.com/angular/documentation/api/grid/contextMenuClickEventArgs/ App.component.ts export class AppComponent { @ViewChild('grid') public grid: any; public data: Object[]; public editSettings: Object; public orderidrules: Object; public customeridrules: Object; public freightrules: Object; public editparams: Object; public pageSettings: Object; public commands: CommandModel[]; public contextMenuItems: any; contextMenuClick(args) { //contextMenuClick event of Grid // do your action here if(args.item.text === 'Edit') { this.grid.startEdit(); } if(args.item.text === 'Delete') { this.grid.deleteRecord() } } public ngOnInit(): void { this.data = orderDatas; this.contextMenuItems = [ { text: "Edit", target: ".e-content .e-unboundcelldiv", id: "editmenu" }, { text: "Delete", target: ".e-content .e-unboundcelldiv", id: "delete" }]; this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', allowEditOnDblClick: false }; this.commands = [{ buttonOption: { iconCss: "horizontaldot e-icons", cssClass: "e-flat" } }]; } } Index.html Sample: https://stackblitz.com/edit/angular-1y2po8?file=app.component.ts,app.component.html,index.htmlScreenshot:Regards,Rajapandi R

KKM · Answer

Hi

Rajapandi R,The sample provided by you on stackblitz was not working for me. I was unable to attach a .gif file here but on clicking on three dotted menu nothing happens.Can you please check and update!- Thanks

Rajapandi Ravi · Answer

Kirubakaran,We have checked your reported problem at our end and tried to
reproduce but it was unsuccessful. Please refer the below sample for more information.Sample: https://stackblitz.com/edit/angular-1y2po8-bvppff?file=app.component.ts,app.component.html,index.htmlNote: To open the three dotted menu you have to right click
on it.If you still face the issue, please try to reproduce the
issue with our above attached sample and share the video demonstration that
will be helpful for us to validate the exact issue scenario.

KKM · Answer

Hi,Thanks for your response!My bad! I was not aware of its right-click functionality. I'd like to implement this code for my use case, So could you give me a sample with below functionalityNeed to trigger the menu on left-click?On Edit click - I need to navigate to different routeOn Delete click - I need to call a public method after a confirmation dialogThanks,

Rajapandi Ravi · Answer

Kirubakaran,We understand that you like to open the contextMenu by using
left click, based on your requirement we have prepared a sample and we can
achieve your requirement by using the created and context menu’s beforeOpen
event of Grid. Please refer the below code example and sample for more
information.

contextMenuClick(args)
  { //contextMenuClick event of Grid
         
  if(args.item.text === 'Edit') {
             
  this.grid.selectRow(+this.globevent.target.closest('tr').getAttribute('data-rowindex'));
             
  this.grid.startEdit();
          }
         
  if(args.item.text === 'Delete') {
             
  this.grid.selectRow(+this.globevent.target.closest('tr').getAttribute('data-rowindex'))
             
  this.grid.deleteRecord()
          }
      }
   
      actionBegin(args) { //actionbegin
  event of Grid
          if(args.requestType
  === 'beginEdit') {
             
  //when you click Edit on context items it will
  trigger here
            
  // you can perform your action here
          }
         
  if(args.requestType === 'delete') {
             
  //when you click ok on delete confirmation dialog it will trigger here
            
  // you can perform your action here
          }
      }
   
      dataBound() { //dataBound
  event of Grid
         
  this.grid.contextMenuModule.contextMenu.addEventListener("beforeOpen",
  (args) => {
             
  if (args.event && args.event.which === 3)
                 
  args.cancel = true;
          }
          );
          this.grid.contextMenuModule.contextMenu.beforeOpen = (args)
  => {
             
  args.event =
  this.globevent;
             
  this.grid.contextMenuModule.contextMenuBeforeOpen(args);
          };
   
          for (var i = 0;
  i < document.getElementsByClassName('e-unboundcelldiv').length; i++) {
             
  document.getElementsByClassName('e-unboundcelldiv')[i].addEventListener('click',
  function (event) {
                 
  this.globevent = event;
          
         this.grid.contextMenuModule.contextMenu.open((event as
  any).pageY + pageYOffset, (event as any).pageX + pageXOffset);

}.bind(this))
          }
      }

Sample: https://stackblitz.com/edit/angular-1y2po8-8xf4xv?file=app.component.ts,app.component.html,index.htmlRegards,Rajapandi R