Hi,
Unable to make the dataTree expand/collapse through a click of a button. Below is the code example.
- Options property gets updated based on the button click, but it does not reflect in the UI.
- But on page reload, it works as expected.
Need help in making Expand/Collapse all rows through button click, but not on whole page refresh.
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_tabulator
from dash.dependencies import Input, Output
import dash_html_components as html
external_scripts = [‘https://oss.sheetjs.com/sheetjs/xlsx.full.min.js’]
app = dash.Dash(
name,
external_stylesheets=[
dbc.themes.BOOTSTRAP,
“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”,
],
external_scripts=external_scripts,
suppress_callback_exceptions=True,
meta_tags=[
{“name”: “viewport”, “content”: “width=device-width, initial-scale=1.0”}
],
)
options = {“selectable”:1, “dataTree”: True, “dataTreeElementColumn” : “name”, “dataTreeChildIndent”:“12”, “height” : “400px”}
downloadButtonType = {“css”: “btn btn-primary”, “text”:“Export to Excel”, “type”:“xlsx”, “downloadRowRange”: “all”}
columns = [
{"title":"ID", "field":"id"},
{"title": "Name", "field": "name"},
{"title":"Age", "field":"age"}
]
data = [
{"id":1, "name":"Billy Bob", "age":"12", "_children":[
{"id":2, "name":"Mary May", "age":"1"},
{"id":3, "name":"Christine Lobowski", "age":"42"},
{"id":4, "name":"Brendon Philips", "age":"125", "_children":[
{"id":5, "name":"Margret Marmajuke", "age":"16"},
{"id":6, "name":"Frank Peoney", "age":"12", "_children":[
{"id": 11, "name": "Joseph Marx", "age": "20"}
]},
]},
]},
{"id":7, "name":"Jenny Jane", "age":"1"},
{"id":8, "name":"Martha Tiddly", "age":"42", "_children":[
{"id":9, "name":"Frasier Franks", "age":"125"},
]},
{"id":10, "name":"Bobby Green", "age":"11"},
];
@app.callback([Output(‘tabulator’, ‘columns’),
Output(‘tabulator’, ‘data’),
Output(‘tabulator’, ‘options’)],
[Input(‘expand’, ‘n_clicks’),
Input(‘collapse’, ‘n_clicks’),
Input(‘interval-component-iu’, ‘n_intervals’)])
def initialize(expbtn, clpsebtn, interval):
changed_id = [p[‘prop_id’] for p in dash.callback_context.triggered][0]
print ("Change id: " + str(changed_id))
if ‘expand’ in changed_id:
options[‘dataTreeStartExpanded’] = True
elif ‘collapse’ in changed_id:
options[‘dataTreeStartExpanded’] = False
return columns, data, options
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.Div([
dbc.Button(“Expand All”, color=“primary”, className=“mr-1”, id=“expand”, n_clicks=0),
dbc.Button(“Collapse All”, color=“secondary”, className=“mr-1”, id=“collapse”, n_clicks=0),
]),
dash_tabulator.DashTabulator(
id=‘tabulator’,
theme=‘tabulator_simple’,
data=data,
columns=columns,
options=options,
downloadButtonType=downloadButtonType)
])
]
),
dcc.Interval(
id=‘interval-component-iu’,
interval=1*1000, # in milliseconds
n_intervals=0,
max_intervals=0
)
],
fluid=True
)
if name == “main”:
app.run_server(debug=True, dev_tools_ui=False)