Clear display before a new callback

Dash Python
1

Hi,
I am working on an interface that in similar in idea to the following:

  1. The user selects a continent from a list (dash data grid with selectable rows)
  2. The previous step initializes a callback that displays countries (again with selectable rows in a data grid) from that continent
  3. Selection of one of the countries lists 5 major cities of the country
  4. Selection of the country gives out its population

When the user selects Europe ==> Germany ==> Munich, the end result is 1.472 million.

Now when the user goes back to the first table and click on Asia, the second table changes to countries in Asia but the table with cities and the population is still from the last iteration (meaning there is still a table of German cities and population of Munich).

How can I make sure that selection from a previous table clears out all subsequent divisions before moving forward?

2

Hello @subodhpokhrel7 !

Is there any specific reason you use Dash Data Grid for selecting? Something like dcc or dbc Dropdown or dmc Select would be much more suitable for this task. You can then dynamically display this components.

  1. When Continent callback is triggered it creates Countries component, Cities component don’t exist
  2. When Countries callback is triggered it creates Cities components
  3. When Cities callback is triggrred it display population
3

Hi @martin2097 ,
I used the example of countries to simplify what I am doing. I cannot use a dropdown menu as a selectable row in the Dash Data Grid contains more information than just the continent (or country) name. And the user also needs to be able to see what they selected + the options they had at the end when they save the webpage.
Is there no feasible way to do it whilst working with Data Grids?

4

Well you can always to the same I explained for dropdowns just with the tables :slight_smile: If I understood you correctly you just need to target containers and send the whole tables in the output and errase the containers that should be empty.

5

While not directly related to the use of a grid, I remembered a answer I gave in this thread:

6

Maybe you could provide a code example which we could use?

1 Like
7

@AIMPED I reformulated the question with the code here

8

solved here

9

Maybe you would like to check LoadingOverlay (maybe dbc has something similiar)

You just put your component inside and user will see Loading icon whenever the component is updating. You do not have to call any redundant callback.

2 Likes
10

Clearing out the previous result works best for me. However, I’m also using dcc.Loading

1 Like