Visão geral da caixa de combinação de várias colunas Web Components

    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.

    Web Components Multi-Column Combo Box Example

    Este exemplo demonstra como criar IgcMultiColumnComboBoxComponent 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-webcomponents-core
npm install --save igniteui-webcomponents-grids
npm install --save igniteui-webcomponents-inputs
npm install --save igniteui-webcomponents-layouts

    Component Modules

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

    import { IgcMultiColumnComboBoxModule } from 'igniteui-webcomponents-grids';
import { IgcMultiColumnComboBoxComponent } from 'igniteui-webcomponents-grids';

ModuleManager.register(
    IgcMultiColumnComboBoxModule
);

    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.

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = 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":

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.textField = "Country";
    multiColumnComboBox.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:

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.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:

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.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.

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.sortMode = SortMode.SortByMultipleColumnsTriState;
}

    API References