Tabulator: How to create a custom context menu on right clicking on cell?

[vinayrevanna]

Hi Oli,

I love tabulator plugin. It has made my work a lot easier.
I trying to create a custom context menu on editable table such that I'm able to access the cell value into some function for backend on right click.
But there is no right click event mentioned in the documentation So hoping u have any other way to achieve this.

Thanks,
Vinay

[olifolkerd]

Hey @vinayrevanna

You will want the cellContext callback if you want to track a right click on a cell, headerContext for a right click on a column header, rowContext for a right click on a row

I hope that helps,

Cheers

Oli :)

[vinayrevanna]

Hi Oli,

Thanks for a quick reply. I'm able to use cellContext for track right click.
But some how my editor function is also getting called and then cell context function is called.(added console logs to verify this).
I wanted to know how to avoid editor function call upon right click.

Thanks,
Vinay

[vinayrevanna]

Hi Oli,

Thanks for helping out. Could you please suggest how to avoid editor event function getting called for the right mouse click.

Regards,
Vinay

[olifolkerd]

Hey @vinayrevanna

you should be able to call the stopImmediatePropagation function on the event passed into the contextClick calback to prevent it from propagating to the edit handler.

I hope that helps,

Cheers

Oli :)

[vinayrevanna]

Hi Oli,
I have used the anothr jquery plugin to create context menu. It works.
https://swisnl.github.io/jQuery-contextMenu/demo.html

Thank you for the suggestions.
I love tabulator plugin.

Regards,
Vinay

[shaunhurley]

Hi Oli,
I have used the anothr jquery plugin to create context menu. It works.
https://swisnl.github.io/jQuery-contextMenu/demo.html

Thank you for the suggestions.
I love tabulator plugin.

Regards,
Vinay

Apologies for re-opening this question - I am trying to do exactly Vinay is, using the same context menu plugin.

I have enabled the rowContext handler, and can get the targeted row data, however I can't see how to link the context menu to the target row.

Vinay (or Oli), any insight would be greatly appreciated!

Thanks,

Shaun

[olifolkerd]

Hey @shaunhurley

What do you mean by you cannot "link it to the row"? as in you cannot cause it to open on right click?

Cheers

Oli :)

[shaunhurley]

Hi @olifolkerd ,

I realized you'd asked for questions to happen in Stack Overflow after I'd already answered on Vinay's thread here, so I've moved the longer explanation over there - thanks for taking the time to respond!

https://stackoverflow.com/questions/52489508/

Cheers,

Shaun

[vinayrevanna]

Hi Shaun,

I had similar problem like you.
I was not able to identify the each individual row and fetch data only of that row.
I assume you already know how to get right context menu (cellContext event handler in tabulator constructor) and you need help in getting the row data into the context menu function.

The context menu fucntion works only when it is called with unique selector every time.
So make sure you identify each row uniquley every time user right clicks.

Regards,
Vinay

[bburns]

Here's what I did to turn off cell editing on right click (calling e.stopImmediatePropagation from cellContext didn't seem to work for me for some reason) -

In the table options -

{
  rowContextMenu,
  cellContext: e => e.preventDefault(), // stop browser context menu from coming up
}

In the column definitions -

{
  editable: false,
  cellDblClick: (e, cell) => cell.edit(true),
}

So right click brings up the context menu without starting cell editing, left click doesn't do anything, and double click starts editing.

The only problem is if I right click on text in a cell the browser selects it - in Chrome on Mac, anyway.

Thanks for a great library - I love it...

[olifolkerd]

This has been fixed on the 4.8 version that is being released next weekend

On Mon, 31 Aug 2020, 19:32 Brian Burns, [e-mail] wrote:

Here's what I did to turn off cell editing on right click (calling
e.stopImmediatePropagation from cellContext didn't seem to work for me for
some reason) -

In the table options -

{
rowContextMenu,
cellContext: e => e.preventDefault(), // stop browser context menu from coming up
}

In the column definitions -

{
editable: false,
cellDblClick: (e, cell) => cell.edit(true),
}

So right click brings up the context menu without starting cell editing,
left click doesn't do anything, and double click starts editing.

The only problem is if I right click on text in a cell the browser selects
it - in Chrome on Mac, anyway.

Thanks for a great library - I love it...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/1242#issuecomment-683953085,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABUGBTHHP5XHJV7LEWK3N73SDPUCDANCNFSM4FICQDEA
.