CheckedListBox

Description

This component represents a checked list box in Blazor using the Gap.Blazor.CheckedListBox model. It leverages the Telerik ListBox component to display a list of items with checkboxes, supporting dynamic selection, item checking, and model synchronization.

Usage

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

<WMStyleBase model=@CheckedListBoxModel></WMStyleBase>
<TelerikListBox @ref="@CheckedListBoxRef"
    Data="@CheckedListBoxModel.ListControlItems"
    SelectionMode="@GetSelectionMode()"
    SelectedItemsChanged="SelectedIndexChangeCallback"
    Height="@CheckedListBoxModel.Height.ToString()"
    Width="@CheckedListBoxModel.Width.ToString()"
    class="@CheckedListBoxModel.GetStringClasses()">
        <ListBoxToolBarSettings>
            <ListBoxToolBar Visible="true" />
        </ListBoxToolBarSettings>
        <ItemTemplate>
            @if (context != null)
            {
                var item = (ListControlItem)context;
                var checkboxValue = (bool?)item.Value;

                <TelerikCheckBox Id="@item.GetHashCode().ToString()" Value="@checkboxValue" ValueChanged="@( (bool? value) => OnCheckBoxValueChanged(value, item) )"/>
                <label for="@item.GetHashCode().ToString()">@item.Text</label>
            }
        </ItemTemplate>
</TelerikListBox>

Properties

• CheckedListBoxModel: Instance of the Gap.Blazor.CheckedListBox model.

• CheckedListBoxRef: Reference to the Telerik ListBox component.

Methods

• OnInitialized(): Subscribes to various model events to keep the UI in sync with the backend.

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

• OnCheckBoxValueChanged(bool?, ListControlItem): Updates the check state of an item in the model.

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

• SelectedIndexChange(IEnumerable): Handles selection changes and updates the model accordingly.

Dynamic Rendering

The component dynamically renders a list of checkable items based on the CheckedListBox model:

• WMStyleBase: Applies styles based on the model.

• TelerikListBox: Displays the list of items.

• TelerikCheckBox: Renders a checkbox for each item.

• Label: Displays the text for each item.

Styles

• Height/Width: Set dynamically from the model.

• CSS Classes: Applied using CheckedListBoxModel.GetStringClasses().

Events

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

• Selection Events: SelectedIndexChanged, SelectedIndicesChanged, SelectionModeChanged

• ItemCheck: Triggered when an item’s check state changes.

• NotifyModelChanged: General event to trigger UI updates.