[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Web Components Visão geral do seletor de colunas de grade

    A Grade de Dados do Ignite UI for Web Components dá suporte à capacidade de mostrar e ocultar colunas com a interface do usuário por meio do IgcDataGridToolbarComponent componente ou pelo columnChooser que fornece flexibilidade para colocá-lo em qualquer lugar da página. O IsHidden nas colunas também pode ser usada para ocultar ou mostrar rapidamente uma única coluna programaticamente para geração manual de colunas, e o valor de IsHidden refletir-se-á no columnChooser componente. Cada abordagem pode ser usada de forma intercambiável para alterar o estado visível das colunas.

    Web Components Grid Column Chooser Example

    Toolbar's Column Chooser UI

    A interface do usuário do Seletor de Colunas pode ser acessada dentro do IgcDataGridToolbarComponent componente separado da grade. Para isso, tudo o que precisamos fazer é definir a propriedade da columnChooser barra de ferramentas como true. A barra de ferramentas exibirá um IgcButtonComponent, quando clicado, exibirá a interface do usuário do seletor de colunas. Este botão também exibe o total de colunas ocultas. Se a barra de ferramentas não for criada, habilitar a IgcColumnChooserComponent propriedade não terá efeito e ocultará o botão.

    O IgcDataGridToolbarComponent fornece propriedades adicionais, como adicionar um título à barra de ferramentas usando a toolbarTitle propriedade, colocar texto IgcButtonComponent na configuração ColumnChooserText da propriedade e adicionar um cabeçalho de título à interface do usuário do seletor de colunas por configuração ColumnChooserTitle.

    O Column Chooser pode ser configurado com animações definindo as propriedades columnHidingAnimationMode e columnShowingAnimationMode da grade.

    Code Snippet

    Veja a seguir como implementar a interface do usuário da barra de ferramentas do Seletor de Colunas para a Grade de Dados do Web Components:

    <igc-dataGrid-toolbar
    toolbar-title="Grid Title"
    column-chooser="true"
    column-chooser-text="Columns"
    column-chooser-title="Column Chooser">
</igc-dataGrid-toolbar>
<igc-data-grid
    id="grid"
    height="calc(100% - 40px)"
    width="100%"
    auto-generate-columns="false"
    default-column-min-width="120px"
    scrollbar-style = "thin"
    column-hiding-animation-mode="SlideOver">
</igc-data-grid>

    import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbar } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private toolbar: IgcDataGridToolbarComponent;

connectedCallback() {
    this.toolbar.targetGrid = this.grid;
    let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent;
    productNameColumn.isHidden = true;
    this.toolbar.columnChooser = true;
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Choose Text";
    this.toolbar.columnChooserTitle = "Choose Title Text";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}

    Simple Column Chooser

    Digamos que queremos exibir manualmente a interface do IgcColumnChooserComponent usuário sem a barra de ferramentas e colocá-la em qualquer lugar que quisermos em nossa página. Isso pode ser feito facilmente simplesmente criando uma instância do componente em nossa marcação.

    Demo

    Code Snippet

    A seguir, demonstramos como implementar a interface do usuário do seletor de colunas para a grade de dados:

    <igc-column-chooser
    id="columnUI"
    height="100%"
    width="250px"
    title="Column Chooser"
    show-all-text="Show All"
    hide-all-text="Hide All">
</igc-column-chooser>
<igc-data-grid
    id="grid"
    height="100%"
    width="100%"
    data-source={this.data}
    auto-generate-columns="false"
    column-hiding-animation-mode="SlideOver">
    <igx-text-column is-hidden="true" field="ProductPrice" header-text="Product Price"><igc-text-column>
</igc-data-grid>

    import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcColumnChooser } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private columnChooser: IgcColumnChooserComponent;

connectedCallback() {
    this.columnChooser.targetGrid = this.grid;
    this.columnChooser.showAllText = "Show All";
    this.columnChooser.hideAllText = "Hide All";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}

    API References