Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.

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

    La cuadrícula de datos de Ignite UI for Web Components admite la capacidad de mostrar y ocultar columnas con la interfaz de usuario a través del IgcDataGridToolbarComponent componente o por el columnChooser componente que proporciona flexibilidad para colocarla en cualquier lugar de la página. La IsHidden propiedad de 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 columnChooser componente. Cada enfoque se puede usar indistintamente para cambiar el estado visible de las columnas.

    Web Components Ejemplo de selector de columnas de cuadrícula

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Interfaz de usuario del selector de columnas de la barra de herramientas

    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.

    Ignite UI for Web Components | CTA Banner

    Fragmento de código

    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>
html
    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;
}
ts

    Selector de columnas simple

    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.

    Manifestación

    EXAMPLE
    TS
    HTML
    DataGridStyles.css
    index.css
    Edit in:

    Fragmento de código

    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>
html
    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;
}
ts

    Referencias de API