[!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.

    Descripción general del selector de columnas de cuadrícula Web Components

    La Ignite UI for Web Components Data Grid admite la capacidad de mostrar y ocultar columnas con la interfaz de usuario a través del componente IgcDataGridToolbarComponent o mediante el componente columnChooser que proporciona flexibilidad para colocarlo en cualquier lugar de la página. La propiedad IsHidden en las columnas también se puede usar para ocultar o mostrar rápidamente una sola columna mediante programación para la generación manual de columnas, y el valor de IsHidden se reflejará en el componente columnChooser. Cada enfoque se puede utilizar indistintamente para cambiar el estado visible de las columnas.

    Web Components Grid Column Chooser Example

    Toolbar's Column Chooser UI

    Se puede acceder a la interfaz de usuario del selector de columnas desde el componente IgcDataGridToolbarComponent separado de la cuadrícula. Para ello, todo lo que tenemos que hacer es establecer la propiedad columnChooser de la barra de herramientas en verdadero. Luego, la barra de herramientas mostrará un IgcButtonComponent y, al hacer clic, se mostrará la interfaz de usuario del selector de columnas. Este botón también muestra el total de columnas ocultas. Si no se crea la barra de herramientas, habilitar la propiedad IgcColumnChooserComponent no tendrá ningún efecto y ocultará el botón.

    ​IgcDataGridToolbarComponent proporciona propiedades adicionales, como agregar un título a la barra de herramientas mediante la propiedad toolbarTitle, colocar texto en IgcButtonComponent configurando la propiedad ColumnChooserText y agregar un encabezado de título a la interfaz de usuario del selector de columnas configurando ColumnChooserTitle.

    El Selector de columnas se puede configurar con animaciones configurando las propiedades columnHidingAnimationMode y columnShowingAnimationMode de la cuadrícula.

    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-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 mostrar manualmente la interfaz de usuario IgcColumnChooserComponent sin la barra de herramientas y colocarla en cualquier lugar que 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-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