Angular Hierarchical Grid Column Hiding

    La cuadrícula jerárquica Ignite UI for Angular proporciona un IgxColumnActionsComponent​ ​IgxColumnHidingDirective que permite a los usuarios realizar la ocultación de columnas directamente a través de la interfaz de usuario o mediante el Angular componente. La cuadrícula de la interfaz de usuario de material tiene una interfaz de usuario de ocultación de columnas incorporada, que se puede usar a través de la barra de herramientas de la cuadrícula jerárquica para cambiar el estado visible de las columnas. Además, los desarrolladores siempre pueden definir la interfaz de usuario que oculta la columna como un componente independiente y colocarla en cualquier lugar de la página que deseen.

    Ejemplo de ocultación de columnas en cuadrícula jerárquica Angular

    EXAMPLE

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

    Configuración de cuadrícula jerárquica

    Comencemos creando nuestra cuadrícula jerárquica y vinculándola a nuestros datos. También habilitaremos el filtrado y la clasificación de las columnas.

    <igx-hierarchical-grid class="hgrid" [data]="localdata"
            [height]="'560px'" [width]="'100%'" columnWidth="200px" [allowFiltering]="true" #hGrid>
    
        <igx-column field="Artist" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column field="Photo">
            <ng-template igxCell let-cell="cell">
                <div class="cell__inner_2">
                    <img [src]="cell.value" class="photo" />
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="Debut" [sortable]="true" [hidden]="true"></igx-column>
        <igx-column field="Grammy Nominations" [sortable]="true" [hidden]="true"></igx-column>
        <igx-column field="Grammy Awards" [sortable]="true"></igx-column>
    
        <igx-row-island [key]="'Albums'" [autoGenerate]="false" #layout1 >
            <igx-column field="Album" [sortable]="true"></igx-column>
            <igx-column field="Launch Date" [sortable]="true"></igx-column>
            <igx-column field="Billboard Review" [sortable]="true"></igx-column>
            <igx-column field="US Billboard 200" [sortable]="true"></igx-column>
            <igx-row-island [key]="'Songs'" [autoGenerate]="false">
                <igx-column field="No."></igx-column>
                <igx-column field="Title"></igx-column>
                <igx-column field="Released"></igx-column>
                <igx-column field="Genre"></igx-column>
            </igx-row-island>
        </igx-row-island>
    
        <igx-row-island [key]="'Tours'" [autoGenerate]="false">
            <igx-column field="Tour"></igx-column>
            <igx-column field="Started on"></igx-column>
            <igx-column field="Location"></igx-column>
            <igx-column field="Headliner"></igx-column>
        </igx-row-island>
    
    </igx-hierarchical-grid>
    html

    IU para ocultar columnas de la barra de herramientas

    La interfaz de usuario integrada para ocultar columnas se coloca dentro de un IgxDropDownComponent en la barra de herramientas de la cuadrícula jerárquica. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas usando este menú desplegable exacto. Para ello, todo lo que tenemos que hacer es configurar tanto IgxGridToolbarActionsComponent como IgxGridToolbarHidingComponent dentro de la cuadrícula jerárquica. También agregaremos un título a nuestra barra de herramientas usando IgxGridToolbarTitleComponent y un estilo personalizado para el contenedor de nuestra cuadrícula jerárquica.

    <!--columnHiding.component.html-->
    <div class="hgrid-sample">
        <igx-hierarchical-grid class="hgrid" [data]="localdata">
        <igx-grid-toolbar>
                <igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
                <igx-grid-toolbar-actions>
                    <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
        ...
     </igx-hierarchical-grid>
    </div>
    html
    /* columnHiding.component.css */
    .photo {
        vertical-align: middle;
        max-height: 62px;
    }
    .cell__inner_2 {
        margin: 1px
    }
    css

    La cuadrícula jerárquica nos proporciona algunas propiedades útiles cuando se trata de utilizar la interfaz de usuario para ocultar columnas de la barra de herramientas. Al utilizar el igx-grid-toolbar-hiding ​ ​title propiedad, estableceremos el título que se muestra dentro del botón desplegable en la barra de herramientas.

    <div class="hgrid-sample">
        <igx-hierarchical-grid class="hgrid" [data]="localdata">
        <igx-grid-toolbar>
                <igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>
                <igx-grid-toolbar-actions>
                    <igx-grid-toolbar-hiding #hidingActionRef title="Column Hiding"></igx-grid-toolbar-hiding>
                </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
     </igx-hierarchical-grid>
    </div>
    html

    Al utilizar la propiedad columnsAreaMaxHeight de IgxGridToolbarHidingComponent, podemos establecer la altura máxima del área que contiene las acciones de la columna. De esta forma si tenemos muchas acciones y no caben todas en el contenedor, aparecerá una barra de desplazamiento, que nos permitirá desplazarnos a cualquier acción que queramos.

    // columnHiding.component.ts
    
    public ngAfterViewInit() {        
        this.hidingActionRef.columnsAreaMaxHeight = "200px";
    }
    typescript

    Para utilizar el conjunto ampliado de funcionalidades para la interfaz de usuario que oculta columnas, podemos utilizar la propiedad columnsAreaMaxHeight de IgxColumnActionsComponent. De esta manera podremos utilizarlo según los requisitos de nuestra aplicación.

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

    Estilo

    Para comenzar a diseñar el componente de acciones de columna, necesitamos importar el archivo de índice, donde se encuentran todas las funciones del tema y los mixins de componentes:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    scss

    Al utilizar el enfoque más simple, creamos un nuevo tema que extiende el column-actions-theme y acepta los parámetros $title-color y $background-color.

    $custom-column-actions-theme: column-actions-theme(
      $background-color: #292826,
      $title-color: #ffcd0f
    );
    scss

    Como se ve, el column-actions-theme solo controla los colores del contenedor de acciones de columna, pero no afecta los botones, las casillas de verificación ni el grupo de entrada dentro de él. Digamos que también queremos darle estilo a los botones, así que crearemos un nuevo tema de botón:

    $custom-button: button-theme(
      $foreground: #292826, 
      $disabled-foreground: rgba(255, 255, 255, .54)
    );
    scss

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores mediante el uso de las palette funciones y color. Consulte el Palettes tema para obtener orientación detallada sobre cómo usarlos.

    En este ejemplo solo cambiamos el color del texto de los botones planos y el color deshabilitado del botón, pero el button-theme proporciona muchos más parámetros para controlar el estilo del botón.

    El último paso es incluir los mixins de componentes, cada uno con su respectiva temática:

    @include css-vars($custom-column-actions-theme);
    
    .igx-column-actions {
      @include css-vars($custom-button);
    }
    scss

    Incluimos el tema de botón creado dentro.igx-column-actions, de modo que solo se estilizaría a los botones de ocultación de columnas. De lo contrario, otros botones de la cuadrícula también se verían afectados.

    Si el componente está usando un Emulated ViewEncapsulation, es necesario que penetrate esta encapsulación use::ng-deep para los componentes dentro del componente de acción de columna (botones, casillas de verificación ... etcétera):

    @include css-vars($custom-column-actions-theme);
    
    :host {
      ::ng-deep {
        .igx-column-actions {
          @include css-vars($custom-button);
        }
      }
    }
    scss

    Manifestación

    EXAMPLE

    App Builder | CTA Banner

    Referencias de API

    En este artículo, aprendimos cómo utilizar la interfaz de usuario integrada para ocultar columnas en la barra de herramientas de la cuadrícula jerárquica.

    La interfaz de usuario que oculta columnas tiene algunas API más para explorar, que se enumeran a continuación.

    Componentes adicionales y/o directivas con API relativas que se utilizaron:

    IgxHierarchicalGridComponent properties:

    IgxColumnComponent properties:

    IgxGridToolbarComponent properties:

    IgxGridToolbarComponent components:

    IgxGridToolbarComponent methods:

    IgxHierarchicalGridComponent events:

    Componente IgxRadio

    Styles:

    Recursos adicionales

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