Trigger Context Menu on Button Click

Getting help Questions
,
1

Hi

I want to know if it’s possible in Handsontable to trigger the context menu programmatically by clicking on a button (⋮) rendered inside a cell, rather than relying on the default right-click behavior.

Additionally, I’d like to show custom menu items (like Edit, Delete and other custom items) when the menu is triggered this way.

Here’s a screenshot of a demo I built that simulates what I’m trying to achieve:

image
image891×333 8.56 KB

(This is just a mock UI I created to match my desired behavior.)

My questions:

  1. Is triggering the built-in Handsontable context menu this way officially supported?
  2. If not, is there a recommended workaround or any best practices to get this kind of functionality?

Thanks!

2

Hi @kenilgolakiya6

Yes, you can open the contextMenu programmatically using it’s API methods: ContextMenu - JavaScript Data Grid | Handsontable

You can also fully customized it. Here’s the guide on how to do this: Context menu - JavaScript Data Grid | Handsontable

3

Hi @adrian.szymanski,

I went through the documentation links you shared, but I’m still a bit unsure how to use the context menu API in the specific way I need.

Would it be possible for you to provide a small example (ideally in React, but plain JavaScript is also fine) that demonstrates how to:

  • Button inside a cell
  • Open the context menu from that button
  • Handle actions like Edit/Delete using the context menu?

That would really help me understand how to use the API correctly.

Thanks again for your support!

4

@kenilgolakiya6

You can use our custom renderers to create a button inside the cell: Cell renderer - React Data Grid | Handsontable Then you should just access the contextMenu plugin.

If you are using React you should access it from Handsontable’s instance: Instance methods - React Data Grid | Handsontable and call the method I mentioned on clicking the button in the cell.

For CRUD operations you can use the alter() method and attach it to your custom contextMenu options: Core methods API reference - React Data Grid | Handsontable