React 다중 열 콤보 상자 개요
다중 열 콤보 상자는 데이터 개체의 속성에 대한 열을 자동으로 생성합니다. 이 구성 요소는 드롭다운에 포함된 데이터 그리드와 유사하게 대량의 데이터를 시각화하는 콤보 상자라는 점에서 독특합니다.
React Multi-Column Combo Box Example
이 샘플은 팝업 창의 여러 열에 데이터를 표시하는 IgrMultiColumnComboBox 만드는 방법을 보여줍니다.
Dependencies
차트 구성 요소를 설치할 때 핵심 패키지도 설치해야 합니다.
npm install --save igniteui-react-core
npm install --save igniteui-react-grids
npm install --save igniteui-react-inputs
npm install --save igniteui-react-layouts
Component Modules
다중 열 콤보 상자에는 다음 모듈이 필요합니다.
import { IgrMultiColumnComboBoxModule } from 'igniteui-react-grids';
import { IgrMultiColumnComboBox } from 'igniteui-react-grids';
IgrMultiColumnComboBoxModule.register();
Usage
Binding a Data Source
다중 열 콤보 상자 구성 요소에 개체를 표시하려면 DataSource 속성을 바인딩해야 합니다. 이는 복잡한 객체의 배열 형태로 바인딩될 수 있습니다. 다음 코드는 데이터 소스 속성을 바인딩하는 방법을 보여줍니다.
아래 코드 조각에서 "countryNames" 컬렉션은 사용자 정의 개체로 가득 찬 any[]입니다.
<IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryNames} />
Setting Display Value and Data Value
다중 열 콤보 상자의 바인딩된 DataSource의 다양한 속성을 구성하여 선택 시 기본 값은 물론 컨트롤의 표시 텍스트 역할을 할 수 있습니다. 이는 컨트롤의 textField 및 valueField 속성을 각각 이러한 항목을 나타내려는 데이터 항목의 속성 이름으로 설정하여 수행됩니다.
다음 코드 조각은 기본 데이터 항목에 "국가" 및 "ID" 속성이 있는 경우 이러한 속성을 설정하는 방법을 보여줍니다.
<IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
textField="Country" valueField={["ID"]}/>
Setting Fields
기본적으로 다중 열 콤보 상자에는 기본 데이터 항목의 모든 속성이 표시되지만 이는 구성 요소의 fields 속성을 설정하여 제어할 수 있습니다. 이 속성은 기본 데이터 항목에 대한 속성 경로의 string[] 사용하여 표시되는 속성을 결정합니다.
다음 코드 조각은 이를 설정하는 방법을 보여 주며 결과 드롭다운에는 ID 및 국가 열만 표시됩니다.
<IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
fields={["ID", "Country"]} />
Setting Placeholder Text
다중 열 콤보 상자 구성 요소에 선택 항목이 없을 때 자리 표시자로 표시되는 텍스트를 구성할 수 있습니다. 표시하려는 문자열로 placeholder 속성을 설정하면 됩니다. 다음 코드는 이를 설정하는 방법을 보여줍니다.
<IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
placeholder="Please choose a country" />
Configuring Sorting Mode
사용자는 드롭다운에서 열 헤더를 클릭하여 다중 열 콤보 상자에 표시되는 열을 정렬할 수 있습니다. 정렬 구성 방식도 수정할 수 있습니다. 열은 단일 열 또는 여러 열로만 정렬할 수 있고 오름차순 및 내림차순으로 제한되거나 3상태일 수 있습니다. 이는 구성 요소의 sortMode 속성을 설정하여 수행됩니다.
TriState 정렬 옵션을 사용하면 정렬된 열을 정렬 해제할 수 있습니다.
다음 코드는 다중 열 3상태별로 정렬할 수 있도록 다중 열 콤보 상자를 설정하는 방법을 보여줍니다.
<IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
sortMode={SortMode.SortByMultipleColumnsTriState} />
API References
DataSourcefieldsGetValueAsyncGetValueIgrMultiColumnComboBoxplaceholdersortModetextFieldValueChangedvalueField