A new and improved version of the Cascader component is now available on Retool Cloud and for self-hosted organizations. Retool recommends using the new component, and the legacy version will be deprecated. You can click Upgrade in the Inspector of an existing Cascader component to use the new version.
The new Cascader features:
- The ability to manually add an option list or dynamically map one to existing data.
- A new dropdown look, similar to the Select component.
- New label options (customizeable caption, color, icon).
- Options now support numeric values in addition to string values.
Some additional changes in this version include:
- The
value of the new Cascader component is the value of the selected option. A new valuePath property enables you to have access to the path of values leading to the selected option.
- Option values must be unique.
- Like other modern Retool components, values for options need to be unique. If you use the one-click upgrade for Cascaders, duplicate values will have parent values appended to make them unique.
- Like Checkbox Group and Navigation, the data source is expected to be an array of objects with a property that points to its parent. Cascader nests options by parent value.
If your legacy Cascader component uses dynamic data (like the output of a query), you need to manually transform your data to be compatible with the new component. Refer to the changelog entry for more info.
3 Likes
This is a great upgrade - one thing to add would be having a setting where we could multi-select or select parts of the tree instead being forced into selecting children.
Imagine using this field as filter to pull all sneakers / shoes or simply having this pull sneakers.
Right now you're forced into structuring data in a weird format or you have to go down the tree which you might not want to in certain scenarios leading to this component not being used frequently.
Hey!
Nice upgrade ; but I've got to say the look & feel of this new component isn't great - we're a bit disappointed on that.
- I'm wondering if an external user would understand the "deep-dive" mechanism while selecting (I didn't get it at first
)
- Very unfortunate that the user isn't allowed to select any level, or even multiselect any level in parallel!
Tho, no doubt that your rock star team will find great solutions soon 
Hi! Congrats on the new release 
I was reading these docs on what the data source should look like for the new cascader. This output for the code didn't make sense to me. I expect QA to have department: 'eng' if it's to appear under Engineering:
Anyway, my main point is that I tried testing it out in my app to see what would happen. Whenever I try adding the Parent Value set to {{ item.department}} or even {{ item?.department }} the page crashes:
@Jynnie_Tang, is this a bug or am I doing something wrong? Thank you!
Here are few screens of a component we developed and which, I guess, could help give ideas regarding a future cascader version 
:
1 Like
Yes, I experienced the same issue!
