Web Components Hierarchical Grid Column Hiding

El Ignite UI for Web Components tiene una interfaz de usuario integrada de ocultación de columnas, que se puede usar a través de la barra de herramientas de cuadrícula jerárquica Web Components para cambiar el estado visible de las columnas. Los desarrolladores tienen la flexibilidad de definir la interfaz de usuario de ocultación de columnas en cualquier lugar de la página según sea necesario. La función de ocultación de columnas de cuadrícula jerárquica Web Components es especialmente útil cuando se desea disminuir el tamaño de la cuadrícula y eliminar la necesidad de tabular a través de campos redundantes.

Web Components Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

Comencemos por crear nuestro IgcHierarchicalGridComponent y vincularlo a nuestros datos. También habilitaremos tanto el filtrado como la clasificación de las columnas.

<igc-hierarchical-grid auto-generate="false" primary-key="ID" allow-filtering="true" name="hierarchicalGrid1" id="hierarchicalGrid1">
    <igc-column field="Artist" header="Artist" data-type="string" sortable="true"></igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"></igc-column>
    <igc-column field="Debut" header="Debut" data-type="number" hidden="true"></igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" sortable="true" hidden="true"></igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" sortable="true"> </igc-column>
</igc-hierarchical-grid>

Toolbar's Column Hiding UI

La interfaz de usuario de ocultación de columnas incorporada se coloca dentro de una DropDown barra IgcHierarchicalGridComponent de herramientas. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas utilizando este menú desplegable exacto.

Para este propósito, todo lo que tenemos que hacer es establecer tanto el IgcGridToolbarActions como el IgcGridToolbarHiding interior de el IgcHierarchicalGridComponent. También agregaremos un título a nuestra barra de herramientas utilizando el y un estilo personalizado para el IgcGridToolbarTitle envoltorio de nuestra cuadrícula jerárquica.

<igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

Esto IgcHierarchicalGridComponent nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario de ocultación de columnas de la barra de herramientas.

Al usar la propiedad title, configuraremos el título que se muestra dentro del botón desplegable en la barra de herramientas.

<igc-hierarchical-grid id="hierarchicalGrid1">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding id="hidingAction" title="Column Hiding"></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-hierarchical-grid>

Puede ver el resultado del código anterior al comienzo de este artículo en la sección Ejemplo de ocultación de columnas Web Components.

Disable hiding of a column

Podemos evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de usuario que oculta columnas simplemente configurando su propiedad disableHiding en verdadero.

<igc-hierarchical-grid>
    <igc-column field="Artist" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    <igc-column field="GrammyAwards" data-type="String" sortable="true" disable-hiding="true"></igc-column>

    <igc-row-island>
        <igc-column field="Album" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    </igc-row-island>
</igc-hierarchical-grid>

Styling

La cuadrícula se puede personalizar aún más configurando algunas de las variables CSS disponibles. Para lograrlo usaremos una clase que primero asignaremos al grid:

<igc-hierarchical-grid class="hierarchical-grid"></igc-hierarchical-grid>

Luego configure las variables CSS relacionadas para los componentes relacionados. Aplicaremos los estilos también solo en igx-column-actions, por lo que el resto de la cuadrícula no se ve afectado:

#hierarchicalGrid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}

Demo

API References

En este artículo, aprendimos a usar la interfaz de usuario de ocultación de columnas incorporada en la IgcHierarchicalGridComponent barra de herramientas. La columna que oculta la interfaz de usuario tiene algunas API más para explorar, que se enumeran a continuación.

ColumnActionsComponent

Componentes adicionales con API relativas que se utilizaron:

IgcColumnComponent properties:

disableHiding

IgcGridToolbar properties:

showProgress

IgcGridToolbar methods:

IgcHierarchicalGridComponent events:

ColumnVisibilityChanged

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.