ListGroup Callback - Possible?

Dash Python
6

this works for me

import json

import dash_bootstrap_components as dbc
from dash import html, Output, Input, State, ALL, callback_context

from app import app


data_selector = html.Div(
    [
        dbc.Label("Data Selector", html_for="input-data-selector"),
        dbc.ListGroup([
            dbc.ListGroupItem(name, active=False, action=True, id={"type": "list-group-item", "index": i})
            for i, name in enumerate([
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4"
            ])],
        )
    ],
    id="input-data-selector",
    className="mb-3",
)

view_selector = html.Div([

])

@app.callback(
    Output({'type': 'list-group-item', 'index': ALL}, 'active'),
    Input({'type': 'list-group-item', 'index': ALL}, 'n_clicks'),  # from dash import ALL  # in v2
    State("input-data-selector", "children"),
    prevent_initial_call=True
)
def update(n_clicks_list, children):
    clicked_id = callback_context.triggered[0]["prop_id"]
    clicked_id = json.loads(clicked_id.split(".")[0])["index"]
    return [clicked_id == i for i in range(len(n_clicks_list))]
1 Like