Selection Events in ListBox
Whenever an item Is selected in the ListBox component, the following events are fired:
- afterSelect - occurs after item is selected
- beforeSelect - occurs before item is selected
- selectionChanged - occurs whenever item selection changes
You will find sample code that shows how to handle selection events in JavaScript, Angular, React and Vue, in following sections below.
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
This demo shows how to select a new item to the ListBox using buttons. Whenever an item is added, an event is fired and notification message will popup stating the newly added item.
How to Handle Selection Events when Items are Selected
You don’t have to handle all selection events in your code. Each event allows you to change the flow of selection process in your code. For example, by handling the beforeSelect event you can set up custom condition in your code and cancel the whole process. On the other hand, handling either the afterSelect or selectionChanged event, you can add code where you can check which items are selected in the list.
In this example, ListBox has multi-selection is enabled and whenever an item is selected, the list on the right is updated showing only currently selected items.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
In code above, selectionChanged event is handled where at first a list of currently selected items is retrieved from the ListBox using the getList method. Then a separate list is created showing with basic information about each item.
To create the selected list on the right you can use the ListBox or any other list component. In this case, the IntegralUI List component is in use, it is much simpler version that displays a list of basic data, like item label only.
Conclusion
When one or more items are selected in the ListBox component, accompanying events are fired that you can handle in your code. By setting custom conditions, you can cancel or proceed with the selection process. Whenever a selection changes, you can retrieve a list of currently selected items.
A sample code is available in JavaScript, Angular, React and Vue that shows how selection events work. The ListBox is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.