Is there a way to add a button at the end of a table that, when clicked, opens a rowContextMenu below the button? Additionally, can the rowContextMenu pop up when right-clicking anywhere on the row?
I have attempted some solutions without success. Here is one example:
var menuButtonFormatter = (cell: any) => {
var menuBtn = document.createElement('button');
menuBtn.type = 'button';
menuBtn.innerHTML = '<span class="material-icons" style="color: #707070">more_horiz</span>';
menuBtn.classList.add('menu-button');
menuBtn.addEventListener('click', (event) => {
event.stopImmediatePropagation();
const myEvent: any = new Event('row-contextmenu');
myEvent.pageX = event.pageX;
myEvent.pageY = event.pageY;
cell.getRow().getElement().dispatchEvent(myEvent);
});
buttonHolder.appendChild(menuBtn);
return buttonHolder;
}
The code snippet above creates the button. However, I am struggling to make it function as desired.
This is the Button below:
Below is an example of how the column looks:
{
title: this.$t('actions'),
field: 'actions',
// formatterParams: poParams,
formatter:menuButtonFormatter,
headerSort: false,
width: 110,
frozen: true,
}
I have tried various things but none seem to be working. For instance, using
const myEvent: any = new Event('contextmenu');