New to Telerik UI for BlazorStart a free 30-day trial

A component that lets you display and manage a list of items with selection, reordering, transfer, and drag-and-drop. Supports single/multiple selection via SelectionMode, two-way binding through SelectedItems/SelectedItemsChanged, toolbar tools (move, transfer, remove), connected list boxes via Id and ConnectedListBoxId, custom ItemTemplate and NoDataTemplate, sizing and dimensions, ARIA labeling, and events for reorder/transfer/remove/drop.

Definition

Namespace:Telerik.Blazor.Components

Assembly:Telerik.Blazor.dll

Type Parameters:

TItem

Syntax:

C#
public class TelerikListBox<TItem> : DataBoundComponent<TItem>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Inheritance: objectComponentBaseBaseComponentDataBoundComponent<TItem>TelerikListBox<TItem>

Implements: IComponentIDisposableIHandleAfterRenderIHandleEvent

Inherited Members DataBoundComponent<TItem>.Rebind()DataBoundComponent<TItem>.DataBaseComponent.ShouldRender()BaseComponent.OnInitializedAsync()BaseComponent.InitLocalizer()BaseComponent.ThrowIfParameterIsNull(object, string)BaseComponent.HaveOptionsChanged(IDictionary<string, object>, IDictionary<string, object>)BaseComponent.GetClassString(params string[])BaseComponent.InvokeAsync<T>(string, params object[])BaseComponent.InvokeAsync<T>(string, CancellationToken, params object[])BaseComponent.InvokeVoidAsync(string, params object[])BaseComponent.InvokeVoidAsyncWithoutAwait(string, params object[])BaseComponent.InvokeComponentMethodAsync<T>(string, params object[])BaseComponent.InvokeComponentMethodAsync<T>(string, CancellationToken, params object[])BaseComponent.InvokeVoidComponentMethodAsync(string, params object[])BaseComponent.InvokeComponentVoidMethodAsync(string, object)BaseComponent.InvokeDisposeAsync()BaseComponent.StateHasChanged()BaseComponent.RootComponentBaseComponent.ClassComponentBase.OnParametersSet()ComponentBase.OnAfterRender(bool)ComponentBase.InvokeAsync(Action)ComponentBase.InvokeAsync(Func<Task>)ComponentBase.DispatchExceptionAsync(Exception)...

Constructors

C#
public TelerikListBox()

Methods

C#
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters:__builderRenderTreeBuilder

Overrides: ComponentBase.BuildRenderTree(RenderTreeBuilder)

C#
public override void Dispose()

Overrides: DataBoundComponent<TItem>.Dispose()

C#
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters:firstRenderboolReturns:

Task

Overrides: BaseComponent.OnAfterRenderAsync(bool)

C#
protected override void OnInitialized()

Overrides: ComponentBase.OnInitialized()

C#
protected override Task OnParametersSetAsync()
Returns:

Task

Overrides: DataBoundComponent<TItem>.OnParametersSetAsync()

Re-renders the component.

C#
public void Refresh()
C#
public override Task SetParametersAsync(ParameterView parameters)
Parameters:parametersParameterViewReturns:

Task

Overrides: DataBoundComponent<TItem>.SetParametersAsync(ParameterView)

Properties

[Accessibility] Describe the aria-label attribute for the items list.

C#
[Parameter]
public string AriaLabel { get; set; }

[Accessibility] Describe the aria-labelledby attribute for the items list.

C#
[Parameter]
public string AriaLabelledBy { get; set; }

The id of the list box you want to connect this list box with. Its value should be the same as the Id value of the connected list box.

C#
[Parameter]
public string ConnectedListBoxId { get; set; }

Specifies whether the list box items can be dragged and dropped. This applies to both items within the same list box, as well as across multiple list boxes. Default value is false.

C#
[Parameter]
public bool Draggable { get; set; }

Specifies the ids of the list box components that can drag and drop items to the current list box. The DropSources option describes a one-way relationship. If you want a two-way connection, set the DropSources option to both components.

C#
[Parameter]
public List<string> DropSources { get; set; }

Whether the list box is enabled. Default value is true.

C#
[Parameter]
public bool Enabled { get; set; }

Enables WebMCP tool registration for this ListBox, allowing AI models to discover and invoke list box operations.

C#
[Parameter]
public bool EnableWebMcpTools { get; set; }

Defines the component height as a CSS value.

C#
[Parameter]
public string Height { get; set; }

The id of the list box. If you want to connect multiple list boxes, assign the same value to the ConnectedListBoxId of the corresponding list box.

C#
[Parameter]
public string Id { get; set; }

The item template of the list box items. Use to override the default rendering of individual items.

C#
[Parameter]
public RenderFragment<TItem> ItemTemplate { get; set; }

Defines the settings container for the ListBox. Place ListBoxWebMcpSettings inside.

C#
[Parameter]
public RenderFragment ListBoxSettings { get; set; }

The container for the list box tool bar. Add a ListBoxToolBar tag within this fragment. Children: ListBoxToolBar.

C#
[Parameter]
public RenderFragment ListBoxToolBarSettings { get; set; }

Defines the content of the list box when there is no data.

C#
[Parameter]
public RenderFragment NoDataTemplate { get; set; }

Fires when the user drops dragged items. All data manipulations should be made here. Requires Draggable set to true.

C#
[Parameter]
public EventCallback<ListBoxDropEventArgs<TItem>> OnDrop { get; set; }

Fires when the user initiate deletion of items. The event fires only for the list box owning the tool bar.

C#
[Parameter]
public EventCallback<ListBoxRemoveEventArgs<TItem>> OnRemove { get; set; }

Fires when the user initiate reorder of items. The event fires only for the list box owning the tool bar.

C#
[Parameter]
public EventCallback<ListBoxReorderEventArgs<TItem>> OnReorder { get; set; }

Fires when the user initiates a transfer of items from one list box to another list box. The event fires only for the list box owning the tool bar.

C#
[Parameter]
public EventCallback<ListBoxTransferEventArgs<TItem>> OnTransfer { get; set; }

Specifies the selected items. Used with two-way binding.

C#
[Parameter]
public IEnumerable<TItem> SelectedItems { get; set; }

Specifies the callback that's called when the selected items change.

C#
[Parameter]
public EventCallback<IEnumerable<TItem>> SelectedItemsChanged { get; set; }

Defines scrolling mode of the list box. Possible values are Single(default) and Multiple.

C#
[Parameter]
public ListBoxSelectionMode SelectionMode { get; set; }

Specifies the size of the list box.

C#
[Parameter]
public string Size { get; set; }

Defines the TextField of the Data. Default value: "Text".

C#
[Parameter]
public string TextField { get; set; }

Defines the position of the ToolBar. Possible values are Right(default), Left, Top, and Bottom.

C#
[Parameter]
public ListBoxToolBarPosition ToolBarPosition { get; set; }

Defines the component width as a CSS value.

C#
[Parameter]
public string Width { get; set; }