Check all elements of dcc.Checklist()

Dash Python
1

Hello,

I’m wondering if there is a way to check/un-check all the elements of a dcc.Checklist() in a callback?

Thank’s :slight_smile:

2

Sure! Here is a recipe to get you started:

all_or_non
all_or_non880×212 35.5 KB

# -*- coding: utf-8 -*-
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


app.layout = html.Div(
    [
        dcc.Checklist(
            id="all-or-none",
            options=[{"label": "Select All", "value": "All"}],
            value=[],
            labelStyle={"display": "inline-block"},
        ),
        dcc.Checklist(
            id="my-checklist",
            options=[
                {"label": "New York City", "value": "NYC"},
                {"label": "Montréal", "value": "MTL"},
                {"label": "San Francisco", "value": "SF"},
            ],
            value=[],
            labelStyle={"display": "inline-block"},
        ),
    ]
)


@app.callback(
    Output("my-checklist", "value"),
    [Input("all-or-none", "value")],
    [State("my-checklist", "options")],
)
def select_all_none(all_selected, options):
    all_or_none = []
    all_or_none = [option["value"] for option in options if all_selected]
    return all_or_none


if __name__ == "__main__":
    app.run_server(debug=True)
5 Likes
3

Thank you :grinning:

4

The only downside to this solution is that when the user selects or deselects the individual check boxes, it doesn’t update the “Select All” option, and this can be a little confusing. (This is because of circular dependencies.)

5

Yes, it could be confusing, actually I’ll use a kind of unique button for toggling the checkboxes.

20200611_000412
20200611_0004121080×769 77.9 KB

Something like that could do the trick

6

Right - that looks nice!

1 Like
7

Hi there, I am pretty new to dash and wondering if it is possible to click a button(after all the checklist boxes have been selected) to generate the snapshot of the checklist as a png?

8

In case anybody wants to have a “select all” button but with dynamically generated checklist options might find this solution helpful.
In my case, I only want the years in the checklist base on where there is data for previously selected attributes and categories.

dbc.Col(
[dcc.Checklist(
id='slct_all_year', style={ 'display': "block", 'padding': 5
                                                },
                                              options=[{'label': 'select all', 'value': 1}],
                                              ),

                                html.Div(id='slct_year_container', children=[]),],

                                width=2), 
                 ),
]),

@app.callback(
    Output(component_id='slct_year_container', component_property='children'),
    [Input(component_id='slct_att', component_property='value'),
     Input(component_id='slct_cat', component_property='value'),
     Input(component_id= 'slct_all_year', component_property='value')],
)
def options_year(att_chosen, cat_chosen, slct_all_year):
    dfZZ = []
    if type(att_chosen) == 'str':
        for i in cat_chosen:
            dfZ = df.loc[df[i] == att_chosen, 'year']

    elif type(att_chosen) == list:
        for column in df[cat_chosen]:
            dfZ = df.loc[df[column].isin(att_chosen), 'year']
            for x in dfZ:
                dfZZ.append(x)

    year_list = dfZZ  
    year_list = sorted(list(set(yearList)))

    if slct_all_year:
        return dcc.Checklist(id='slct_year',style={ 'display': "block", 'padding': 5},
                            options=[{'label': k, 'value': k} for k in year_list], value=[k for k in year_list])
    else:
        return dcc.Checklist(id='slct_year', style={'display': "block", 'padding': 5},
                             options=[{'label': k, 'value': k} for k in year_list],)
9

Here is an update based on the original post - the issue with circular dependencies was solved in Dash 1.18.0

See the last example on this page Advanced Callbacks | Dash for Python Documentation | Plotly

It shows a select all button updating checkboxes.

1 Like
11

can you please share your code of how you get this unique looking check/uncheck all button?