CODEWITHSUNDEEP
pythondropdownplotly-dash
Vaidehi Bhopatkar
Vaidehi Bhopatkar

Reputation: 1

How to add select all option in dash dropdown component?

I am building a dashboard in plotly dash. I am using dcc.dropdown, I have a total of 40 values to show. Now, I want to add select all options in that.

I have tried the below code but you have to select one by one option and it considers all options selected.

Can anyone please help to find out how to select all values at once?

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

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

import plotly.graph_objs as go
from dash.exceptions import PreventUpdate

xTime=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

listofY=['y1','y2','y3','y4','y5','y6','y7','y8','y9','y10']

Table={
       'y1':[20, 14, 25, 16, 18, 22, 19, 15, 12, 16, 14, 17],
       'y2':[19, 18, 22, 14, 15, 19, 15, 14, 14, 21, 16, 16],
       'y3':[11, 14, 21, 16, 16, 10, 15, 11, 10, 12, 11, 16],
       'y4':[14, 10, 27, 14, 16, 14, 15, 18, 14, 12, 12, 16],
       'y5':[16, 15, 22, 18, 18, 19, 15, 13, 15, 12, 18, 17],
       'y6':[18, 17, 25, 14, 16, 11, 13, 14, 20, 14, 12, 18],
       'y7':[11, 14, 22, 14, 13, 19, 15, 17, 14, 12, 17, 19],
       'y8':[13, 14, 20, 14, 16, 17, 15, 14, 10, 13, 14, 20],
       'y9':[15, 15, 22, 15, 11, 13, 15, 14, 11, 14, 12, 22],
       'y10':[10, 11, 22, 14, 16, 21, 15, 14, 10, 12, 11, 16]
       }

app = dash.Dash()

app.layout = html.Div([
    html.Div([
        dcc.Dropdown(
            id='product-choice',
            options=[{'label': i, 'value': i} for i in listofY], 
            value=['y1', 'y2', 'y5'],
            multi=True
        ),
        html.Div([
            dcc.Checklist(
                id='select-all',
                options=[{'label': 'Select All', 'value': 1}], 
                values=[]
            )
        ], id='checklist-container')
    ]),
    
    html.Div(children=[
        dcc.Graph(
            id='bar-graph-by-model'
        ),
    ]),                
])

@app.callback(
    Output('product-choice', 'value'),
    [Input('select-all', 'values')],
    [State('product-choice', 'options')])
def test(selectALL, options):
    if len(selectALL) > 0:
        return [i['value'] for i in options]
    else:
        raise PreventUpdate()

@app.callback(
    Output('checklist-container', 'children'),
    [Input('product-choice', 'value')],
    [State('product-choice', 'options'),
     State('select-all', 'values')])
def tester(chosenValues, availableChoices, selectALL):
    
    if len(chosenValues) < len(availableChoices) and len(selectALL) == 0:
        raise PreventUpdate()

    elif len(chosenValues) < len(availableChoices) and len(selectALL) == 1:
        return  dcc.Checklist(id='select-all',
                    options=[{'label': 'Select All', 'value': 1}], values=[])

    elif len(chosenValues) == len(availableChoices) and len(selectALL) == 1:
        raise PreventUpdate()

    return  dcc.Checklist(id='select-all',
                    options=[{'label': 'Select All', 'value': 1}], values=[1])  
    
        
@app.callback(
        Output('bar-graph-by-model', 'figure'),
        [Input('product-choice', 'value')]
)
def updategraph(value):
    traces=[]
    for i in value:
        x=xTime
        ytemp=Table[i]
        traces.append(go.Bar(
            x=x,
            y=ytemp,
            name=i,
        ))
    return {
        'data': traces,
        'layout': go.Layout(
            )
   }
        
if __name__ == '__main__':
   app.run_server(debug=True, port=8051)

Upvotes: 0

Views: 2625

Answers (1)

user7571491
user7571491

Reputation:

You needed to change line 41 from values=[] to value=[]. Without that, you would get error

TypeError: The `dash_core_components.Checklist` component (version 1.16.0) with the ID "select-all" received an unexpected keyword argument: `values`
Allowed arguments: className, id, inputClassName, inputStyle, labelClassName, labelStyle, loading_state, options, persisted_props, persistence, persistence_type, style, value

The code you have posted is identical to one posted by "David22" in https://community.plotly.com/t/adding-a-select-all-button-to-a-multi-select-dropdown/8849/6 in April'19.

That code already has fix I mentioned above. It also has workaround that does not work commented. Code you posted seem to have it uncommented that causes another error.

The fix is mentioned in https://github.com/plotly/dash-core-components/issues/133

An aside: I do not know whether you have taken this code from there or maybe this is a common code shared by lots of people but it would be good to have reference link in the code as comment. It's a good practice to acknowledge if you got code from somewhere.

Upvotes: 1

Related Questions