Bidirectional filter on multiple dropdowns

[danielps1818]

Hello!

Asking the amazing people around here. Looking for any idea on how to do this. We have a "working" solution... Looking to improve it.

We have a table with this data. Each room is in a general area, in a section, in a subsection with an ID. What is show here is AN EXAMPLE. You could have multiple areas, multiples sections, etc.

Area	Section	Subsection	Room
Area1	Section1	Subsection1	RoomID1
Area1	Section1	Subsection1	RoomID2
Area1	Section1	Subsection2	RoomID3
Area2	Section2	Subsection3	RoomID4

Visual

What we currently have is 4 dropdowns to filter the data to show. Each one is dependent on the last one.
Hierarchy: Area > Section > Subsection > Room

Practical Example

If the area dropdown is set to "Area1", on the section dropdown it won't appear "Section2".

If you for example have filtered, "Area1", "Section1", "Subsection1" then on the Room dropdown it will appear RoomID1 and RoomID2, but if you have "Area1", "Section1", "Subsection2" it will only show RoomID3.

However, if you don't have any filter set, then on the room dropdown it should appear ALL the rooms IDs.

This means:

Each dropdown filters based on the last dropdown selection. If no value is selected then no filtering is applied.

What would be your solution?
Is easy to do it in 1 direction. If you filter one dropdown, you apply the filter on the next one (filtering based on column). But if you select a room, then you have to autocomplete the dropdowns higher on the hierarchy.

For example if you select "RoomID3" directly, it should autocomplete the other values with "Area1", "Section1", "Subsection2".

Please, feel free to correct any grammar mistakes or to ask for any clarification.

Thanks in advance for any idea that you have!

[pascal.fragnoud]

@danielps1818

But if you select a room, then you have to autocomplete the dropdowns higher on the hierarchy.

Why ?

[nminchin]

@pascal.fragnoud

Why

Not sure if you missed the example for this, but it makes sense if the user picks roomID3, that the other fields populate as roomID3 belongs to a particular area, section, and subsection which comes from tables.

Edit: Although, thinking about it, you don't want the rooms to then suddenly filter to those other filters.. Could you display the other details as a breadcrumb beside it? And not change the other dropdowns? Just thinking aloud..

[pascal.fragnoud]

As long as the table displays the data for the selected rooms, changing the parents dropdowns doesn't seem relevant to me.
It even seems kind of counter-intuitive:

You haven't selected any area and are free to select any room.
You select a room, it updates the area filter, and now you can't select other rooms that are not in that area.

Why make things more complicated ? Let people pick rooms from any area they want, and if they want only one specific area then there's a filter for that.

[Nol]

Been testing some llm tuning so this was a fun problem to task it with and it one shot it.

Attached is how I'd do it. Rundown:

• view.custom.dsRooms bind to your dataset
• view.custom.filters (object) with area, section, subsection, and room as values. Change script on each value that grabs the dataset then extract the relevant rows for the next filter and push those in. This cascades down the filters
• On your view put the four dropdowns, bind their values to their respective view.custom.filters and then bind their options to an expression structure that is pointed to the dataset and all four filters. Then a transform script that calls a library script.
• The library script is just a basic filtering routine and returns the list for the dropdown
• Added a clear button

If you want to import it:
Ex_2026-04-30.zip (7.0 KB)

[danielps1818]

@pascal.fragnoud

changing the parents dropdowns doesn't seem relevant to me

But then doesn't show what area is from. Maybe is not neccesary, but I believe that improving the UI or trying to make it more intuitve/readable is worth the work.

[pascal.fragnoud]

Your table should show that information, not the dropdowns you use to filter the data.

[Chris_Bingham]

@pascal.fragnoud

Your table should show that information

With this approach, the table component likely has all the desired column specific filtering functionality built-in.

[pascal.fragnoud]

Indeed. But dropdowns are easier to use for operators, so I still add some regularly.

[danielps1818]

I forgot to post my aproach.

In each dropdown i have a custom.dataset and a custom.filtered_dataset.
The custom.dataset is a simple reference to the above level dropdown custom.filtered_dataset property. Except for the first level, that is linked to the dataset with all data (in my case a query).
The custom.filtered_dataset has this binding:

The props.options of the dropdown is linked to the dataset value with this binding:

Each props.value dropdown has a change script like this:

if currentValue.value and origin == 'Browser':
	self.getSibling("plant").props.value = self.custom.filtered_dataset.getValueAt(0, "PLANTID")

if currentValue.value and origin == 'Browser':
	self.getSibling("plant").props.value = self.custom.filtered_dataset.getValueAt(0, "PLANTID")
	self.getSibling("section").props.value = self.custom.filtered_dataset.getValueAt(0, "SECTIONID")

Thanks to everyone that participated in the post. It was a nice small "challenge" for me to.
Feel free to comment about my code!

[danielps1818]

I had to make another change script inside custom.filtered_dataset:

if currentValue.value and currentValue.value.getRowCount() == 0:
	self.props.params.parameter = None

This simply deletes the selected option if you select an above level that doesn't returns any data.