# UI Dropdown - How to select / deselect all?
**URL:** https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575
**Category:** Dashboard
**Created:** [24 February 2021 17:20 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575 "2021-02-24T17:20:29Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@relic](https://discourse.nodered.org/u/relic)
#### Post date: [24 February 2021 17:20 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/1 "2021-02-24T17:20:30Z")
Hi there,
I'm trying to find a convenient way to add a 'Select all / Deselect all' for UI\_Dropdown.
So far I'm stuck on multiple Google searches with no answer. I'm guessing that I should use the 'template' node but I have no idea how. This website here - [Dropdown | Semantic UI](https://semantic-ui.com/modules/dropdown.html) - provides good examples of dropdowns that I'd like to implement inside of my Node-RED application, but I'm a newbie at programming.
Any guidance on how to achieve something like a 'Select all' mode? Or maybe how to use the 'template' node?
Thanks in advance!
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [24 February 2021 18:27 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/2 "2021-02-24T18:27:57Z")
Send an array of values in msg.payload that match the option values, or send an empty array.
e.g.
```auto
[{"id":"5f8e0401.63910c","type":"inject","z":"5a245aa1.510164","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":500,"y":2980,"wires":[["17428d37.7997b3"]]},{"id":"17428d37.7997b3","type":"ui_dropdown","z":"5a245aa1.510164","name":"","label":"","tooltip":"","place":"Select option","group":"8b5cde76.edd58","order":5,"width":0,"height":0,"passthru":false,"multiple":true,"options":[],"payload":"","topic":"topic","topicType":"msg","x":670,"y":2960,"wires":[["8ae0a7a.1b65658"]]},{"id":"8ae0a7a.1b65658","type":"switch","z":"5a245aa1.510164","name":"","property":"payload","propertyType":"msg","rules":[{"t":"jsonata_exp","v":"\"select all\" in payload","vt":"jsonata"},{"t":"jsonata_exp","v":"\"unselect\" in payload","vt":"jsonata"},{"t":"else"}],"checkall":"false","repair":false,"outputs":3,"x":810,"y":2960,"wires":[["e6c96fa8.1e266"],["92029d42.2a835"],["fccf3ccd.91e11"]]},{"id":"9817b2c1.b5a3c","type":"inject","z":"5a245aa1.510164","name":"","props":[{"p":"options","v":"[\"select all\",1,2,3]","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":490,"y":2920,"wires":[["17428d37.7997b3"]]},{"id":"e6c96fa8.1e266","type":"change","z":"5a245aa1.510164","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"unselect\",1,2,3]","tot":"json"},{"t":"set","p":"payload","pt":"msg","to":"[1,2,3]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":2960,"wires":[["17428d37.7997b3"]]},{"id":"92029d42.2a835","type":"change","z":"5a245aa1.510164","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"select all\",1,2,3]","tot":"json"},{"t":"set","p":"payload","pt":"msg","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":980,"y":3020,"wires":[["17428d37.7997b3"]]},{"id":"fccf3ccd.91e11","type":"debug","z":"5a245aa1.510164","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":940,"y":2880,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"6","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
```
---
### Author:  [@relic](https://discourse.nodered.org/u/relic)
#### Post date: [25 February 2021 14:31 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/3 "2021-02-25T14:31:59Z")
Hi,
Thank you very much for your quick reply! Your answer is good. I've tried something like this before I wrote the post but it was stuck in a continuous loop as I thought I had to send "msg.options" (I didn't know about the "msg.payload" trick)
Anyway, I've discovered something strange. If you have over 7 options, a similar button appears which does what I want (select, deselect and search). Can somebody tell me how can I edit this limit?
Thanks in advance!
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [26 February 2021 08:38 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/4 "2021-02-26T08:38:35Z")
I would think it is hard coded in the modules files, Maybe ask at github as a feature request, to add a input field for select all limit
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [26 February 2021 08:44 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/5 "2021-02-26T08:44:17Z")
Is less than 7 really that hard to click ? It then adds/wastes a line of space for all those with only a few options. What would be the minimum ?
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [26 February 2021 09:00 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/6 "2021-02-26T09:00:11Z")
> [@dceejay](#):
>
> Is less than 7 really that hard to click ? It then adds/wastes a line of space for all those with only a few options. What would be the minimum ?
Depends on your abilities, some handicaped people may find 7 clicks harder than 1.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [26 February 2021 09:41 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/7 "2021-02-26T09:41:28Z")
in that case make your options a single select not multi
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [26 February 2021 11:07 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/8 "2021-02-26T11:07:44Z")
So if you find small movements difficult you only get option to select 1, but you may want to select 5 of the 6 so only 2 clicks rather than 5. I fail to see how that works
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [26 February 2021 11:59 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/9 "2021-02-26T11:59:49Z")
no - configure your options differently... eg none, option A, option B, option A and B - then you only have to select one.
---
### Author:  [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [26 February 2021 12:11 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/10 "2021-02-26T12:11:49Z")
so for 5 items
you could have over 20 selections for all possible combinations, seems over complicated. would be simpler to just lower select all to 3. Plus it would complicate dynamic filling of options.
---
### Author:  [@relic](https://discourse.nodered.org/u/relic)
#### Post date: [26 February 2021 20:21 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/11 "2021-02-26T20:21:34Z")
> [@dceejay](#):
>
> Is less than 7 really that hard to click ? It then adds/wastes a line of space for all those with only a few options. What would be the minimum ?
No, it's not hard to click but it seems more convenient to have a 'select all / unselect all' option for a list. Even the search function is a really nice touch.
Anyway, I did some research here on the forum and found a post from 2019 - more precisely, this one:
> [@Html and CSS files](https://discourse.nodered.org/t/html-and-css-files/8928/4):
>
> It's in the node-red-dashboard/dist/css directory under the node\_module directory... but would be overwritten by any upgrade to the dashboard you install
It was a good starting point as the file that has to be edited is called "app.min.js" and is found here "...node-red\node\_modules\node-red-dashboard\dist\js"
Opening it with any text editor and searching for '\> 7' does the trick. I've edited every instance of '\> 7' into '\> 3' so I can get both the search function activated and the select / unselect button.
I understand that after every update this file will be overwritten by the new one, but at least it does what I want.
Also, I want to mention that there's nothing written in the documentation regarding this matter - 'if there are more than 7 options, 2 new buttons will automatically be made available for the UI\_Dropdown'. So some people might get discouraged from using this function from the rest of the dashboard's functions.
I'd want to mark this as the 'Solution' even if @E1cid came with a workaround but, at the same time, I want to keep this post open for a little bit more time in case there are more things to say (either by me or by anyone else).
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [28 March 2021 20:22 UTC](https://discourse.nodered.org/t/ui-dropdown-how-to-select-deselect-all/41575/12 "2021-03-28T20:22:15Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.