CODEWITHSUNDEEP
angular2-directivesprimeng-datatable
Mukil Deepthi
Mukil Deepthi

Reputation: 6452

angular primeng how to display context menu on left click

i am new to angular2/primeng.

How to show the primeng context menu on left click instead of the default right click inside a datatable?

thanks

Upvotes: 1

Views: 4454

Answers (2)

Iogui
Iogui

Reputation: 1698

Since version 6.1.4 of PrimeNG it can be done with triggerEvent property.

On the template:

<img #targetImage2 src="assets/img/vejo_trabalhos_bonitos.jpg" alt="Test image">
<p-contextMenu [target]="targetImage2" [model]="contextMenuItems" [appendTo]="'body'" triggerEvent="click"></p-contextMenu>

On the component:

contextMenuItems: MenuItem[];

constructor(private messageService: MessageService) { }

ngOnInit(): void {
  this.contextMenuItems = [
    { label: 'Edit', icon: 'pi pi-fw pi-pencil', command: event => this.displayMessage(event.item.label) },
    { label: 'Export', icon: 'pi pi-fw pi-external-link', command: event => this.displayMessage(event.item.label) },
    { label: 'Delete', icon: 'pi pi-fw pi-trash', command: event => this.displayMessage(event.item.label) }
  ];
}

displayMessage(action: string): void {
  this.messageService.add({severity: 'info', summary: `"${action}" action clicked!`});
}

But if one wants to display the context menu on both left and right mouse button events. It can be done too.

On the template:

<img #targetImage src="assets/img/vejo_trabalhos_bonitos.jpg" alt="Test image" (click)="onLeftMouseClick($event,contextMenu)">
<p-contextMenu #contextMenu [target]="targetImage" [model]="contextMenuItems" [appendTo]="'body'"></p-contextMenu>

On the component:

contextMenuItems: MenuItem[];

constructor(private messageService: MessageService) { }

ngOnInit(): void {
  this.contextMenuItems = [
    { label: 'Edit', icon: 'pi pi-fw pi-pencil', command: event => this.displayMessage(event.item.label) },
    { label: 'Export', icon: 'pi pi-fw pi-external-link', command: event => this.displayMessage(event.item.label) },
    { label: 'Delete', icon: 'pi pi-fw pi-trash', command: event => this.displayMessage(event.item.label) }
  ];
}

displayMessage(action: string): void {
  this.messageService.add({severity: 'info', summary: `"${action}" action clicked!`});
}

onLeftMouseClick(event: MouseEvent, contextMenu: ContextMenu): void {
  event.stopPropagation();
  event.preventDefault();
  contextMenu.show(event);
}

Upvotes: 3

BillF
BillF

Reputation: 864

You might want to reconsider why you would want to change the default like that. Right clicking is pretty much the universal way that people expect Context Menus to work. As Pardeep said, other than rooting around in the code, you wouldn't be able to change that.

Upvotes: 0

Related Questions