Dash Ag Grid does not trigger event upon Java script cell renderer

Dash Python
1

Hi team,
I have a grid of data using dash ag gird. I created the below custom cell renderer in java script and registered it properly and it is working. Though when I select from the drop down list, the selected value does not trigger any event.

Would you please give me some hints what need to change?

dagcomponentfuncs.fieldCellRenderer = function(params) {
    const value = params.value;
    var dropdown_options = []
    if (params.data.UserInput){
        dropdown_options = params.colDef.cellEditorParams.values
    }
    const selectOptions = dropdown_options.map(option => 
        React.createElement('option', { key: option, value: option }, option));

    const cellStyle = {
        display: 'flex',
        alignItems: 'center'
    }

    const spanStyle = {
        marginRight: '10px',
        fontSize: 'inherit'
    }

    const selectStyle = {
        padding: '5px',
        fontSize: '70px', 
        width: '20%'
    }

    const spanElement = React.createElement('span', {style: spanStyle}, value);
    const selectElement = React.createElement('select', {style: selectStyle}, selectOptions);

    if (dropdown_options.length === 0){
        return spanElement;
    }
    else{
        return React.createElement('div', {style: cellStyle}, spanElement, selectElement);
    }

}
2

Hello @231530353,

You need to setup an onchange event listener in the component to write back to the data on the grid.

1 Like