List

Properties

Property	Type	Default	Description
items	Array<object>		Array of items to be displayed.
labelField	string	'label'	Field name to be used as the item's label.
rowCount	number	0	Maximum number of items to display at once.
scrollTarget	stringçHTMLElement		Specifies an external scroll element. Only parent nodes are allowed.
draggable	boolean	false	Indicates whether list items can be dragged.
droppable	boolean	false	Indicates whether other items can be dropped onto the list.
hookDragMessage	(data: ListItemDragEventData) => string		Defines a function that returns a message to display when dragging an item.
allowMultiple	boolean	false	Whether users can select multiple items.
requireSelection	boolean	false	Whether at least one item must always be selected.
valueField	string		Name of the field that determines the value of the selected item.
selectedItem	object		Defines the selected item.
selectedItems	Array<object>		Defines multiple selected items.
selectedValue	Array<string>		Defines the valueField property values of the selected items.

Methods

Method	Parameters	Return Value	Description
scrollToIndex	index: number	void	Scrolls to the specified index position. Does not scroll if already visible.
scrollToItem	item: object	void	Scrolls to the specified item position. Does not scroll if already visible.
invalidate		void	Requests a refresh of the display list.
flush		void	Immediately executes any pending display list updates.

Events

Event	Type	Description
collection-change	(event: ArrayListEvent<T>) => void	Occurs when items within the collection change. (set, add, remove, move, update, reset, refresh)
caret-change	(event: CustomEvent<{value: number; oldValue: number}>) => void	Occurs when the cursor index changes.
scroll	(event: CustomEvent<{oldLeft: number; oldTop: number; scrollLeft: number; scrollTop: number; trigger: Event}>) => void	Occurs when scrolling changes.
item-down	(event: ItemEvent<T>) => void	Occurs when mouse down on an item.
item-up	(event: ItemEvent<T>) => void	Occurs when mouse up on an item.
item-click	(event: ItemEvent<T>) => void	Occurs when mouse click on an item.
item-drag-ready	(event: ListItemDragEvent<T>) => void	Occurs when drag is ready.
item-drag-start	(event: ListItemDragEvent<T>) => void	Occurs when drag starts.
item-drag-move	(event: ListItemDragEvent<T>) => void	Occurs whenever movement is detected during drag.
item-drag-over	(event: ListItemDragEvent<T>) => void	Occurs when a dragged element moves over a specific area.
item-drag-out	(event: ListItemDragEvent<T>) => void	Occurs when a dragged element leaves a specific area.
item-drag-enter	(event: ListItemDragEvent<T>) => void	Occurs when a dragged element enters a droppable area.
item-drag-leave	(event: ListItemDragEvent<T>) => void	Occurs when a dragged element leaves a droppable area.
item-drag-end	(event: ListItemDragEvent<T>) => void	Occurs when drag ends.
item-drag-cancel	(event: ListItemDragEvent<T>) => void	Occurs when drag is cancelled.
item-drop	(event: ListItemDragEvent<T>) => void	Occurs when a dragged element is dropped.
selection-changing	(event: SelectionEvent<T>) => void	Occurs before an item is selected. Selection can be cancelled by calling preventDefault in the event handler.
selection-change	(event: SelectionEvent<T>) => void	Occurs after an item is selected.