[!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 Descripción general del selector de columnas de cuadrícula

    The Ignite UI for Web Components Data Grid supports the ability show and hide columns with the UI through the IgcDataGridToolbarComponent component or by the columnChooser component that provides flexibility to place it anywhere on the page. The isHidden property on the columns can also be used to quickly hide or show a single column programmatically for manual column generation, and the value of isHidden will reflect in the columnChooser component. Each approach can be used interchangeably to change the visible state of the columns.

    Web Components Grid Column Chooser Example

    Toolbar's Column Chooser UI

    La interfaz Column Chooser es accesible dentro delIgcDataGridToolbarComponent componente separado de la cuadrícula. Para este propósito, solo tenemos que poner la propiedad decolumnChooser la barra de herramientas en true. La barra de herramientas mostrará entonces,IgcButtonComponent al hacer clic, la interfaz selectora de columnas. Este botón también muestra el total de columnas ocultas. Si no se crea la barra de herramientas, activar lacolumnChooser propiedad no tendrá efecto y ocultará el botón.

    ProporcionaIgcDataGridToolbarComponent propiedades adicionales como añadir un título a la barra de herramientas usando latoolbarTitle propiedad, colocar texto enIgcButtonComponent la al establecer lacolumnChooserText propiedad y añadir un encabezado de título a la interfaz selectora de columnas mediante la configuracióncolumnChooserTitle.

    El Selector de Columnas puede configurarse con animaciones configurando las cuadrículascolumnHidingAnimationMode ycolumnShowingAnimationMode propiedades.

    Code Snippet

    A continuación se muestra cómo implementar la interfaz de usuario de la barra de herramientas del selector de columnas para la cuadrícula de datos 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-data-grids';
import { IgcDataGridToolbar } from 'igniteui-webcomponents-data-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-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

    Supongamos que queremos mostrar manualmente lacolumnChooser interfaz sin la barra de herramientas y colocarla donde queramos en nuestra página. Esto se puede hacer fácilmente simplemente creando una instancia del componente en nuestro marcado.

    Demo

    Code Snippet

    A continuación se muestra cómo implementar la interfaz de usuario del selector de columnas para Data Grid:

    <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-data-grids';
import { IgcColumnChooser } from 'igniteui-webcomponents-data-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-data-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