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.
@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>
CheckedListBoxModel: Instance of the Gap.Blazor.CheckedListBox
model.
CheckedListBoxRef: Reference to the Telerik ListBox
component.
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.
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.
Height/Width: Set dynamically from the model.
CSS Classes: Applied using CheckedListBoxModel.GetStringClasses()
.
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.