AG Grid: How to open browser tab on cell double-click

Dash Python
1

Given a double-click on an AG Grid row, I want to take the values from the cellDoubleClicked input and construct a URL which will open in a new tab. How can I trigger a new browser tab as a callback output (if possible)?

Thanks!

2

Hello @nlyle,

You will need to use a clientside callback, which uses this: window.open(url, target='_blank')

3

Thanks – I’m now realizing that the value I want to use for url is a hidden column in my AG Grid. I don’t want to unhide it, and I think cell selection returns information about the data in the grid.

But if I were to bring in that column, what would be the callback Output?

# assume cell value being clicked is the URL
clientside_callback(
    """
    function(cell) {
        window.open(cell['value'], target='_blank')
    }
    """,
    Output('out-component', 'value'), # do I need an output?
    Input('my-grid', 'cellDoubleClicked')
)
4

You dont need to have the column unhidden to create the url, you can use the data in the cell.

As far as the output, yes, this is required for Dash. But you can return window.dash_clientside.no_update to not do anything.

5

Awesome, I’ll check this out. I see also that I could use cell renderer components to generate links in cells. I’ll explore both. Thanks!

1 Like
6

@jinnyzor I’m wondering if I can use a cell renderer component which uses the value from another column to construct an html anchor link.

For example, if I have something like this in my dashAgGridComponentFunctions.js file:

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.SimpleLink = function (props) {
    return React.createElement(
        'a',
        {
            href: 'https://some-url/' + COLUMN_VALUE + '/some-path'
        },
        props.value
    )
};

Is it possible to pass the value of another field in the grid (a hidden field, in my case) to COLUMN_VALUE in the example above?

7

Yes, this is possible.

To access data from other columns, you’d use this: props.data[otherColumn], and then remember to pass a target to the component as well. :slight_smile:

1 Like
8

Thanks, I think I’m almost there. Does otherColumn in props.data[otherColumn] refer to the desired field value in AG Grid columnDefs? I tried that and the page becomes unresponsive.

9

Yes, but otherColumn needs to be wrapped like this: "otherColumn" :slight_smile:

1 Like
10

@jinnyzor Success! Working for me now. Thank you :pray:

1 Like