Blazor ComboBox Features

    El componente ComboBox Ignite UI for Blazor expone varias características, como el filtrado y la agrupación.

    Combobox Features Example

    The following demo shows some IgbCombo features that are enabled/disabled at runtime:

    In our sample we are going to use the IgbSwitch component, so we have to import them together with the combo:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbSwitch componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbCombo
    Label="Cities"
    Placeholder="Pick a city"
    Data="Data"
    ValueKey="Id"
    DisplayKey="Name"
    DisableFiltering="@DisableFiltering"
    CaseSensitiveIcon="@CaseSensitiveIcon"
    GroupKey="@Group"
    Disabled="@Disabled">
</IgbCombo>

<IgbSwitch Change="@OnDisableFilteringClick">Disable Filtering</IgbSwitch>
<IgbSwitch Change="@OnCaseSensitiveClick" Disabled="@DisableFiltering">Show Case-sensitive Icon</IgbSwitch>
<IgbSwitch Change="@OnGroupClick">Enable Grouping</IgbSwitch>
<IgbSwitch Change="@OnDisableClick">Disable Combo</IgbSwitch>

@code {
    private bool DisableFiltering = false;
    private bool CaseSensitiveIcon = false;
    private bool Disabled = false;

    public void OnDisableFilteringClick(IgbComponentBoolValueChangedEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.DisableFiltering = sw.Checked;
    }

    public void OnCaseSensitiveClick(IgbComponentBoolValueChangedEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.CaseSensitiveIcon = sw.Checked;
    }

    public void OnDisableClick(IgbComponentBoolValueChangedEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.Disabled = sw.Checked;
    }
}

    Note that grouping is enabled/disabled by setting the GroupKey property to a corresponding data source field:

    @code {
    private string Group = "";

    public void OnGroupClick(IgbComponentBoolValueChangedEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.Group = sw.Checked ? "Country" : "";
    }
}

    Características

    Filtración

    By default, filtering in the ComboBox is enabled. It can be disabled by setting the DisableFiltering property.

    Filtering options can be further enhanced by enabling the search case sensitivity. The case-sensitive icon can be turned on using the CaseSensitiveIcon property so that end-users can control the case sensitivity.

    <IgbCombo DisableFiltering="true" CaseSensitiveIcon="true" />

    Opciones de filtrado

    The Ignite UI for Blazor IgbCombo exposes one more filtering property that allows passing configuration of both FilterKey and CaseSensitive options. The FilterKey indicates which data source field should be used for filtering the list of options. The CaseSensitive option indicates if the filtering should be case-sensitive or not.

    El siguiente fragmento de código muestra cómo filtrar las ciudades de nuestra fuente de datos por país en lugar de por nombre. También estamos haciendo que el filtrado distinga entre mayúsculas y minúsculas de forma predeterminada:

    Grouping

    Defining a GroupKey option will group the items, according to the provided key:

    <IgbCombo GroupKey="region" />

    [!Note] The GroupKey property will only have effect if your data source consists of complex objects.

    Dirección de clasificación

    El componente ComboBox también expone una opción para establecer si los grupos deben ordenarse en orden ascendente o descendente. De forma predeterminada, el orden de clasificación es ascendente:

    <IgbCombo GroupSorting="desc" />

    Label

    The IgbCombo label can be set easily using the Label property:

    <IgbCombo Label="Cities" />

    Placeholder

    Se puede especificar un texto de marcador de posición tanto para la entrada del componente ComboBox como para la entrada de búsqueda ubicada dentro del menú desplegable:

    <IgbCombo Placeholder="Pick a city" PlaceholderSearch="Search for a city" />

    Autofocus

    Si desea que su ComboBox se centre automáticamente en la carga de la página, puede utilizar el siguiente código:

    <IgbCombo Autofocus="true" />

    Search Input Focus

    The ComboBox search input is focused by default. To disable this feature and move the focus to the list of options use the AutofocusList property as shown below:

    <IgbCombo AutofocusList="true" />

    Required

    El ComboBox se puede marcar como requerido estableciendo la propiedad requerida.

    <IgbCombo Required="true" />

    Disable ComboBox

    You can disable the ComboBox using the Disabled property:

    <IgbCombo Disabled="true" />

    Additional Resources