Blazor ComboBox Features

Ignite UI for Blazor 필터링 및 그룹화와 같은 여러 기능을 제공합니다.

Combobox Features Example

다음 데모는 런타임 시 활성화/비활성화되는 일부 ComboBox 기능을 보여줍니다.

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 import them together with the combo:

// in Program.cs file

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

IgbSwitch 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

<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

GroupKey 속성을 해당 데이터 소스 필드로 설정하면 그룹화를 활성화/비활성화할 수 있습니다.

@code {
    private string Group = "";

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

특징

필터링

기본적으로 ComboBox의 필터링은 활성화되어 있습니다. DisableFiltering 속성을 설정하여 비활성화할 수 있습니다.

검색 대소문자 구분을 활성화하면 필터링 옵션이 더욱 향상될 수 있습니다. 최종 사용자가 대소문자 구분을 제어할 수 있도록 CaseSensitiveIcon 속성을 사용하여 대소문자 구분 아이콘을 설정할 수 있습니다.

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

필터링 옵션

Ignite UI for Blazor ComboBox 구성 요소는 두 가지 모두의 구성을 전달할 수 있는 하나 이상의 필터링 속성을 노출합니다. FilterKey 그리고 CaseSensitive 옵션. FilterKey 옵션 목록을 필터링하는 데 사용할 데이터 소스 필드를 나타냅니다. CaseSensitive 옵션은 필터링 시 대소문자를 구분할지 여부를 나타냅니다.

다음 코드 조각은 이름 대신 국가별로 데이터 소스의 도시를 필터링하는 방법을 보여줍니다. 또한 기본적으로 필터링에서 대소문자를 구분하도록 설정하고 있습니다.

Grouping

GroupKey 옵션을 정의하면 제공된 키에 따라 항목이 그룹화됩니다.

<IgbCombo GroupKey="region" />
razor

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

정렬 방향

ComboBox 구성 요소는 그룹을 오름차순으로 정렬해야 하는지 내림차순으로 정렬해야 하는지 설정하는 옵션도 제공합니다. 기본적으로 정렬 순서는 오름차순입니다.

<IgbCombo GroupSorting="desc" />
razor

Label

IgbCombo 라벨은 Label 속성을 사용하여 쉽게 설정할 수 있습니다.

<IgbCombo Label="Cities" />
razor

Placeholder

ComboBox 구성 요소 입력과 드롭다운 메뉴 내에 있는 검색 입력 모두에 대해 자리 표시자 텍스트를 지정할 수 있습니다.

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

Autofocus

페이지 로드 시 ComboBox에 자동으로 초점을 맞추려면 다음 코드를 사용할 수 있습니다.

<IgbCombo Autofocus="true" />
razor

Search Input Focus

ComboBox 검색 입력은 기본적으로 초점이 맞춰져 있습니다. 이 기능을 비활성화하고 옵션 목록으로 포커스를 이동하려면 아래와 같이 AutofocusList 속성을 사용하십시오.

<IgbCombo AutofocusList="true" />
razor

Required

필수 속성을 설정하여 ComboBox를 필수로 표시할 수 있습니다.

<IgbCombo Required="true" />
razor

Disable ComboBox

Disabled 속성을 사용하여 ComboBox를 비활성화할 수 있습니다.

<IgbCombo Disabled="true" />
razor