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 Exemplo de caixa de combinação de várias colunas

    Este exemplo demonstra como criar IgrMultiColumnComboBox que exibe dados em várias colunas em uma janela pop-up.

    Dependências

    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

    Módulos de componentes

    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();

    Uso

    Associando uma fonte de dados

    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} />

    Configurando o valor de exibição e o valor de dados

    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"]}/>

    Definindo campos

    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"]} />

    Definindo o texto do espaço reservado

    É 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" />

    Configurando o modo de classificação

    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} />

    Referências de API