Add Item Events in ListBox
When a new item is added to the list in the ListBox component, the following events are fired:
- itemAdding - occurs before item is added
- itemAdded - occurs after item is added and list is refreshed
There is a sample code below written in JavaScript, Angular, React and Vue that shows how to handle add item events 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
This demo shows how to add 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.
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
How to Handle Events when Items are Added
For each add item event, you need to add an event handler method in your code that is called whenever the event occurs. Within this method, you can set set up custom conditios that will determine whenther the add process will stop or continue.
In this example, you can only add 5 items to the list. To set up this condition you can handle the itemAdding event where you can prevent adding more then 5 items to the ListBox. To cancel the process, just set the cancel field of event data to true:
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.
If the list contains less than 5 items, the condition is passed and the item is added to the list. This will fire the itemAdded event, which you can handle in your code and show a notification message. For notification messages you can use the standard alert popup or you can display a custom message using the Toaster component. You can show this message, after the item is added successfully to the server.
These events will fire only when using built-in methods to add items in the ListBox. If you add items to the array used to display a list in the ListBox using standard JavaScript methods, these events will not occur.
In addition, handling these events is useful when you want to confirm that item is added successfully into the server data, prior adding it in the client.
Conclusion
When one or more items are added to the list in ListBox component, accompanying events are fired that you can handle in your code. By setting custom conditions, you can cancel or proceed with the add item operation. You can display notification messages to the user whenever an item is added successfully or an error occurs.
IntegralUI Web is a suite of native web components that includes the ListBox. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.