Blazor 다중 열 콤보 상자 개요

    다중 열 콤보 상자는 데이터 개체의 속성에 대한 열을 자동으로 생성합니다. 이 구성 요소는 드롭다운에 포함된 데이터 그리드와 유사하게 대량의 데이터를 시각화하는 콤보 상자라는 점에서 독특합니다.

    Blazor Multi-Column Combo Box Example

    이 샘플은 팝업 창의 여러 열에 데이터를 표시하는 IgbMultiColumnComboBox 만드는 방법을 보여줍니다.

    EXAMPLE
    MODULES
    DATA
    RAZOR
    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.

    Component Modules

    다중 열 콤보 상자에는 다음 모듈이 필요합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbMultiColumnComboBoxModule));
razor

    Usage

    Binding a Data Source

    다중 열 콤보 상자 구성 요소에 개체를 표시하려면 DataSource 속성을 바인딩해야 합니다. 이는 복잡한 객체의 배열 형태로 바인딩될 수 있습니다. 다음 코드는 데이터 소스 속성을 바인딩하는 방법을 보여줍니다.

    <IgbMultiColumnComboBox Height="50px" Width="400px" DataSource="CountryNames" />

@code {
    protected List<CountryInfo> CountryNames;

    protected override void OnInitialized()
    {
        this.CountryNames = CountryTreeData.Create();
    }
}
razor

    Setting Display Value and Data Value

    다중 열 콤보 상자의 바인딩된 DataSource의 다양한 속성을 구성하여 선택 시 기본 값은 물론 컨트롤의 표시 텍스트 역할을 할 수 있습니다. 이는 컨트롤의 TextField 및 ValueField 속성을 각각 이러한 항목을 나타내려는 데이터 항목의 속성 이름으로 설정하여 수행됩니다.

    구성 요소의 값을 프로그래밍 방식으로 업데이트해야 하는 경우 ValueChanged 이벤트를 처리해야 합니다. GetValue 및 GetValueAsync 메서드를 사용하면 ValueChanged 이벤트 처리기 내에 있지 않을 때 값을 가져올 수 있습니다.

    <IgbMultiColumnComboBox Height="50px" Width="400px"
                     DataSource="CountryNames"
                     TextField="Country"
                     ValueField="@(new string[]{ "ID" })" />

@code {
    protected List<CountryInfo> CountryNames;

    protected override void OnInitialized()
    {
        this.CountryNames = CountryTreeData.Create();
    }
}
razor

    Setting Fields

    기본적으로 다중 열 콤보 상자에는 기본 데이터 항목의 모든 속성이 표시되지만 구성 요소의 Fields 속성을 설정하여 제어할 수 있습니다. 이 속성은 기본 데이터 항목에 대한 속성 경로의 string[] 사용하여 표시되는 속성을 결정합니다.

    다음 코드 조각은 이를 설정하는 방법을 보여 주며 결과 드롭다운에는 ID 및 국가 열만 표시됩니다.

    <IgbMultiColumnComboBox Height="50px" Width="400px"
                     DataSource="CountryNames"
                     Fields="@(new string[] { "ID", "Country" })" />

@code {
    protected List<CountryInfo> CountryNames;

    protected override void OnInitialized()
    {
        this.CountryNames = CountryTreeData.Create();
    }
}
razor

    Setting Placeholder Text

    다중 열 콤보 상자 구성 요소에 선택 항목이 없을 때 자리 표시자로 표시되는 텍스트를 구성할 수 있습니다. Placeholder 속성을 표시하려는 문자열로 설정하면 됩니다. 다음 코드는 이를 설정하는 방법을 보여줍니다.

    <IgbMultiColumnComboBox Height="50px" Width="400px"
                     DataSource="CountryNames"
                     Placeholder="Please choose a country" />

@code {
    protected List<CountryInfo> CountryNames;

    protected override void OnInitialized()
    {
        this.CountryNames = CountryTreeData.Create();
    }
}
razor

    Configuring Sorting Mode

    사용자는 드롭다운에서 열 헤더를 클릭하여 다중 열 콤보 상자에 표시되는 열을 정렬할 수 있습니다. 정렬 구성 방식도 수정할 수 있습니다. 열은 단일 열 또는 여러 열로만 정렬할 수 있고 오름차순 및 내림차순으로 제한되거나 3상태일 수 있습니다. 이는 구성 요소의 SortMode 속성을 설정하여 수행됩니다.

    TriState 정렬 옵션을 사용하면 정렬된 열을 정렬 해제할 수 있습니다.

    다음 코드는 다중 열 3상태별로 정렬할 수 있도록 다중 열 콤보 상자를 설정하는 방법을 보여줍니다.

    <IgbMultiColumnComboBox Height="50px" Width="400px"
                     DataSource="CountryNames"
                     SortMode="SortMode.SortByMultipleColumnsTriState" />

@code {
    protected List<CountryInfo> CountryNames;

    protected override void OnInitialized()
    {
        this.CountryNames = CountryTreeData.Create();
    }
}
razor

    API References