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 criar IgrMultiColumnComboBox que exibe dados em várias 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-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-grids';
import { IgrMultiColumnComboBox } from 'igniteui-react-grids';

IgrMultiColumnComboBoxModule.register();

    Usage

    Binding a Data Source

    Para exibir seus objetos no componente Multi-Column Combo Box, você precisará vincular a propriedade DataSource. Isso pode ser vinculado na forma de uma matriz de objetos complexos. O código a seguir demonstra como vincular a propriedade data source.

    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 do DataSource vinculado do Multi-Column Combo Box para atuar como o texto de exibição para o controle, bem como o valor subjacente quando uma seleção é feita. Isso é feito definindo as propriedades textField e valueField do controle, respectivamente, para o nome da propriedade no item de dados que você deseja que represente 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 no item de dados subjacente, mas isso pode ser controlado definindo a propriedade fields no componente. Essa propriedade pega uma string[] de caminhos de propriedade no item de dados 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 é exibido como um placeholder para quando não há seleção no componente Multi-Column Combo Box. Isso é feito definindo a propriedade placeholder para a string que você gostaria que fosse exibida. O código a seguir demonstra como definir isso:

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

    Configuring Sorting Mode

    O usuário tem a capacidade de classificar as colunas que são exibidas na Multi-Column Combo Box clicando no cabeçalho da coluna no menu suspenso. A maneira como a classificação é configurada também pode ser modificada, pois as colunas podem ser classificadas por apenas uma coluna ou várias colunas, e podem ser limitadas a ascendente e descendente, ou podem ser tri-state. Isso é feito definindo a propriedade sortMode 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