# Multiselect dropdown in Vision **URL:** \ **Category:** Ignition\ **Tags:** vision\ **Created:** [April 22, 2022, 11:20am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749 "2022-04-22T11:20:24Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![rahul.bhakte](https://avatars.discourse-cdn.com/v4/letter/r/dec6dc/32.png) [@rahul.bhakte](https://forum.inductiveautomation.com/u/rahul.bhakte)\ **Post date:** [April 22, 2022, 11:20am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/1 "2022-04-22T11:20:24Z")
Do we have multi selection facility in vision dropdown component like we have in perspective? Sorry! off topic. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [April 22, 2022, 3:10pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/2 "2022-04-22T15:10:22Z")
No. Vision’s dropdowns are ultimately Java Swing JComboBoxes ‘under the hood’, and the entire component model assumes single selection. ---
**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\ **Post date:** [January 19, 2023, 11:14am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/3 "2023-01-19T11:14:22Z")
Can you please suggest what we can use for multi selection dropdown ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [January 19, 2023, 11:31am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/4 "2023-01-19T11:31:03Z")
It seems like it would be relatively easy to give a jtable the appearance of a dropdown with all of the same functionality plus multiselection. ---
**Author:** ![kavya\_shree](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@kavya\_shree](https://forum.inductiveautomation.com/u/kavya_shree)\ **Post date:** [January 19, 2023, 11:39am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/5 "2023-01-19T11:39:07Z")
> [@justinedwards.jle](#): > > jtable really don't know what it is. I haven't tried Jtable, need to know JAVA also for Ignition. Is there any option ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [January 19, 2023, 12:16pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/6 "2023-01-19T12:16:42Z")
Unfortunately, I'm not where I can draw anything up right now, but if nobody comes up with a better solution, I'll do it later in the day. Both the dropdown, and the basic table use a dataset to store data, so the table could easily hold the same [label, value] data as a dropdown. Position a small square button next to a text field with the same arrow icons, and script the visibility of the table. This would probably be best if it were designed as a template. It's possible somebody has already done something like this. Have you checked the [ignition exchange](https://www.inductiveautomation.com/exchange/)? ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [January 20, 2023, 5:39pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/7 "2023-01-20T17:39:11Z")
I found the time to cobble a template example together. Here is a side by side comparison with the multiSelect dropdown on the left and the standard dropdown on the right: The selected indexes, values, and labels are stored in the template's properties as datasets: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/230b55460bf62a414cb7aa7cffe78ad7350c2799.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b3b11c7fbe71f137d708e753abe249812b225199.png) Below is the template itself. Feel free to download it, import it, and continue development on it until it suits your needs: **Edit:** The Ignition Exchange now holds this resource ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [December 7, 2023, 3:31pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/8 "2023-12-07T15:31:46Z")
It's been a while, but there is now a legit multiselect dropdown available for download at the exchange: [Multiselect Dropdown Exchange Resource: **Version 1.0**](https://inductiveautomation.com/exchange/2581/overview) Multiple selections can be made in the normal way with the ctrl or shift keys: ![ctrl Selection](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/312d57488f93e7e82d77a58277d52d6198f679f7.gif) ![Shift Selection](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/c/8c87d64d3dd36dae3c6af6151d4e828b35c265c9.gif) It is also possible to arrow up or down and use the enter key to select or deselect items: ![Enter Selection](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1deac932e0738a37a058766d57b7e4866b354a5.gif) The dropdown also filters possible selections as the user types making it easy to locate specific selections in long lists: ![Search Capability](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/7/f79786af05c04361189e40ed2e3a2593784cfab8.gif) The dropdown also features a table mode: ![Table Mode](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6c71d2b7fef35edcff7700f000743168a9a490c2.png) **Here are the results:** ![Result](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/9/29ea670d621da1bf760306a7857e42adf33bb340.png) ---
**Author:** ![Matthew\_Lam](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@Matthew\_Lam](https://forum.inductiveautomation.com/u/Matthew_Lam)\ **Post date:** [January 14, 2024, 11:43pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/9 "2024-01-14T23:43:23Z")
Hey, ive installed the new package from gateway, was wondering where the new dropdown appears? I can't seem to find it. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [January 15, 2024, 12:26am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/10 "2024-01-15T00:26:52Z")
> [@Matthew\_Lam](#): > > installed the new package from gateway If you mean you've downloaded and imported the exchange resource, then it will be in the project browser under Vision Templates. ---
**Author:** ![Matthew\_Lam](https://avatars.discourse-cdn.com/v4/letter/m/4491bb/32.png) [@Matthew\_Lam](https://forum.inductiveautomation.com/u/Matthew_Lam)\ **Post date:** [January 15, 2024, 4:58am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/12 "2024-01-15T04:58:32Z")
Hi, thank you so much for that, another question, I am trying to use the new function Multi-Select dropdown to display different values in my power table based on the selections in the dropdown. The problem is I cannot directly access a dataset object (selectedLabels) in my Power table SQL query. How can i do this? ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 9, 2024, 7:40pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/13 "2024-05-09T19:40:36Z")
> [@How to use Multi-Select Dropdown and filter the Power Table](https://forum.inductiveautomation.com/t/how-to-use-multi-select-dropdown-and-filter-the-power-table/84260/6): > > I'm off tomorrow, so if you haven't figured this out by then, I'll set something up in my test environment to demonstrate a few ways to do this. I imagine that you will need to get the column as a list to make it useful for querying, which means you would have to script the query on the selectedLabels propertyChange event. The script would look something like this: ''' Written for the script editor of the multiselect dropdown's propertyChange event handler ''' # If and only if the selectedL… ---
**Author:** ![jchen](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jchen](https://forum.inductiveautomation.com/u/jchen)\ **Post date:** [July 11, 2024, 3:11pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/14 "2024-07-11T15:11:06Z")
Hi, it's really good to use, thanks. As you know for a normal dropdown we can set -1 to selected value to clear selection, how can I do to reset the Multi Select Dropdown? ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [July 12, 2024, 12:45am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/15 "2024-07-12T00:45:39Z")
> [@jchen](#): > > for a normal dropdown we can set -1 to selected value to clear selection The multiselect dropdown equivalent of `selectedValue` is `selectedValues`, which is a ~~list~~ _dataset_ datatype instead of an integer datatype. Simply provide `selectedValues` with an empty list to clear the selection. **Example:** ```python # Clear current selections using a component in the same container as the dropdown event.source.parent.getComponent('MultiSelectDropdown').selectedValues = [] ``` Any time the `selectedData`, `selectedIndexes`, `selectedLabels`, `selectedStringValues`, or `selectedValues` properties are written to, the other properties will automatically update with the data that corresponds to the property that was changed, so writing a blank list to any of these properties will effectively clear the selections. ---
**Author:** ![jchen](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jchen](https://forum.inductiveautomation.com/u/jchen)\ **Post date:** [July 12, 2024, 5:35am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/16 "2024-07-12T05:35:14Z")
Thank you, it works. 💯 ---
**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\ **Post date:** [November 7, 2024, 4:44am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/17 "2024-11-07T04:44:53Z")
@justinedwards.jle I found a bug with this when the Data is using two String columns. in the "textFilter" custom method "setSelectedValues". ```python else selectedIndex ``` "selectedIndex" does not exist. I assume it needed to be "index" referencing the current index in the for loop. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f61c8ed120f01cc257bcd18070790423cdbe0714.png) ---
**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\ **Post date:** [November 7, 2024, 7:22am UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/18 "2024-11-07T07:22:27Z")
Is it possible to change the hover background color? I've changed the "colorSelectionBG" color to match the Ignition dropdown default, but I can't figure out where the hover over color comes from. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/6/16233858ac8938fca414f38e9952e47ac0b8edd2.png) Also wondering if its possible to change the "no selection" font color to be darker. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/722ddd5e142f5b044e0c05a8e7186da8e094a638.png) I would like to keep the lighter color if I could get the default Ignition dropdown to match, but not sure how to do that. I tried a style binding but it didn't quite behave how I wanted (lighter color only for text when not selected, but standard darker grey when the dropdown list opens). ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [November 7, 2024, 2:27pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/19 "2024-11-07T14:27:26Z")
> [@richardNZ15](#): > > Is it possible to change the hover background color? Not a bad idea. I simply made it a shade lighter than the selected background color, so selecting red will result in light red hover color, blue selected color creates a light blue hover color, etc. To change this, simply add a custom property to store the color, and edit the text filter's `showDropdown` custom method to use this color property instead of the brighter color. **Example:** ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d5b49ebbb287587f5711f9155bed7125530685b7.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/0/e037b907371af3ba9d631fa36563798f4e4bba93.png) **Change this code:** ```python # If the row is NOT selected, but the mouse cursor IS hovering over the row, # ...Set the forground to the selection forground, but brighten the background color to give mouse cursor presence indication # ...If the background color cannot be brightenened (any color with 255 for its defining values); then, darken the color instead elif row == textFilter.hoverIndex: background = multiSelectDropdown.colorSelectionBG.brighter() foreground = multiSelectDropdown.colorSelectionFG # If the attempt to brighten the background color with the brighter method has resulted in a color that hasn't changed, # ...darken the background color instead if background == multiSelectDropdown.colorSelectionBG: background = multiSelectDropdown.colorSelectionBG.darker() ``` **To this:** ```python elif row == textFilter.hoverIndex: background = multiSelectDropdown.colorMouseHover foreground = multiSelectDropdown.colorSelectionFG ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/55d43d1a37bc0613b75edb13e438ece5ed75784c.png) **Result:** ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7b41d3c3088d98b28d7d78ca0ee352a6f02d97a2.png) ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [November 7, 2024, 2:41pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/20 "2024-11-07T14:41:55Z")
> [@richardNZ15](#): > > if its possible to change the "no selection" font color to be darker. This text is actually rendered by a second text field that is an underlay to the user input text field: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/8/985637f93ef476cb71976f0804f6615758aacdf2.png) ...and the reason why it is so light in color is because it is disabled. I imagine you could simply enable it, and bind its color to another custom property. The only thing I would worry about is focus control, but if I recall correctly, I already have focus handling nailed down with the focusGained event handlers, so if the dropdown button or the underlay text field receive focus from a traversal forward cause, they will automatically pass that focus onto the next focusable component in the window they've been placed in, but it's been quite a while since I tested this, so I'm not confident enabling the second text field and binding its color to a custom property will work reliably in that regard. ---
**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\ **Post date:** [November 7, 2024, 7:00pm UTC](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749/21 "2024-11-07T19:00:30Z")
Thanks very much for the detailed response! I think on hindsight I do actually like the idea of the lighter tone for highlight vs selected. But I appreciate knowing where to tweak it if needed. Ah must have glazed over the disabled property of that "selectionText" component. I was clicking around on it. Might just enable it but leave editable as false. Thanks! Great component by the way, tried to do something similar myself but this blows it out of the water 😉 [Next page](https://forum.inductiveautomation.com/t/multiselect-dropdown-in-vision/58749.md?page=2)