Feature Request - Cascader Component

[Ben Hayat]

Hello Team;

I saw this powerful component that saves a lot of space and time for users using it to travel through cascading selects in ONE select component. Could you please consider such component?

Here is a link to what I saw.

Thank you in advance.
…Ben

https://www.antdv.com/components/cascader/

[s.molinari]

I’d say that would make for great app extension. It’d be a nice challenge for someone for our hack-a-may contest too.

https://forum.quasar-framework.org/topic/5663/quasar-community-hack-a-may

Scott

[turigeza]

Interesting idea but I would say for me a tree select works better for a hierarchical data.
This is also what I have always used in the past.

Going horizontally sort of not ideal on a mobile. So it is kind of limited to bigger screens. The examples just use very short words which is also not realistic in real life.

Search would be difficult to implement like that too.

Something like this
https://vue-treeselect.js.org/
is better IMO. But that one doesn’t have mobile support : )) I don’t know how in 2020 : )

You can do something similar (ish) with q-field and q-tree and q-pop-up I am doing that right now …

[s.molinari]

@turigeza - I think this is mainly for picklist fields that would normally require multiple picklists to be dependent on each other. With this component, you end up with a single selection, instead of multiple selections in different picklists. You’d also end up with multiple values, like with a Country, State and City selection. With picklist fields, you’d have 6 different clicks to get the 3 values. With this component, you’d have only 4 clicks. It would also be interesting to get it to be a required entry at any point of the selection. Like, country and state, but not city.

Scott

[turigeza]

@s-molinari said in Feature Request - Cascader Component:

@turigeza - I think this is mainly for picklist fields that would normally require multiple picklists to be dependent on each other. With this component, you end up with a single selection,

The screenshot shows it in single selection mode but it’s not limited to that. It is q-tree in a dropdown. All the tick actions works as well. You can tick multiple items choose ticking strategy, filter etc …
https://quasar.dev/vue-components/tree#Example--Tick-strategy

[s.molinari]

Yes, but the ticking isn’t reduced to only the parent node. You can tick to your heart’s delight. What might work with QTree is once a parent node is selected, all other siblings disappear and only the children of that node are shown/ expanded. Then the same for the next selected node happens until the selection of the last set of nodes leafs) is selected.

Scott

[turigeza]

@s-molinari I get it. I would say that would make a nice feature request for q-tree too. And then this component will inherit it.
(I was just saying multiple selection is already possible)

Actually correction here : ) No need for the feature request.
Nodes model has already got two properties which allow one to control what is tickable. tickable and noTick
https://quasar.dev/vue-components/tree#Nodes-model-structure

So you can not just click away freely if you are using these.

[qyloxe]

Oh, I remember this UI cascade menu/selector from the ancient times Maybe even it was an early jQuery or even Symbian? Very old, and quickly abandoned as UX method.

Anyway, this Ant Design has a VERY interesting tree component - I always praise drag’n’drop and there is one of most functional dnd implementation:

https://www.antdv.com/components/tree/

[turigeza]

@qyloxe +1 for the drag’n’drop and also that it works nice on mobile too. Also they provide both tree as well tree select out of the box. Nice one!

[borie88]

@qyloxe Could you elaborate on why they were abandoned? They are very prevalent in modern Chinese app designs (hence why in ant design), possibly due to the relatively shorter length of Chinese words

[qyloxe]

@borie88 said in Feature Request - Cascader Component:

@qyloxe Could you elaborate on why they were abandoned? They are very prevalent in modern Chinese app designs (hence why in ant design), possibly due to the relatively shorter length of Chinese words

you answered your own question There are tons of UI solutions which are interesting, nice or beautiful. And there comes the real life, with too long sentences, special cases of word-with-dashes-hyphens-and-whatnot, with too much items coming from DB tables, with a new device with new default touch/scroll behaviour. So those “concept” UI components feels awkward and are not good in a general cases. BUT in specific case, when designer has a total control over presentation such components could be useful. Unfortunately (for them not for us) Quasar is a general case solution, so we need UI components which will work in almost any possible UX and context.