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.

PreviousCheckBoxNextComboBox

Last updated