Context Menu in Dash AG Grid

Dash Python
1

Hi All,

I have been doing some experimentation with Dash Ag-Grid and I am totally loving it. I have also taken a trial license key from Ag-Grid folk to test some features which are available exclusively for enterprise version of Ag-Grid.

Context Menus are one such feature. The context menu appears by default when you enable enterprise version of Ag-Grid. and it looks like below:

dash_aggrid_contextmenu
dash_aggrid_contextmenu727Ă—325 27.2 KB

I am wondering if anyone was able to successfully customize the context menu and handle the callbacks as well? I have tried looking into Ag-Grid Javascript documentation and tried few options, but no success so far. I am probably paralyzed here because of lack of JavaScript / React knowledge. Any help in this regard will be highly appreciated.

Thanks!

2

Hello @smalgotrader,

Welcome to the community!

What functionality have you tried so far? A lot of those things are available by default on the grid without needing callbacks.

1 Like
3

Thanks for your message!

I am building a live data streaming app for Stocks. In the background, there is a list of objects which updates the live market data for various stocks that I have subscribed through using an external api. The Ag Grid displays this list of objects. I am updating the grid at regular frequency using dcc.interval component.

One use case is an option on the context menu called Unsubscribe market data, this will call the external api to cancel the subscription for the stock on whose row context menu was opened.

The alternative way to do this is to have cell renderer component in the form of a button in a column in the grid. This will work, but I have space constraint on the screen (since this grid is just one of the many things being displayed on the page). I don’t want to have one column each for various functionalities that I am planning to add.

Thanks

4

Hi @smalgotrader
Have you tried the RowMenu component?

2 Likes
5

Hi @AnnMarieW,

Yes, RowMenu is another option, but similar to button component, it requires another column. I want the grid to be more compact and take as less space as possible, so that other stuff can fit in the screen.

I feel context menu is more intuitive than having to scroll to the right to find the column to initiate action.

Thanks for your suggestion!

6

The context menu is a nice feature and looks great too!

It’s on the list to document this and all the other AG Grid Enterprise features. I’ll prioritize making a custom context menu example and will post it here when it’s ready.

1 Like
7

Thank you so much @AnnMarieW!

8

Hello @smalgotrader,

With dash ag grid 2.2.0, you now have access to the api and columnApi.

The api allows you to add custom event listeners, now, this won’t directly trigger a callback, but you can definitely hook it into something to trigger it.

You could use the cellContextMenu event, and make sure the column matches the column you want, if so. Prevent the default and show your custom menu where they can disable or enable the updates.

To add it, do something like this:

dash_ag_grid.getApi(“id”).addEverListener(“cellContextMenu”, customContext)

Where customContext is your custom Js function.