Fijación de filas en cuadrícula jerárquica Angular

    One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. Row Pinning in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the Hierarchical Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an igxActionStrip component in the context of Hierarchical Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API.

    Angular Hierarchical Grid Row Pinning Example

    Row Pinning UI

    La interfaz integrada de fijación de filas se activa añadiendo unigxActionStrip componente con elGridPinningActions componente. La tira de acción se muestra automáticamente al pasar el cursor por una fila y mostrará un icono de botón de fijar o desclavar según el estado de la fila para la que se muestra. También se muestra una acción adicional que permite desplazar la copia de la fila fijada para que se vea para cada fila.

    <igx-hierarchical-grid [data]="data" [autoGenerate]="false">
    <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
    </igx-column>

    <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>
</igx-hierarchical-grid>

    Row Pinning API

    Row pinning is controlled through the pinned input of the row. Pinned rows are rendered at the top of the Hierarchical Grid by default and stay fixed through vertical scrolling of the unpinned rows in the Hierarchical Grid body.

    this.hierarchicalGrid.getRowByIndex(0).pinned = true;

    You may also use the Hierarchical Grid's pinRow or unpinRow methods of the IgxHierarchicalGridComponent to pin or unpin records by their ID:

    this.hierarchicalGrid.pinRow('ALFKI');
this.hierarchicalGrid.unpinRow('ALFKI');

    Ten en cuenta que el ID de fila es el valor principal de la clave, definido por laprimaryKey de la cuadrícula o por la propia instancia del registro. Ambos métodos devolven un valor booleano que indica si su operación respectiva es exitosa o no. Normalmente, la razón por la que fallan es que la fila ya está en el estado deseado.

    Una fila queda clavada debajo de la última fila clavada. Cambiar el orden de las filas fijadas puede hacerse suscribiéndose alrowPinning evento y cambiando lainsertAtIndex propiedad de los argumentos del evento al índice de posición deseado.

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="true" (rowPinning)="rowPinning($event)">
</igx-hierarchical-grid>

    public rowPinning(event) {
    event.insertAtIndex = 0;
}

    Pinning Position

    Puedes cambiar la posición de fijación de fila mediante lapinning opción de configuración. Te permite ajustar la posición del área del pasador en Arriba o Abajo. Cuando se configura en Inferior, las filas fijadas se renderizan en la parte inferior de la cuadrija, después de las filas sin fijar. Las filas sin fijar pueden desplazarse verticalmente, mientras que las filas fijas permanecen fijas en la parte inferior.

    <igx-hierarchical-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-hierarchical-grid>

    public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };

    Custom Row Pinning UI

    Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las filas a través de la API relacionada.

    Via extra column with icon

    Digamos que en lugar de una franja de acción le gustaría mostrar un ícono de pin en cada fila, permitiendo al usuario final hacer clic y cambiar el estado del pin de una fila en particular. Esto se puede hacer agregando una columna adicional con una plantilla de celda que contenga el ícono personalizado.

    <igx-hierarchical-grid [data]="localdata" [autoGenerate]="false">
    <igx-column width='70px' [filterable]='false'>
        <ng-template igxCell let-cell="cell" let-val>
            <igx-icon class="pin-icon" (mousedown)="togglePinning(cell.row, $event)">
                {{cell.row.pinned ? 'lock' : 'lock_open'}}
            </igx-icon>
        </ng-template>
    </igx-column>
    <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
    </igx-column>
    <igx-row-island [key]="'Orders'" [autoGenerate]="true">
    </igx-row-island>
</igx-hierarchical-grid>

    Al hacer clic en el icono personalizado, el estado del pin de la fila relacionada se puede cambiar utilizando los métodos API de la fila.

    public togglePinning(row: IgxGridRow, event) {
    event.preventDefault();
    if (row.pinned) {
        row.unpin();
    } else {
        row.pin();
    }
}

    Manifestación

    Row Pinning Limitations

    • Solo se pueden anclar registros que existen en la fuente de datos.
    • El estado de fijación de filas no se exporta a Excel. La cuadrícula se exporta como si no se hubiera aplicado ninguna fijación de filas.
    • Debido a cómo se almacenan internamente las filas fijadas para que puedan aparecer tanto en las áreas fijadas como en las áreas no fijadas de la cuadrícula, la fijación de filas no se admite cuando los registros de la cuadrícula se obtienen desde un punto final remoto a pedido (virtualización remota).
    • Las copias de filas fijadas en el área desplazable de la cuadrícula son una parte integral de cómo otras características de la cuadrícula logran su funcionalidad en presencia de filas fijadas y, por lo tanto, su creación no se puede deshabilitar ni eliminar.
    • Como la selección de filas funciona completamente con ID de fila, al seleccionar filas fijadas también se seleccionan sus copias (y viceversa). Además, la selección de rango (por ejemplo, usando Shift + clic) dentro del área fijada funciona de la misma manera que seleccionar un rango de filas dentro del área desplazable. La selección resultante incluye todas las filas intermedias incluso si no están fijadas actualmente. Obtener las filas seleccionadas a través de la API solo devuelve una única instancia de cada registro seleccionado.
    • Cuando la cuadrícula noprimaryKey tiene un sistema fijo y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar o desplazar las solicitudes de disparo a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado tras completar una solicitud de datos:
      • Selección de fila
      • Fila Expandir/contraer
      • Edición de filas
      • Fijación de filas

    Estilismo

    The IgxHierarchicalGrid allows styling through the Ignite UI for Angular Theme Library. The Hierarchical Grid's grid-theme exposes a wide variety of properties, which allow the customization of all the features of the Hierarchical Grid.

    A continuación, repasamos los pasos para personalizar el estilo de fijación de filas de la cuadrícula jerárquica.

    Importing the Styling Library

    Para comenzar la personalización de la función de fijación de filas, necesitas importar elindex archivo, donde se encuentran todas las funciones de estilo y mezclas.

    @use "igniteui-angular/theming" as *;

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

    Defining a Theme

    A continuación, crea un nuevo tema que extienda ygrid-theme acepte los parámetros necesarios para personalizar la función de fijación de filas según se desee.

    $custom-grid-theme: grid-theme(
  $pinned-border-width: 5px,
  $pinned-border-style: double,
  $pinned-border-color: #ffcd0f,
  $cell-active-border-color: #ffcd0f
);

    Using CSS variables

    El último paso es pasar el tema de cuadrícula personalizado:

    @include css-vars($custom-grid-theme);

    Manifestación

    Note

    La muestra no se verá afectada por el tema global seleccionado deChange Theme.

    API References

    Additional Resources

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