Select Multiple Items in ListBox
There are two multi-select options in ListBox component: simple and extended. In both ways, you can select multiple items using mouse clicks or touch in combination with keyboard keys. In addition, you can also select items from code.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how multi selection works in ListBox.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, you can choose one of four selection options available. Depending on selected, you can select one or multiple items in the list. Whenever selection changes, the list on the right will update showing all currently selected items.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
Multi-Select in ListBox Component
There are two ways to select multiple items in ListBox, by setting the selectionMode property to:
- MultiSimple - you can select items using only mouse clicks or touch, CTRL key is optional
- MultiExtended - you can select items using CTRL or SHIFT keys in combination with mouse clicks
In most cases of multiple selections, the best is to use the MultiExtended mode, because it allows you to select a range of items using the SHIFT key from the first clicked item to the last. In comparison, with MultiSimple mode you can select items one by one using only the mouse or touch, keyboard is not required.
During selection, beforeSelect, afterSelect and selectionChanged events are fired. You can handle these events in your code and add your own custom actions.
How to Select Multiple Items using Mouse and CTRL or SHIFT Keys
When selectionMode property value is set to either MultiSimple or MultiExtended, you can select multiple items.
In MultiSimple mode, you can select multiple items one by one by clicking with the mouse or using touch. The CTRL key is optional, but it is not required. If an item is already selected, clicking it again will deselect it.
On the other hand, with MultiExtended mode in order to select items, you need to press and hold the CTRL or SHIFT key and click on items. When SHIFT key is pressed, you can select all items between the first and the last clicked item, and holding the CTRL key you can select multiple items one by one.
Select Multiple Items from Code
In some cases, you may need to select multiple items from code. For this purpose, you can use the selectItems method, which accepts an array of item objects. At first, you need to create an array of items that you want to appear as selected in the list, and then apply it to the method, like this:
The items that you want to select manually must be present in the list.
Conclusion
There are different options to select multiple items in ListBox component. You can select items one by one or multi-select items within a range using mouse or touch in combination with CTRL or SHIFT keys. During selection, events are fired that you can handle in your code and further extend this functionality. When required, you can also select multiple items manually from code.
ListBox is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.