Blazor ComboBox Features

The Ignite UI for Blazor ComboBox component exposes several features such as filtering and grouping.

Combobox Features Example

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

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
            builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));

            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class City {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }

    public class SampleData {
        public static List<City> Cities = GetCities();

        public static List<City> GetCities() {
            var data = new List<City> {
                new City {
                    Id = "UK01",
                    Name = "London",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK02",
                    Name = "Manchester",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK03",
                    Name = "Birmingham",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK04",
                    Name = "Glasgow",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK05",
                    Name = "Liverpool",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "US01",
                    Name = "New York",
                    Country = "United States of America",
                },
                new City {
                    Id = "US02",
                    Name = "Miami",
                    Country = "United States of America",
                },
                new City {
                    Id = "US03",
                    Name = "Philadelphia",
                    Country = "United States of America",
                },
                new City {
                    Id = "US04",
                    Name = "Chicago",
                    Country = "United States of America",
                },
                new City {
                    Id = "US05",
                    Name = "Springfield",
                    Country = "United States of America",
                },
                new City {
                    Id = "US06",
                    Name = "Los Angeles",
                    Country = "United States of America",
                },
                new City {
                    Id = "US07",
                    Name = "Houston",
                    Country = "United States of America",
                },
                new City {
                    Id = "US08",
                    Name = "Phoenix",
                    Country = "United States of America",
                },
                new City {
                    Id = "US09",
                    Name = "San Diego",
                    Country = "United States of America",
                },
                new City {
                    Id = "US10",
                    Name = "Dallas",
                    Country = "United States of America",
                },
                new City {
                    Id = "BG01",
                    Name = "Sofia",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG02",
                    Name = "Plovdiv",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG03",
                    Name = "Varna",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG04",
                    Name = "Burgas",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "IT01",
                    Name = "Rome",
                    Country = "Italy",
                },
                new City {
                    Id = "IT02",
                    Name = "Milan",
                    Country = "Italy",
                },
                new City {
                    Id = "IT03",
                    Name = "Naples",
                    Country = "Italy",
                },
                new City {
                    Id = "IT04",
                    Name = "Turin",
                    Country = "Italy",
                },
                new City {
                    Id = "IT05",
                    Name = "Palermo",
                    Country = "Italy",
                },
                new City {
                    Id = "IT06",
                    Name = "Florence",
                    Country = "Italy",
                },
            };

            return data;
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <style>
        .options {
            display: flex;
            flex-direction: column;
            margin-top: 12px;
            gap: 8px;
        }
    </style>

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

    <div class="options">
        <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>
    </div>
</div>

@code {
    private List<City> Data;
    private bool DisableFiltering = false;
    private bool CaseSensitiveIcon = false;
    private string Group = "";
    private bool Disabled = false;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
    }

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

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

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

    public void OnDisableClick(IgbCheckboxChangeEventArgs e) {
        IgbSwitch sw = e.Parent as IgbSwitch;
        this.Disabled = sw.Checked;
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

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

// in Program.cs file

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

You will also need to link an additional CSS file to apply the styling to the IgbSwitch component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

<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;
    }
}
razor

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" : "";
    }
}
razor

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Features

Filtering

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" />
razor

Filtering Options

The Ignite UI for Blazor ComboBox component 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.

The following code snippet shows how to filter the cities from our data source by country instead of name. We are also making the filtering case-sensitive by default:

Grouping

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

<IgbCombo GroupKey="region" />
razor

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

Sorting Direction

The ComboBox component also exposes an option for setting whether groups should be sorted in ascending or descending order. By default, the sorting order is ascending:

<IgbCombo GroupSorting="desc" />
razor

Label

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

<IgbCombo Label="Cities" />
razor

Placeholder

A placeholder text can be specified for both the ComboBox component input and the search input placed inside the dropdown menu:

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

Autofocus

If you want your ComboBox to be automatically focused on page load you can use the following code:

<IgbCombo Autofocus="true" />
razor

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" />
razor

Required

The ComboBox can be marked as required by setting the required property.

<IgbCombo Required="true" />
razor

Disable ComboBox

You can disable the ComboBox using the Disabled property:

<IgbCombo Disabled="true" />
razor

Additional Resources

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub