Item Removal Events in ListBox
Whenever an item is removed from the ListBox or the whole list is cleared, the following events are fired:
- itemRemoving - occurs before item is removed
- itemRemoved - occurs after item is removed and list is refreshed
- clear - occurs when all items from the list are removed
You will find sample code that shows how to handle events when items are removed 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 remove an item from the ListBox using buttons. Whenever an item is removed, an event is fired and notification message will popup stating the removed item.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Handle Events when Items are Removed
To handle item removal events, you need to add an event handler method in your code that is called whenever the event occurs. You can set set up custom conditios within this method, which will determine whenther the removal process will stop or continue.
For example, by handling the itemRemoving event you can prevent the removal of items below position 3 in the list. So if the item index in the list is less than 3, the event is cancelled and the process stops. When this happens the itemRemoved event will never fire.
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 item passed the condition set in previous event, it will be removed from the list. When this happens the itemRemoved will fire, which you can handle in your code and show a notification message. In this case, instead of standard alert popup, you can display a custom message using the Toaster component. You can show this message, after the item is removed successfully from the server.
Finally, when list is cleared by removing all items at once, the clear event will fire. You cannot cancel this process, but you can show a message or set up a custom action when it happens.
These events will fire only when using built-in methods to remove items from the ListBox. If you change the array that holds the item objects displayed 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 deleted from the server, prior deleting it from the client.
Conclusion
When one or more items are removed from 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 operation. You can display notification messages to the user whenever an item is removed successfully or an error occurs.
A sample code is available in JavaScript, Angular, React and Vue that shows how to handle events when items are removed from the list. The ListBox is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.