Dash Ag Grid cellRendererSelector can not trigger cellRendererData callback

Dash Python
1

hi,@AnnMarieW:
As in the official example, I used cellRendererSelector to render a column, but changed it to a button. When I clicked the button, the cellRendererData callback could not be triggered.
How to solve this problem? Please give me some advice.

columnDefs = [
    {'field': 'value'},
    {'field': 'type'},
    {
        'headerName': 'Rendered Value',
        'field': 'value',
        'cellRendererSelector': {"function": "customCellRendererSelector(params)"}
    },
]

dagfuncs.customCellRendererSelector = (params) => {
    const dbcButton= {
        component: dagcomponentfuncs.DBC_Button,
    };
    const dmcButton= {
        component: dagcomponentfuncs.DMC_Button,
    };

    if (params.data) {
        if (params.data.type === 'gender') return dbcButton;
        else if (params.data.type === 'mood') return dmcButton;
    }
    return undefined;
};

@callback(
    Output("custom-component-btn-value-changed", "children"),
    Input("custom-component-btn-grid", "cellRendererData"),
)
def showChange(n):
    return json.dumps(n)
2

Hello @Sylvos,

Have you put this into your assets file? It needs to be registered in the proper name space. :slight_smile:

3

@jinnyzor Yes, I have added it to dashAgGridFunctions.js, and DBC_Button and DMC_Button have been added to dashAgGridComponentFunctions.js, these two files are in the assets folder

4

To trigger something to happen with a button click, you need to listen to setProps on the component t, by passing it as a function and take the n_clicks property and send data back to the grid either the api or using setData.

5

HI,@jinnyzor
DBC_Button is the official example, with setData()

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

dagcomponentfuncs.DBC_Button = function (props) {
    const {setData, data} = props;

    function onClick() {
        setData();
    }
    return React.createElement(
        window.dash_bootstrap_components.Button,
        {
            onClick,
            color: props.color,
        },
        props.value
    );
};
6

Just checking, but what version of dag are you using?

7

I have tried both version 31.0.1 and version 31.2.0

8

Is it possible to give a full MRE for this?