ComboBox

Description

This component represents a combo box in Blazor using the Gap.Blazor.ComboBox model. It utilizes the Telerik ComboBox component to provide a searchable, filterable dropdown list with support for custom values and dynamic styling.

Usage

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

@if (this.comboBox.Visible)
{
    <WMStyleBase model=@comboBox></WMStyleBase>
    <div class="@comboBox.GetStringClasses()" @onkeydown="@keyDownHandler">
        <TelerikRootComponent>
            <TelerikComboBox TValue="string"
                             TItem="object"
                             Data="@this.items"
                             Enabled="@this.Enabled"
                             AllowCustom="true"
                             Filterable="true"
                             ValueField="text"
                             TextField="value"
                             Width="100%"                                
                             @bind-Value="@this.Value" @ref="elementRef" TabIndex=@TabIndex>
                <NoDataTemplate>
                    <div>
                        <TelerikSvgIcon Icon="@SvgIcon.InfoCircle" Size="@ThemeConstants.SvgIcon.Size.Large" />
                        <br />
                        <br />
                        No items to display...
                    </div>
                </NoDataTemplate>
            </TelerikComboBox>
        </TelerikRootComponent>
    </div>

    <style>
        [email protected]() .k-animation-container {
            top: @(comboBox.Height + "px") !important;
            left: 0px !important;
        }
        [email protected]() .k-combobox {
            height: @(comboBox.Height + "px");
            font-size: inherit;
        }
        [email protected]() .k-list-item {
            font-size: @comboBox.Font.GetFontSize();
        }
    </style>
}

Properties

• ComboBox: Instance of the Gap.Blazor.ComboBox model.

• ElementRef: Reference to the Telerik ComboBox component.

• Items: A dynamically generated list of objects with text and value fields based on ListControlItems.

• Value: Bound to the selected value in the combo box.

Methods

• OnInitialized(): Subscribes to model events such as SelectedIndexChanged, SelectedValueChanged, ValueMemberChanged, DataSourceChanged, DisplayMemberChanged, DropDownStyleChanged, and Items.AfterAdd.

• Focus(): Focuses the combo box using the elementRef.

Dynamic Rendering

The component dynamically renders a combo box based on the ComboBox model:

• WMStyleBase: Applies styles based on the model.

• TelerikComboBox: Provides the dropdown UI with filtering and custom value support.

• NoDataTemplate: Displays a message when no items are available.

Styles

• Dropdown Positioning: Adjusted using .k-animation-container.

• Height and Font Size: Dynamically set based on the model.

• List Item Styling: Font size is derived from the model’s font settings.

Events

• SelectedIndexChanged

• SelectedValueChanged

• ValueMemberChanged

• DataSourceChanged

• DisplayMemberChanged

• DropDownStyleChanged

• Items.AfterAdd