Context Menu in Dash AG Grid

Dash Python
21

Hi @zhankin and welcome to the Dash community :slight_smile:

  1. I expect this is possible since you can use your own custom function in the context menu
  2. It appears that you can put a custom component (including a dcc.Dropdown) in a context menu https://www.ag-grid.com/javascript-data-grid/component-menu-item/

Plese note that the Context Menu is an AG Grid Enterprise feature and requires a license

22

Hi @AnnMarieW thanks! I was able to figure those out! Now, I am having trouble figuring out how to pass the value that I chose in the context menu – using your example I have a dropdown of countries I can select from – to the python dash side. I can pass data from python to my JS file using json.dumps but going the other way seems trickier. What should I be doing in order to pass the “country” value I select in my subcontext menu to the python dash side so I can do more with it?

window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dashAgGridFunctions.getContextMenuItemsCallback = (params) => {
    // Get selected rows
    const selectedNodes = params.api.getSelectedNodes();
    const selectedData = selectedNodes.map(node => node.data);
    
    // Create a submenu to allow tagging all rows with the same athlete's name
    var countries = JSON.parse(document.querySelector('#country-storage').innerText);

    var tagSubmenu = countries.map(country => {
        return {
            name: country,
            action: () => {
                // Get selected rows
                var selectedNodes = params.api.getSelectedNodes();
                var selectedData = selectedNodes.map(node => node.data);

                // Update the 'Country of Origin' field for selected rows
                selectedData.forEach(data => {
                    data['country_of_origin'] = country;
                });

                // Refresh the grid with updated data
                params.api.applyTransaction({ update: selectedData });

                // Update the HTML div with the selected country
                document.getElementById('selected-country-div').innerText = "Selected Country: " + country;
            },
        };
    });

    // Build the context menu
    var result = [
        {
            name: 'Add Tag',
            subMenu: tagSubmenu,
            icon: '<i class="fa-solid fa-flag" />'
        },
    ];

    return result;
};
23

Hi @zhankin

Glad it’s working for you! To pass values to the server, try set_props:

24

Hey @AnnMarieW thanks for the help. Such a cool feature! I’m playing around with the custom context menu and I was wondering if you could show me how to possibly implement a search bar function into the context menu. In your example - being able to search for a specific Olympic athlete. What do you think?

25

Hi @zhankin
I’m not sure exactly what you are looking for. Can you share a minimal example of what you have tried so far?