CODEWITHSUNDEEP
pythoncssdrop-down-menuplotly-dash
Emanon
Emanon

Reputation: 25

Add "select-all" option inside a dropdown in Dash

I want to add a "select-all" option inside a multi-select dropdown. So, by default, there is the small 'x' on the right to clear all values and I want a similar option to get everything selected both when I clear all the options or when I just delete some of them (with the individual 'x' for every option on the left).

Can anyone please help on how to do it?

Upvotes: 0

Views: 2112

Answers (1)

bas
bas

Reputation: 15722

Functionality

A bare bones implementation of a "select all" functionality for a dcc.Dropdown can be implemented with a callback like this:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

options = [
    {"label": "New York City", "value": "NYC"},
    {"label": "Montreal", "value": "MTL"},
    {"label": "San Francisco", "value": "SF"},
]

app.layout = html.Div(
    id="dropdown-container",
    children=[
        dcc.Dropdown(
            id="dropdown",
            options=options,
            value=["MTL", "NYC"],
            multi=True,
        ),
        html.Button("SELECT ALL", id="select-all", n_clicks=0),
    ],
)


@app.callback(Output("dropdown", "value"), Input("select-all", "n_clicks"))
def select_all(n_clicks):
    return [option["value"] for option in options]


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

So the idea of the code above is that every time the select-all button is clicked, we take all option values and set the value property of the dropdown to the resulting list.

Styling

Now we can use some css to make it seem like the button is inside the dropdown. In the css below I will position the button to the left of the 'x':

#dropdown-container {
  position: relative;
}

#select-all {
  height: 21px;
  position: absolute;
  top: calc(50% - 10.5px);
  right: 50px;
}

The idea here is to give the container that holds the dropdown and the button position: relative. This is so we can give position: absolute to the button and the absolute positioning of the button will be relative to dropdown-container.

For the button styles I set top to 50% minus half of the button height. This is so the button is aligned in the middle vertically like the dropdown 'x' and caret.

Upvotes: 1

Related Questions