The dual-listbox supplies two lists side-by-side that allows items in one list to be moved to the other list via drag-and-drop and/or a button-based interface. It supports multiple select options from the list and programatic setting of list sources.
The dual-listbox consists of a single file: (app/dual-list.component.ts)
and can be used in conjuction with Bootstrap and the provided CSS style
sheet (css/record-picker.css) for presentation.
A working demo shows the dual listbox in action.
Copy dual-list.component.ts into your app and add DualListComponent to
the desired component's directives array. Additionally, add the
record-picker.css to your app's index.html. See index.html for an
example.
The following parameters can be set on a dual-list:
- key - The unique identifier field of each object in the
sourceanddestinationarrays, default is_id. - display - The field of each object for displaying the object each the
lists, default is
_name. - height - The height of the lists, default is
100px. - sort - A boolean whether or not to keep the lists sorted, default is
false. - compare - A compare function to be used for sorting the lists. Note if
sort is not set and compare is set, then sort will be set
true. - source - The source array of objects for the list.
- destination The destination array of objects selected from the list.
Note, the
destinationarray can have prexisting elements.
For a usage example, see demo-app.component.ts.
The drag-and-drop between multiple dual-listbox components may cause undesired moves. For the time being, if the component is used, then it is recommended only have one dual-listbox visable to the user at a time.
- Clone this repo
- Install the dependencies:
npm install - Run the TypeScript transpiler and start the server:
npm start
MIT
- David Czeck @czeckd