Select all on multi-select component?

App Building
,
1

Hey there,
Does anybody know of a way to add a "Select all" option to the multi-select component?

Thanks!

2

A separate button to set the value to "all" might work more easily than a "Select All" option within the component.

Only reason I say this is that although adding a new value to a list is quite straightforward, I think that treating it as a "special option" will be quite a bit of effort and tracking the user interaction with it and state management will be even more effort.

As a query it should be simple enough to set it to "all" using this kind of logic:
multiselect1.setValue(multiselect1.data.map(x=>x.value))

1 Like
3

Thanks @dcartlidge - That query didn't quite do the trick. Maybe I need to keep playing with it.

4

Try to make a JS query with just this and attach a button (like @dcartlidge suggested) to it:

your_multiselect_component.setValue(your_multiselect_component.values);

The .value would give you just the value(s) selected (which is useless to you here). BUT the plural .values gives all the options. So you can set the value (using .setValue) to all the values. See?

5

Thanks @mathfour that worked. Would be nice if it was an option on the component.

1 Like
6

When I try to set the values using the method below it works, but it does not show the labels...

How do I also set the labels?

image

image

7

Hey @reslley! Are you still seeing this issue? If so would you mind sharing your component configuration?

Doing a quick test on my end things seem to be set properly, curious to know what I might be missing that would help repro:

8

yes, I have to set it twice for it to work.

first I set it using the query result

image
image760×660 41.2 KB

then I set it using the component own values, this way the labels show

image
image766×532 37.3 KB

9

@Kabirdas quick question

Instead of giving extra button to select and unselect All .

Is there any we can provide checkbox or something in the multi select dropdown only . Is this possible

10

Hello @Keven!

Unfortunately Kabirdas is no longer with out team.

I can make a feature request for adding in select all/unselect all buttons that would come built in to a multi-select dropdown.

Were you not able to use a separate button component with the above logic multiselect1.setValue(multiselect1.values) or do you have a specific use case where the buttons would need to be within the multi-select dropdown?

11

I think we are good

1 Like
12

@Keven Great to hear!

Happy building :man_technologist: