tldr; I have been trying to use a custom dash component, and cannot get the callback function to trigger when a checkbox is clicked in the custom component. The callback gets triggered once at the start and then never again. Any thoughts on possible causes would be greatly appreciated!
I have been trying to use this dash component for a webapp:
I want a callback function to trigger any time a checkbox is selected or unselected. I wrote some code to test the input to the callback function, but it does not work. The callback function seems to trigger once on startup, and never again.
I have posted an issue here: Clicking items does not trigger callback function, cannot retrieve selected items in python · Issue #28 · westonkjones/dash-dropdown-tree-select · GitHub
This is the code I ran, with shortened data.
#!/usr/bin/env python
# coding: utf-8
# In[1]:
import dash_dropdown_tree_select
import dash
from dash.dependencies import Input, Output
from dash import html
# In[2]:
app = dash.Dash(__name__)
# In[3]:
data = [
{
"label": "VP Accounting",
"tagClassName": "special",
"children": [
{
"label": "iWay",
"children": [
{
"label": "Universidad de Especialidades del Espíritu Santo"
},
{
"label": "Marmara University"
},
{
"label": "Baghdad College of Pharmacy"
}
]
},
{
"label": "KDB",
"children": [
{
"label": "Latvian University of Agriculture"
},
{
"label": "Dublin Institute of Technology"
}
]
},
{
"label": "Justice",
"children": [
{
"label": "Baylor University"
},
{
"label": "Massachusetts College of Art"
},
{
"label": "Universidad Técnica Latinoamericana"
},
{
"label": "Saint Louis College"
},
{
"label": "Scott Christian University"
}
]
},
{
"label": "Utilization Review",
"children": [
{
"label": "University of Minnesota - Twin Cities Campus"
},
{
"label": "Moldova State Agricultural University"
},
{
"label": "Andrews University"
},
{
"label": "Usmanu Danfodiyo University Sokoto"
}
]
},
{
"label": "Norton Utilities",
"children": [
{
"label": "Universidad Autónoma del Caribe"
},
{
"label": "National University of Uzbekistan"
},
{
"label": "Ladoke Akintola University of Technology"
},
{
"label": "Kohat University of Science and Technology (KUST)"
},
{
"label": "Hvanneyri Agricultural University"
}
]
}
]
},
{
"label": "Database Administrator III",
"children": [
{
"label": "TFS",
"children": [
{
"label": "University of Jazeera"
},
{
"label": "Technical University of Crete"
},
{
"label":
"Ecole Nationale Supérieure d'Agronomie et des Industries Alimentaires"
},
{
"label": "Ho Chi Minh City University of Natural Sciences"
}
]
},
{
"label": "Overhaul",
"children": [
{
"label": "Technological University (Taunggyi)"
},
{
"label": "Universidad de Las Palmas de Gran Canaria"
},
{
"label": "Olympia College"
},
{
"label": "Franklin and Marshall College"
},
{
"label":
"State University of New York College of Environmental Science and Forestry"
}
]
},
{
"label": "GTK",
"children": [
{
"label": "Salisbury State University"
},
{
"label":
"Evangelische Fachhochschule für Religionspädagogik, und Gemeindediakonie Moritzburg"
},
{
"label": "Kilimanjaro Christian Medical College"
}
]
},
{
"label": "SRP",
"children": [
{
"label": "Toyo Gakuen University"
},
{
"label": "Riyadh College of Dentistry and Pharmacy"
},
{
"label": "Aichi Gakusen University"
}
]
}
]
},
{
"label": "Assistant Manager",
"children": [
{
"label": "Risk Analysis",
"children": [
{
"label": "Seijo University"
},
{
"label": "University of Economics Varna"
},
{
"label": "College of Technology at Riyadh"
}
]
},
{
"label": "UV Mapping",
"children": [
{
"label": "Universidad de La Sabana"
},
{
"label": "Pamukkale University"
}
]
}
]
}
]
# In[4]:
app.layout = html.Div([
dash_dropdown_tree_select.DashDropdownTreeSelect(
id = "dropdown",
data=data,
),
html.H1(id = "txt", children = "0")
])
# In[5]:
@app.callback(
Output('txt', 'children'),
[Input('dropdown', 'onChange'),
Input('txt','children')
]
)
def updated_checkbox(sel, count):
counter = int(count)
counter +=1
ret = str(counter)
return ret
# In[ ]:
if __name__ == '__main__':
app.run_server(debug=False)
Instead of onChange, I have also tried onNodeToggle and onAction as inputs to the callback function. The expected behavior of this code is to increment the counter every time a node is checked or unchecked. The end goal is to obtain a list of all checked nodes every time a node is checked or unchecked.