ListBox Blazor API

ListBox Properties

NameTypeDefaultDescription
AllowDragboolfalseEnables or disables the ability to drag list items out of the List box. Disabled items cannot be dragged.
AllowDropboolfalseEnables or disables the ability to drop list items inside the target List box.
AlternationCountint0Determines the number of color alternations in rows.
AlternationEndint0Determines the ending index of color alternations in rows.
AlternationStartint0Determines the starting index of color alternations in rows
AutoSortbooltrueEnables or disables auto sorting. If sorted is enabled, but autoSort is false, the element will not be re-sorted automatically.
DataSourceobjectN/ADetermines the data source that will be loaded to the ListBox. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value, group. It can also be a callback that returns an Array of items as previously described.
DisabledboolfalseEnables or disables the list box.
DisplayLoadingIndicatorboolfalseDetermines whether an indicator will appear during filtering and remote item loading.
DisplayMemberstring""Sets or gets the displayMember. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'dataSource' property.
DragOffsetint[]new int[]{}Determines the offset of the drag feedback element from the mouse cursor when dragging an item. The first member of the array is the horizontal offset and the second one - the vertical offset.
DropActionListBoxDropActionListBoxDropAction.MoveDetermines what happens when an item is dropped.
EditableboolfalseDetermines if list items can be edited or not. If enabled, items can be edited by double clicking on a target item ( that is not disabled ) or pressing the F2 key on the keyboard.
FilterableboolfalseDetermines whether list items can be filtered or not. If enable a filter input appears at the top of the list box.
FilterCallbackobjectN/AA callback that should return a condition that will be used for custom item filtering. Used in conjunction with filterMode 'custom'
FilterModeFilterModeFilterMode.ContainsIgnoreCaseDetermines the filtering mode.
FilterInputPlaceholderstring""Determines the placeholder for the filter input field.
GroupedboolfalseIf enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups.
GroupMemberstring"null"Determines which attribute from the dataSource object will be used as the group member for the items. If not set, by default 'group' property is used from the source object. groupMember is especially usefull when loading the data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used to group the items.
HorizontalScrollBarVisibilityHorizontalScrollBarVisibilityHorizontalScrollBarVisibility.AutoDetermines the visibility of the horizontal Scroll bar.
IncrementalSearchDelayint700IncrementalSearchDelay property specifies the time-interval in milliseconds until the previous search query is cleared. The timer starts when the user stops typing. A new query can be started only when the delay has passed.
IncrementalSearchModeSearchModeSearchMode.StartsWithIgnoreCaseSets ot gets the mode of the incremental search mode. Incremental search is enabled by default. Typing while the List box is focused starts the incremental search.
ItemHeightintN/ASets the height for all list box items. Used only when virtualization is enabled.
ItemMeasureModeListItemMeasureModeListItemMeasureMode.AutoDetermines the item width measuring algorithm.
ItemTemplateobjectN/AA string that represents the id of an HTMLTemplateElement inside the DOM or a reference to the template itself. It's used to set a custom template for the list items.
LoadingIndicatorPlaceholderstring"Loading..."Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.
LoadingIndicatorPositionVerticalAlignmentVerticalAlignment.CenterDetermines the position of the loading indicator.
Localestring"en"Sets or gets the language. Used in conjunction with the property messages.
MessagesobjectN/ASets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.
Namestring""Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
Placeholderstring"No Items"Determines the placeholder that will be shown when the List box is empty.
ReadonlyboolfalseSets or gets the readonly property. If the element is readonly, users cannot interact with it.
RightToLeftboolfalseSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SelectedIndexesint[]new int[]{}Sets or gets the selected indexes. Selected indexes represents an array of the indexes of the items that should be selected.
SelectedValuesstring[]new string[]{}Sets or gets elected indexes. Selected values represents the values of the items that should be selected.
SelectionModeListSelectionModeListSelectionMode.OneOrManyExtendedDetermines how many items can be selected depending on the selection mode.
SelectionChangeActionListBoxSelectionChangeActionListBoxSelectionChangeAction.ReleaseDetermines when listbox selection is achieved - on 'press' or 'release'.
SortedboolfalseDetermines whether the items are sorted alphabetically or not
SortDirectionstring"asc"Determines sorting direction - ascending(asc) or descending(desc)
Themestring""Determines the theme for the element. Themes define the look of the elements.
TopVisibleIndexint-1Ensures the item with the target index is in view as the first (top) item in the list box.
UnfocusableboolfalseIf is set to true, the element cannot be focused.
ValueobjectN/ASets or gets the value. Returns the selection. Return type: {label: string, value: any}[].
ValueMemberstring""Determines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items.
VerticalScrollBarVisibilityVerticalScrollBarVisibilityVerticalScrollBarVisibility.AutoDetermines the visibility of the vertical scroll bar.
VirtualizedboolfalseDetermines weather or not Virtualization is used for the ListBox. Virtualization allows a huge amount of items to be loaded to the List box while preserving the performance. For example a milion items can be loaded to the list box.

ListBox Methods

NameTypeArgumentsDescription
AppendChilddynamicdynamic nodeAppends a ListItem to the end of the list of items inside element.Args: dynamic node - A ListItem element that should be added to the rest of the items as the last item.
ClearItemsvoidN/ARemoves all items from the listBox.
ClearSelectionvoidN/AUnselects all items.
EnsureVisiblevoidobject itemEnsures the target item is visible by scrolling to it.Args: object item - A list item or value of the desired item to be visible.
GetDataSourceAsync()Task<IEnumerable<object>>'N/A'Gets the &quot;DataSource&quot; property as Task&lt;IEnumerable&lt;object&gt;&gt;.
GetItemobjectstring valueReturns an item instance from the listBox.Args: string value - The value of an item from the listBox.
GetItemsIEnumerable<object>N/AReturns an array of ListBox items.
GetSelectedIndexesAsync()Task<int[]>'N/A'Gets the &quot;SelectedIndexes&quot; property as Task&lt;int[]&gt;.
GetSelectedValuesAsync()Task<string[]>'N/A'Gets the &quot;SelectedValues&quot; property as Task&lt;string[]&gt;.
GetValueAsync()Task<object>'N/A'Gets the &quot;Value&quot; property as Task&lt;object&gt;.
Insertvoidint index, object itemsInserts a new item at a specified index.Args: int index - The index where the item must be inserted.,object items - A single item/definition or an array of List Items/definitions of list items to be inserted. The format of the item definitions is the same as the format of the "dataSource" property.
InsertBeforedynamicdynamic node, dynamic referenceNodeInserts a new ListItem before another in the list.Args: dynamic node - A ListItem element that should be added before the referenceItem in the list.,dynamic referenceNode - A ListItem element that acts as the reference item before which a new item is about to be inserted. The referenceNode must be in the same list as the node.
Refreshvoid'N/A'Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements.
RemoveAtvoidint indexRemoves an item at a specified index.Args: int index - The index of the removed item.
RemoveChilddynamicdynamic nodeRemoves a ListItem from the list of items inside element.Args: dynamic node - A ListItem element that is part of the list of items inside the element.
Rendervoid'N/A'Re-renders the Blazor Component. This method will make a full re-render.
Selectvoidobject itemSelects an item from the listBox. Args: object item - A string, representing the value of the item or an HTML Element referencing an item from the list.
StateHasChangedvoid'N/A'Refreshes the state and Re-renders the Blazor Component, if necessary.
Unselectvoidstring itemUnselects an item from the listBox. Args: string item - A string, representing the value of the item or an HTML Element referencing an item from the list
Updatevoidint index, object detailsUpdates an item from the listBox.Args: int index - The index of the item that is going to be updated.,object details - An object that contains the properties and their new values for the List item that should be updated. For example, label, value or selected attributes.

ListBox Events

NameTypeDescriptionEvent Detail
OnBindingCompleteEventCallback<Event>This event is triggered when listbox binding is completed.N/A
BindingCompletedevent ListBoxBindingCompletedEventHandlerThis event is triggered when listbox binding is completed.ListBoxBindingCompletedEventArgs
OnChangeEventCallback<Event>This event is triggered when selection is changed.dynamic addedItems- An array of List items that have been selected., dynamic disabled- A flag indicating whether or not the item that caused the change event is disabled., int index- The index of the List item that triggered the event., string label- The label of the List item that triggered the event., dynamic removedItems- An array of List items that have been unselected before the event was fired., dynamic selected- The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa., dynamic value- The value of the List item that triggered the event.
Changedevent ListBoxChangedEventHandlerThis event is triggered when selection is changed.ListBoxChangedEventArgs
OnDragEndEventCallback<Event>This event is triggered when an item is dropped. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.dynamic container- The List box that an item was dragged "to.", dynamic data- An object that contains data about the dragging operation like start position, start time, etc., dynamic item- The List item that was dragged., dynamic originalEvent- That original event that was fired., dynamic previousContainer- The List box that an item was dragged "from"., dynamic target- The event target.
DragEndedevent ListBoxDragEndedEventHandlerThis event is triggered when an item is dropped. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.ListBoxDragEndedEventArgs
OnDraggingEventCallback<Event>This event is triggered when a List item is being dragged.dynamic data- An object that contains data about the dragging operation like start position, start time, etc., dynamic item- The List item that is being dragged. This is the item that has been clicked when initiating the drag operation, dynamic originalEvent- The original event that initiates the dragging operation.
Draggingevent ListBoxDraggingEventHandlerThis event is triggered when a List item is being dragged.ListBoxDraggingEventArgs
OnDragStartEventCallback<Event>This event is triggered when an item is dragged. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.dynamic container- The List box that an item was dragged "to.", dynamic data- An object that contains data about the dragging oepration like start position, start time, etc., dynamic item- The List item that was dragged., dynamic originalEvent- That original event that was fired., dynamic previousContainer- The List box that an item was dragged "from"., dynamic target- The event target.
DragStartedevent ListBoxDragStartedEventHandlerThis event is triggered when an item is dragged. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.ListBoxDragStartedEventArgs
OnItemClickEventCallback<Event>This event is triggered when an item is clicked.dynamic disabled- Indicates whether the List item that was clicked is disabled or not., int index- Indicates the index of the List item that was clicked., string label- The label of the List item that was clicked., dynamic selected- Indicates whether the List item that was clicked is selected or not., dynamic value- The value of the List item that was clicked.
ItemClickedevent ListBoxItemClickedEventHandlerThis event is triggered when an item is clicked.ListBoxItemClickedEventArgs
OnItemLabelChangeEventCallback<Event>This event is triggered when an item has been edited.dynamic selected- Indicates whether the List item is selected or not., dynamic disabled- Indicates whether the List item is disabled or not., int index- The index of the List item that was edited., string label- The label of the edited List item., dynamic value- The value of the List item that was edited.
ItemLabelChangedevent ListBoxItemLabelChangedEventHandlerThis event is triggered when an item has been edited.ListBoxItemLabelChangedEventArgs
OnScrollBottomReachedEventCallback<Event>This event is triggered when user scrolls to the end of the list.N/A
ScrollBottomReachedevent ListBoxScrollBottomReachedEventHandlerThis event is triggered when user scrolls to the end of the list.ListBoxScrollBottomReachedEventArgs
OnScrollTopReachedEventCallback<Event>This event is triggered when user scrolls to the beginning of the list.N/A
ScrollTopReachedevent ListBoxScrollTopReachedEventHandlerThis event is triggered when user scrolls to the beginning of the list.ListBoxScrollTopReachedEventArgs
OnSwipeleftEventCallback<Event>This event is triggered when the user swipes to the left, inside the listBox.N/A
SwipedLeftevent ListBoxSwipedLeftEventHandlerThis event is triggered when the user swipes to the left, inside the listBox.ListBoxSwipedLeftEventArgs
OnSwiperightEventCallback<Event>This event is triggered when the user swipes to the right, inside the listBox.N/A
SwipeRightevent ListBoxSwipeRightEventHandlerThis event is triggered when the user swipes to the right, inside the listBox.ListBoxSwipeRightEventArgs

Enums

ListBoxDropAction

ListBoxDropAction.Copy
ListBoxDropAction.Move
ListBoxDropAction.None

FilterMode

FilterMode.Contains
FilterMode.ContainsIgnoreCase
FilterMode.DoesNotContain
FilterMode.DoesNotContainIgnoreCase
FilterMode.Equals
FilterMode.EqualsIgnoreCase
FilterMode.StartsWith
FilterMode.StartsWithIgnoreCase
FilterMode.EndsWith
FilterMode.EndsWithIgnoreCase
FilterMode.Custom

HorizontalScrollBarVisibility

HorizontalScrollBarVisibility.Auto
HorizontalScrollBarVisibility.Disabled
HorizontalScrollBarVisibility.Hidden
HorizontalScrollBarVisibility.Visible

SearchMode

SearchMode.Contains
SearchMode.ContainsIgnoreCase
SearchMode.DoesNotContain
SearchMode.DoesNotContainIgnoreCase
SearchMode.Equals
SearchMode.EqualsIgnoreCase
SearchMode.StartsWith
SearchMode.StartsWithIgnoreCase
SearchMode.EndsWith
SearchMode.EndsWithIgnoreCase

ListItemMeasureMode

ListItemMeasureMode.Auto
ListItemMeasureMode.Precise

VerticalAlignment

VerticalAlignment.Bottom
VerticalAlignment.Center
VerticalAlignment.Top

ListSelectionMode

ListSelectionMode.None
ListSelectionMode.OneOrManyExtended
ListSelectionMode.ZeroOrMany
ListSelectionMode.OneOrMany
ListSelectionMode.ZeroAndOne
ListSelectionMode.ZeroOrOne
ListSelectionMode.One
ListSelectionMode.CheckBox
ListSelectionMode.RadioButton

ListBoxSelectionChangeAction

ListBoxSelectionChangeAction.Press
ListBoxSelectionChangeAction.Release

VerticalScrollBarVisibility

VerticalScrollBarVisibility.Auto
VerticalScrollBarVisibility.Disabled
VerticalScrollBarVisibility.Hidden
VerticalScrollBarVisibility.Visible