Adding a 'select-all' option in multi-select dropdown

Dash Python
1

I am pretty new to dash and been struggling with a seemingly simple issue of adding a ‘Select All option’ to my dropdown.
Here is my code and would really appreciate if someone can help me out here . Thank you in advance

app = dash.Dash(__name__)

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

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

all = df.Pillar.unique()

all_1 = df['PRO Manager'].unique()

app.layout=html.Div([
    html.H1("PRO Project Management dashboard"),
    
    html.Div([
        html.Div([
        html.P('Pillar'),
        dcc.Dropdown(id='pillar-choice', options=[{'label':x, 'value':x} for x in all] + [{'label': 'Select All', 'value': all}], value= all, multi=True),
    ],className='six columns'), 
     
 @app.callback(
 Output(component_id='graph1', component_property='figure'),
 Input(component_id='pillar-choice', component_property='value'),
)
def update_graph1(value_pillar):
if value_pillar == 'Select All':
    dff = df
else:
    dff = df[df.Pillar.isin(value_pillar)]
    fig = px.pie(data_frame=dff, names='Pillar', values='Project No', title='Number of Projects by Pillars')
    return fig
2

Hi @sheryna92 and welcome to the Dash Community

There are different ways to do that but this one works for me:
Build the options outside the dcc.Dropdown and add the additional option all using append like this:

options=[{'label':x , 'value':x} for x in all]
options.append({'label': 'Select All', 'value': "all"})

print(options)
app.layout=html.Div([
    html.H1("PRO Project Management dashboard"),
    
    html.Div([
        html.Div([
            html.P('Pillar'),
            dcc.Dropdown(id='pillar-choice', 
                         options=options, 
                         value= "for", multi=True),
        ],className='six columns'), 
    ])
])
3

Hi @Eduardo ,

Thank you for responding.

I tried your method and I am getting the following error.

TypeError: only list-like objects are allowed to be passed to isin(), you passed a [str]

4

Hey @sheryna92

You asked about how to add a “select-all” option in dropdown, this is an example of the method applied in my post:

import pandas as pd

data = [[5, 10,56], [26, 15, 23], [18, 8, 14]]

# DataFrame
all = pd.DataFrame(data, columns = ['First', 'Second', 'Third'])

# build the options from DataFrame:
options=[{'label':x, 'value':x} for x in all]
# result
print("Options build: ", options)
Out>    Options build:  [{'label': 'First', 'value': 'First'}, {'label': 'Second', 'value': 'Second'}, {'label': 'Third', 'value': 'Third'}]

#add a new item
options.append({'label': 'Select All', 'value': 'all'})
# new result
print("New Options build: ",options)
Out>   New Options build:  [{'label': 'First', 'value': 'First'}, {'label': 'Second', 'value': 'Second'}, {'label': 'Third', 'value': 'Third'}, {'label': 'Select All', 'value': 'all'}]

As you can see, the append method adds a new element of the dictionary with the desired option introduced.

Thats means your dropdown should be showing the added option to the user. If that happens I solved your first issue :grinning:

The error you are facing now, is related with the way the figure is builded, I do not have your dataframe and can’t do any detail analysis but let me say two things:

  • Take in mind that if you useed my sugestion the value property in value_pillar is all and not Select All.
  • The error message says that the information required for isin() must be a list object and you are passing a string value, review the following row:
dff = df[df.Pillar.isin(value_pillar)]

Perhaps you need to use:

dff = df[df.Pillar.isin([value_pillar])]
5

I think the first problem is definitely solved. I do see the ‘Select All’ option in the dropdown and with the following code I do not get any errror but the graph is still blank. I can’t think what could be the issue. Any thoughts ? :slight_smile:

app = dash.Dash(__name__)

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

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

all = df.Pillar.unique()

options=[{'label':x , 'value':x} for x in all]
options.append({'label': 'Select All', 'value': "all"})

app.layout=html.Div([
html.H1("PRO Project Management dashboard"),

    html.Div([
    html.P('Pillar'),
    dcc.Dropdown(id='pillar-choice', options=options, value= 'for', multi=True),
]),
    
   
html.Div([
        dcc.Graph(id='graph1', style={'display':'inline-block', 'width' :'33%'})
    
 ]),

])

@app.callback(
Output(component_id='graph1', component_property='figure'),
Input(component_id='pillar-choice', component_property='value') 
)

def update_graph1(value_pillar):
if value_pillar == 'options':
    dff = df
else:
    dff = df[df.Pillar.isin([value_pillar])]
    fig = px.pie(data_frame=dff, names='Pillar', values='Project No', title='Number of Projects by Pillars')
    return fig


if __name__=='__main__':
app.run_server()
6

Could you provide a sample df with some data you are using (columns names and some rows data) :thinking: