Angular Hierarchical Grid Column Hiding

La Ignite UI for Angular Hierarchical Grid proporciona unIgxColumnActionsComponentIgxColumnHidingDirective dispositivo que permite a los usuarios ocultar columnas directamente a través de la interfaz de usuario o utilizando el componente Angular. La Cuadrícula de la Interfaz de Materiales tiene una interfaz integrada para ocultar columnas, que puede usarse 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 columna que oculta la interfaz como un componente separado y colocarla donde quieran en la página.

Angular Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

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>

Toolbar's Column Hiding UI

La interfaz integrada de ocultación de columnas se coloca dentro yIgxDropDownComponent en la barra de herramientas de la Cuadrícula Jerárquica. Podemos mostrar/ocultar la interfaz de ocultación de columnas usando exactamente este desplegable. Para este propósito, solo tenemos que establecer tanto elIgxGridToolbarActionsComponent interiorIgxGridToolbarHidingComponent como el interior de la Red Jerárquica. También añadiremos un título a nuestra barra de herramientas usando elIgxGridToolbarTitleComponent y un estilo personalizado para el envoltorio de nuestra Hierarchical Grid.

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

/* columnHiding.component.css */
.photo {
    vertical-align: middle;
    max-height: 62px;
}
.cell__inner_2 {
    margin: 1px
}

La Cuadrícula Jerárquica nos proporciona algunas propiedades útiles para usar la interfaz de ocultación de columnas de la barra de herramientas. Usando laigx-grid-toolbar-hiding title propiedad, estableceremos el título que se muestra dentro del botón desplegable de 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>

Utilizando lacolumnsAreaMaxHeight propiedad de IgxGridToolbarHidingComponent, podemos establecer la altura máxima del área que contiene las acciones de la columna. Así, si tenemos muchas acciones y no todas caben 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";
}

Para usar el conjunto ampliado de funcionalidades de la interfaz de ocultación de columnas, podemos usar la propiedad IgxColumnActionsComponentcolumnsAreaMaxHeight. De esta manera podemos usarla 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.

Estilismo

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

Utilizando el enfoque más sencillo, creamos un nuevo tema que extiende loscolumn-actions-theme y acepta los$title-color parámetros y$background-color.

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

Como se ha visto, solocolumn-actions-theme controla los colores del contenedor de acciones de columna, pero no afecta a los botones, casillas de verificación ni al grupo de entrada que contiene. Supongamos que queremos estilizar también los botones, así que crearemos un nuevo tema de botones:

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

Note

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

En este ejemplo solo cambiamos el color de texto de los botones planos y el botón desactivó el color, pero proporcionabutton-theme 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);
}

Note

Incluimos el tema de botón creado en su.igx-column-actions interior, de modo que solo los botones que ocultan la columna se estilizen. De lo contrario, otros botones en la cuadrícula también se verían afectados.

Note

Si el componente utiliza unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación utilice::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);
    }
  }
}

Demo

API References

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: