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.One → Single

  • 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.