Edit multiple div parameters through single callback

Dash Python
1

Is there a way to edit multiple div parameters within a single callback? I essentially have a dcc.Dropdown component, and I want to edit its options and value based on the rows in another dt.DataTable.

Is there any way to do this other than doing the following:

@app.callback(Output('dropdown', 'options'), [Input('datatable', 'rows')])
   def update_dropdown_options(rows):
    ...

@app.callback(Output('dropdown', 'value'), [Input('datatable', 'rows')])
def update_dropdown_value(rows):
    ...

I have to do this for multiple dropdowns as well. If there is no way to do this, can anyone suggest another approach?

2

You could replace the entire Div each time by having the output be Output('dropdown-parent', 'children'). Where ‘dropdown-parent’ is the id of the parent element. There are disadvantages to this though (other states get reset).

However directly having 1 callback have multiple Outputs is not yet supported by Dash, but I believe it’s coming soon!

3

Hmm ok. I was updating the entire div previously, but it led to some problems :frowning: Good to hear that it is coming soon, in the meantime, I’ll just do it the long way. Thanks for the reply!

4

Hi, I also have the similar problem where i want to receive data from many input box at once. Making a callback with multiple input box as input is hard to manage. Hopefully i can make a div containing all the input boxes and use the div as input to the callback.

5

How would you go about doing that? Can you access the values of elements which are children of an input div? I didn’t know that was possible. If it is, can you post a code example showing how you’d do it? Thanks!

6

No. I am still trying. Not sure if it’s possible. My current code is:
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output,Input,State
app = dash.Dash(name)
app.scripts.config.serve_locally = True
interface1 = html.Div(id=‘interface1’,
children=[dcc.Input(id = ‘box11’,value=‘box11’),
dcc.Input(value=‘box12’,id = ‘box12’)]
)
interface2 = html.Div(id=‘interface2’,
children=[dcc.Input(value=‘box21’,id = ‘box21’),
dcc.Input(value=‘box22’,id = ‘box22’)]
)

app.layout=html.Div([
interface1,
html.Br(),
interface2,
html.Button(id=‘button’,n_clicks=0)]
)

@app.callback(Output(‘interface1’,‘children’),[Input(‘button’,‘n_clicks’)],[State(‘interface2’,‘children’)])
def two_trigger_one(n_clicks,int2):
if n_clicks>0:
#to update interface1
return int2

if name == ‘main’:
app.run_server(debug=True)

The callback makes the interface1 disappear. I will update if i find the way.