RadioButtons with PatternMatch Callback

Dash Python
1

Hey there, I implemented a RadioButton Group like in the example here:

import dash_bootstrap_components as dbc
from dash import Input, Output, html

button_group = html.Div(
    [
        dbc.RadioItems(
            id="radios",
            className="btn-group",
            inputClassName="btn-check",
            labelClassName="btn btn-outline-primary",
            labelCheckedClassName="active",
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
                {"label": "Option 3", "value": 3},
            ],
            value=1,
        ),
        html.Div(id="output"),
    ],
    className="radio-group",
)


@app.callback(Output("output", "children"), [Input("radios", "value")])
def display_value(value):
    return f"Selected value: {value}"

What i now want or try to do is to Match a callback by the number of chosen value of the radio group. So if button 1 is chosen a content also with number 1 in its id should be filled. Is there any possibility to do such a thing?

Best regards

2

Hi,

To my knowledge, the way to approach this is to add all components with content you want to change in the same parent and update the entire parent component (by changing only the specific child). A dummy example would be:

container = html.Div(
    id="parent",
    children=[html.Div(id=f"child-{i}") for i in range(4)]
)
@app.callback(
    Output("parent", "children"), 
    Input("radios", "value"),
    State("parent", "children")
)
def display_value(value, children):
     return [ child for child in children if child["props"]["id"] != f"child-{value}" else html.Div(id=f"child-{value}", children=value) ]
3

Yes. i was trying to avoid this due tu reduce traffic between callbacks. My solution therefore for now was to return all children but with dash.no_upate except the one which should be updated. (Has this a effect? Honestly i dont know. Is there send no content if i return dash._no_update?) I thought maybe there would be a better solution than this.

4

I would expect dash.no_update not to work on this case, as there is just a single component being returned (I might be wrong)… On the other hand, if you replace the parent children by something like Output({'type': 'child', 'index': ALL}, 'children'), then you would be returning multiple components in the output and no_update might work.

I think it is worth testing…

1 Like
5

i think it worked like this

1 Like