Visão geral da caixa de combinação multicoluna React

    O Multi-Column Combo Box gera colunas automaticamente para propriedades no objeto de dados. Este componente é único no sentido de que é um combo box que visualiza grandes quantidades de dados, semelhante a uma grade de dados incorporada no menu suspenso.

    React Multi-Column Combo Box Example

    Este exemplo demonstra como criarIgrMultiColumnComboBox isso exibindo dados em múltiplas colunas em uma janela pop-up.

    Dependencies

    Ao instalar o componente de gráficos, o pacote principal também deve ser instalado.

    npm install --save igniteui-react-core
npm install --save igniteui-react-data-grids
npm install --save igniteui-react-inputs
npm install --save igniteui-react-layouts

    Component Modules

    A caixa de combinação com várias colunas requer os seguintes módulos:

    import { IgrMultiColumnComboBoxModule } from 'igniteui-react-data-grids';
import { IgrMultiColumnComboBox } from 'igniteui-react-data-grids';

IgrMultiColumnComboBoxModule.register();

    Usage

    Binding a Data Source

    Para exibir seus objetos no componente Multi-Column Combo Box, você precisará vincular aDataSource propriedade. Isso pode ser limitado na forma de um array de objetos complexos. O código a seguir demonstra como vincular a propriedade da fonte de dados.

    No trecho de código abaixo, a coleção "countryNames" é um any[] cheio de objetos personalizados.

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryNames} />

    Setting Display Value and Data Value

    Você pode configurar diferentes propriedades das Caixas Combinadas Multi-ColunasDataSource para atuar como texto de exibição do controle, assim como o valor subjacente quando uma seleção é feita. Isso é feito definindo astextField propriedades evalueField do controle, respectivamente, para o nome da propriedade no item de dados que você deseja representar essas coisas.

    O trecho de código a seguir mostra como definir essas propriedades, considerando que o item de dados subjacente tem uma propriedade "País" e "ID":

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
                        textField="Country" valueField={["ID"]}/>

    Setting Fields

    Por padrão, a Multi-Column Combo Box mostrará todas as propriedades do item de dados subjacente, mas isso pode ser controlado definindo afields propriedade no componente. Essa propriedade toma umstring[] dos caminhos de propriedade no item subjacente para determinar quais propriedades são mostradas.

    O trecho de código a seguir mostra como definir isso, e o menu suspenso resultante mostraria apenas as colunas ID e País:

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
                        fields={["ID", "Country"]} />

    Setting Placeholder Text

    É possível configurar o texto que aparece como um marcador de posição quando não há seleção no componente Multi-Column Combo Box. Isso é feito definindo aplaceholder propriedade para a string que você deseja que seja exibida. O código a seguir demonstra como configurar isso:

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
                        placeholder="Please choose a country" />

    Configuring Sorting Mode

    O usuário tem a capacidade de ordenar as colunas exibidas na Caixa de Combinação Multi-Colunas clicando no cabeçalho da coluna no menu suspenso. A forma como a ordenação é configurada também pode ser modificada, pois as colunas podem ser ordenadas por apenas uma coluna ou múltiplas colunas, e podem ser limitadas a ascendente e descendente, ou podem ser tri-estados. Isso é feito definindo asortMode propriedade do componente.

    Observe que as opções de classificação do TriState permitirão que colunas classificadas sejam desclassificadas.

    O código a seguir demonstra como configurar a Caixa de Combinação de Várias Colunas para poder classificar por três estados de várias colunas.

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
                        sortMode={SortMode.SortByMultipleColumnsTriState} />

    API References