Select/Clear All

Select/Clear All#

It’s a common task to organise a mechanism to select or disable all available options. So here I describe possible ways to do it.

Select#

In the following example, there is a checklist and all the boxes can be selected by pressing the “Select all” button. You should use prevent_initial_call = True for select all button callback in order to avoid all options in dashboard starting.

from jupyter_dash import JupyterDash
from dash import (
    html,
    dcc,
    callback, 
    Input, 
    Output, 
    State
)
from IPython.display import clear_output

app = JupyterDash(__name__)

app.layout = html.Div([
    html.Button(
        "Select All",
        id="select-all-button",
    ),
    dcc.Checklist(
        [
            "BelarusSales",
            "SalesNetworkBelarus",
            "BelSalesNetwork",
            "SalesNetworkBel",
            "SalesOfBelarus",
            "BelSalesNetworks",
            "BelarusSalesNetwork",
            "SalesInBelarus",
        ],
        id = "check-list",
        value = []
    )
])

@callback(
    Output("check-list", "value"),
    State("check-list", "options"),
    Input("select-all-button", "n_clicks"),
    prevent_initial_call = True
)
def select_all_button(
    options: list,
    n_clicks: int
) -> list:
    '''
        Callback that allows you to do 
        select all options in CheckList
        from pressing "select-all-button".

        Arguments
        -----------

        options : (list) list with options of Checkbox;
        n_clicks: (int) number of clicks on button.

        Returns
        -----------
        (list) list of selected options of Checklist.
    '''
    return options
        

app.run_server(debug=True, port = 8051)
clear_output()

Clear#

In the following example, I create a button that deselects all values in the checklist. It’s really similar ideas to “Select all” and even easier. You have to set prevent_initial_call = True as well.

from jupyter_dash import JupyterDash
from dash import (
    html,
    dcc,
    callback,
    Input,
    Output,
    State
)
from IPython.display import clear_output

initial_clicks = 0

app = JupyterDash(__name__)
app.layout = html.Div([
    html.Button(
        "Clear", id = "clear-button", 
        n_clicks = initial_clicks
    ),
    dcc.Checklist(
        [
            "BelarusSales",
            "SalesNetworkBelarus",
            "BelSalesNetwork",
            "SalesNetworkBel",
            "SalesOfBelarus",
            "BelSalesNetworks",
            "BelarusSalesNetwork",
            "SalesInBelarus",
        ],
        id = "check-list",
        value = []
    )
])

@callback(
    Output("check-list", "value"),
    Input("clear-button", "n_clicks"),
    prevent_initial_call = True
)
def button_click(n_clicks: int) -> list:
    '''
        The callback for clear button.

        Arguments
        -----------
        value : (list) the value of Checklist;

        Returns
        -----------

        (list) a list of options to be selected in 
               the Checklist after pressing the call button;
    '''
    return []

app.run(port=8052)
clear_output()
Contents