Move Items with Up Down Buttons in ListBox
To move items from one position to another you can do it in code, or using buttons outside the ListBox, but there is another way. You can add up and down buttons to each item by creating a custom item template, where you can position these buttons vertically at the right side within the item space.
In this article, you will learn how to move item by using up down buttons within the list. Sample code is available in JavaScript, 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
This example shows a ListBox with custom content, where a list of device drivers is displayed with general information. In addition, each item has up down buttons on right side, which allows you to reorder items.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Add Up Down Buttons to Each Item
In order to add custom HTML elements inside item space, you need to create custom item template. In this case, to add buttons you can use the IntegralUI Button component and with small changes in CSS, you can position them to appear vertically on the right side, within the item space.
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.
From code you can see that each button uses customStyle property to add custom CSS that will change the appearance of the buttons. This is required, because Button is a native Web Component and prevents any style changes outside its scope. However, using the customStyle property allows you to override that and make changes to the component appearance by providing your own CSS.
You can put these CSS changes to a separate file and then import it on demand, when this template is in use.
How to Move Items with Up Down Buttons
Once you have the template ready, you can handle the click events from buttons. You need to handle button clicks with a different event handler. In this case, clicking the up button will move the item upwards and clicking the down button will move it downwards.
Moving items within the same list is best handled by calling the moveItem method. The signature of this method is:
moveItem(item, direction, targetObj, position)Where parameters are:
- item - the item object that you want to move
- direction - accepts a value from IntegralUIMoveDirection enumeration
- targetObj - (optional) target item object used as a reference point
- position - (optional) number that represents the new index position within the list
For this example, you only need the first two parameters, Up button uses IntegralUIMoveDirection with Up value, and the Down button uses IntegralUIMoveDirection with Down value.
The moveItem method works only when moving items within the same list.
Conclusion
In order to move items in ListBox component using Up and Down buttons, you can create a custom item template where you can place these buttons.. Then with use of a built-in method you can move the item whenever the up or down button is clicked. This is useful in cases where you want to have all functionality set in the component, without relying on outside control panel.
ListBox is part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript frameworks.