Checklist retain the previous values in chained callbacks

Dash Python
1

Hello Dash Community,

I am struggling with one small issue on chained callbacks. My dashboard allows users to check columns to display based on selecting Excel/CSV files from the Dropdown. However, upon selecting different files from Dropdown, the checklist value won’t be reset and it still contains the values from the previous selection. How can we empty the checklist every time when selecting from Dropdown?

import dash
import pandas as pd
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
from dash.exceptions import PreventUpdate
from dash.dependencies import Input, Output, State
from os import listdir
from os.path import isfile, join


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

# path
my_path = "D:/LIUZHICHENG/Udemy/Dash/"

# only get csv and xlsx files
only_files = [f for f in listdir(my_path) if
              (isfile(join(my_path, f)) and f.split(sep=".")[-1] in ["csv", "xlsx"])]

# filenames
file_names_options = [{"label": item, "value": item} for item in only_files]

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

app.layout = html.Div(children=[

    # Header
    dbc.Row(children=[
        html.H2(children=["This is my title"],
                style={"text-align": "center"})
    ]),

    # Dropdown for file selections
    dbc.Row(children=[

        dbc.Row(children=[dbc.Badge("Select File Name:", color="info", className="mr-1")],
                style={'font-weight': 'bold'}),
        dbc.Row(children=[dcc.Dropdown(id="filenames_dropdown",
                                       options=file_names_options,
                                       clearable=False,
                                       placeholder="Select your File...",
                                       multi=False)])],
        style={'width': '100%', 'padding': '5px 5px', 'display': 'inline-block'}),

    # Checklist
    dbc.Row(children=[

        dbc.Row(children=[
            dbc.Badge("Select Columns:", color="info", className="mr-1")],
            style={'font-weight': 'bold'}),

        dbc.Row(children=[
            dcc.Checklist(
                id="checklist",
                labelStyle={'display': 'inline-block'},
                persistence=False
            )
        ]),

    ],
        style={'width': '100%', 'padding': '5px 5px', 'display': 'inline-block'}
    ),


])


# Updating columns check list
@app.callback(
    [Output(component_id='checklist', component_property='options')],
    [Input(component_id='filenames_dropdown', component_property='value')],
    prevent_initial_call=True
)
def update_columns_checklist(filenames_dropdown):
    if filenames_dropdown.split(sep=".")[-1] == "csv":
        dff = pd.read_csv(my_path + filenames_dropdown, encoding="utf-8")
    elif filenames_dropdown.split(sep=".")[-1] == "xlsx":
        dff = pd.read_excel(my_path + filenames_dropdown,
                            engine='openpyxl')
    else:
        dff = None
        print("Error. Not CSV or Excel")

    checklist_options = [{"label": item, "value": item} for item in dff.columns.to_list()]

    return [checklist_options]


if __name__ == '__main__':
    app.run_server(debug=True, port=7775)

1
11913×514 19.8 KB

2
21914×511 22.7 KB

3
31913×454 26.3 KB

I have been stuck for 2 weeks and still looking for a solution. Any help would be much appreciated! Thank you Dash community!!!

2

Hi @liuzc123

In the callback, you can also clear the value propery of the Checklist.

Try adding this to your callback:

Output(component_id='checklist', component_property='value')

Then the return statement would be:

return checklist_options, []
1 Like
3

@AnnMarieW, Thank you so much! It works!

1 Like