Move Selected Items in Dual ListBox
When you have multiple items selected in ListBox component, you can move them to a different position within the same list or to another list, in different ways. In this article, you will learn how to move selected items in dual list box, using two buttons: move right and move left. A sample code below is available in each JavaScript framework: Angular, React and Vue.
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
As demo shows, you can select multiple items in one list and move to another list, using two buttons. The first button moves selected items from list on left to the list on right, and second button the other way around.
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 Move Selected Items in Dual List Box
At first, in order to select multiple items in ListBox component, you need to have multi selection enabled, by setting the selectionMode property to either MultiSimple or MultiExtended value. Once you have that ready, you can create a dual list box, using two ListBox components close to each other with control panel in between. The control panel, in this case contains two buttons: move left and move right. For example:
Now you need to set functionality that will move the items from one list to another. For this purpose, you need to handle click event from buttons .When button is clicked, you need to retrieve the array of selected items from the list and create a loop where you will remove them and add them to another list at the same time. Finally, this change requires updating the ListBox layout.
If you move large number of items, to increase performance it is better at first to suspend the layout from any change (like add or remove) and then at the end resume it, by calling the suspendLayout and resumeLayout methods.
You can also move multiple items at once. The addItem and removeItem methods accepts also an array. In this case suspending and resuming the list box layout is not required.
Conclusion
Having large lists sometimes requires having a way to move items from one list to another and vice versa, during run-time. You can create a dual ListBox and use buttons to move selected items between them with ease. Whenever there is a change in lists, it is a good practice to suspend the layout and at the end resume and update it, to increase overall performance.
IntegralUI Web is an UI library 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.