ListBox

Description

This component represents a list box in Blazor using the Gap.Blazor.ListBox model. It uses the Telerik ListBox component to display a list of selectable items, supporting both single and multiple selection modes, dynamic updates, and synchronization with the backend model.

Usage

@using Gap.Blazor
@using Gap.Blazor.Components
@using Telerik.Blazor.Components
@inherits WMControlComponentBase
@namespace Gap.Blazor.Components

<WMStyleBase model=@ListBoxModel></WMStyleBase>
<TelerikListBox @ref="@ListBoxRef"
    Data="@ListBoxModel.ListControlItems"
    SelectionMode="@GetSelectionMode()"
    SelectedItemsChanged="SelectedIndexChangeCallback"
    Height="@ListBoxModel.Height.ToString()"
    Width="@ListBoxModel.Width.ToString()"
    class="@ListBoxModel.GetStringClasses()">
    <ListBoxToolBarSettings>
        <ListBoxToolBar Visible="true" />
    </ListBoxToolBarSettings>
</TelerikListBox>

Properties

  • ListBoxModel: Instance of the Gap.Blazor.ListBox model.

  • ListBoxRef: Reference to the Telerik ListBox component.

  • ListBoxData: Internal list of items (not directly used in rendering).

  • ListBoxSelectionModeValue: Stores the current selection mode.

Methods

  • OnInitialized(): Subscribes to model events such as item changes, selection changes, and mode changes.

  • SyncModelChanges(): Updates the UI based on model changes and rebinds the list box.

  • GetSelectionMode(): Maps the model’s SelectionMode to Telerik’s ListBoxSelectionMode:

    • SelectionMode.OneSingle

    • Otherwise → Multiple

  • SelectedIndexChange(IEnumerable): Updates the model’s selected indices based on user interaction.

Dynamic Rendering

The component dynamically renders a list box based on the ListBox model:

WMStyleBase: Applies styles based on the model.

TelerikListBox: Displays the list of items with optional toolbar.

SelectionMode: Supports both single and multiple selection.

Events

  • Items Collection Events: AfterAdd, AfterAddRange, AfterClear, AfterInsert, AfterRemoveAt

  • Selection Events: SelectedIndexChanged, SelectedIndicesChanged, SelectionModeChanged

  • NotifyModelChanged: General event to trigger UI updates.

Last updated