Web Components Hierarchical Grid Column Hiding

    El Ignite UI for Web Components tiene una interfaz de usuario de ocultación de columnas integrada, 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

    Empecemos creando nuestroIgcHierarchicalGridComponent y vinculándolo a nuestros datos. También activaremos tanto el filtrado como la ordenació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 integrada de ocultación de columnas está situada dentro de unaDropDown barra de herramientas de laIgcHierarchicalGridComponent zona. Podemos mostrar/ocultar la interfaz de ocultación de columnas usando exactamente este desplegable.

    Para este propósito, todo lo que tenemos que hacer es establecer tanto elIgcGridToolbarActionsComponent como elIgcGridToolbarHidingComponent interior de elIgcHierarchicalGridComponent.

    <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>

    NosIgcHierarchicalGridComponent proporciona algunas propiedades útiles para usar la interfaz de ocultación de columnas de la barra de herramientas.

    Usando latitle propiedad, estableceremos el título que se muestra dentro del botón desplegable de 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 de arriba al principio de este artículo en la sección Ejemplo de ocultación de columna Web Components.

    Disable hiding of a column

    Podemos evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de ocultación de columnas simplemente configurando sudisableHiding propiedad como true.

    <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 establece las variables CSS relacionadas para los componentes relacionados. Aplicaremos los estilos también solo en eligx-column-actions, para que el resto de la cuadrícula no se vea afectado:

    .hierarchical-grid {
    /* 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 hemos aprendido a usar la interfaz de ocultación de columnas integrada en laIgcHierarchicalGridComponent barra de herramientas. La columna que oculta la interfaz tiene algunas APIs más por explorar, que se enumeran a continuación.

    • ColumnActionsComponent

    Componentes adicionales con API relativas que se utilizaron:

    IgcColumnComponent properties:

    IgcGridToolbarComponent properties:

    • showProgress

    IgcGridToolbarComponent methods:

    IgcHierarchicalGridComponent events:

    • ColumnVisibilityChanged

    Additional Resources

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