Fijación de columnas de cuadrícula jerárquica Angular

    Se pueden fijar una columna o varias columnas en el lado izquierdo o derecho de la cuadrícula de interfaz de usuario Angular. La fijación de columnas en Ignite UI for Angular permite a los usuarios finales bloquear columnas en un orden de columnas particular, esto les permitirá verlas mientras se desplazan horizontalmente por la cuadrícula jerárquica. Material UI Grid tiene una interfaz de usuario de fijación de columnas incorporada, que se puede usar a través de la barra de herramientas de Hierarchical Grid para cambiar el estado de fijación de las columnas. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de fijación de las columnas a través de la API de fijación de columnas.

    Angular Hierarchical Grid Column Pinning Example

    Column Pinning API

    La fijación de columnas se controla a través de la entrada pinned de igx-column. Las columnas fijadas se representan en el lado izquierdo de la cuadrícula jerárquica de forma predeterminada y permanecen fijas mediante el desplazamiento horizontal de las columnas no fijadas en el cuerpo de la cuadrícula jerárquica.

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false"
        [height]="'600px'" [width]="'800px'" #hierarchicalGrid>
    <igx-column [field]="Artist" [width]="200px" [pinned]="true"></igx-column>
    <igx-column [field]="Debut" [width]="200px"></igx-column>
</igx-hierarchical-grid>

    También puede utilizar los métodos pinColumn o unpinColumn de la cuadrícula jerárquica de IgxHierarchicalGridComponent para anclar o desanclar columnas por su nombre de campo:

    this.hierarchicalGrid.pinColumn('Artist');
this.hierarchicalGrid.unpinColumn('Debut');

    Ambos métodos devuelven un valor booleano que indica si su operación respectiva fue exitosa o no. Generalmente la razón por la que fallan es que la columna ya se encuentra en el estado deseado.

    Una columna está fijada a la derecha de la columna fijada más a la derecha. Se puede cambiar el orden de las columnas fijadas suscribiéndose al evento columnPin y cambiando la propiedad insertAtIndex de los argumentos del evento al índice de posición deseado.

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false"
        [height]="'600px'" [width]="'800px'" 
        (columnPin)="columnPinning($event)" #hierarchicalGrid>
</igx-hierarchical-grid> 

    public columnPinning(event) {
    if (event.column.field === 'Artist') {
        event.insertAtIndex = 0;
    }
}

    Pinning Position

    Puede cambiar la posición de fijación de la columna mediante la opción de configuración pinning. Le permite establecer la posición de las columnas en Inicio o Fin. Cuando se establece en Fin, las columnas se representan al final de la cuadrícula, después de las columnas sin fijar. Las columnas no fijadas se pueden desplazar horizontalmente, mientras que las columnas fijadas permanecen fijas a la derecha.

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

    public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };

    Demo

    Custom Column Pinning UI

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

    Digamos que en lugar de una barra de herramientas le gustaría definir íconos de pin en los encabezados de las columnas en los que el usuario final puede hacer clic para cambiar el estado del pin de la columna en particular. Esto se puede hacer creando una plantilla de encabezado para la columna con un ícono personalizado.

    <ng-template igxHeader let-column #pinTemplate>
    <div class="title-inner">
        <span style="float:left">{{column.header || column.field}}</span>
        <igx-icon class="pin-icon" [class.pinned]="column.pinned" [class.unpinned]="!column.pinned" fontSet="fas" name="fa-thumbtack"
            (click)="toggleColumn(column)"></igx-icon>
    </div>
</ng-template>
<igx-hierarchical-grid class="hierarchicalGrid" [data]="localdata" [autoGenerate]="false"
    [height]="'500px'" [width]="'100%'" #hierarchicalGrid>
    <igx-column field="CompanyName" header="Company Name" [headerTemplate]="pinTemplate" width="200px" [pinned]="true"></igx-column>
    <igx-column field="ContactName" header="Contact Name" [headerTemplate]="pinTemplate" width="150px"></igx-column>
    <igx-column field="ContactTitle" header="Contact Title" [headerTemplate]="pinTemplate" width="200px"></igx-column>
    <igx-row-island [key]="'Orders'" [autoGenerate]="false">
        <igx-column field="OrderDate" header="Order Date" [headerTemplate]="pinTemplate" [dataType]="'date'" width="150px"></igx-column>
        <igx-column field="RequiredDate" header="Required Date" [headerTemplate]="pinTemplate" [dataType]="'date'" width="150px"></igx-column>
        <igx-column field="ShippedDate" header="Shipped Date" [headerTemplate]="pinTemplate" [dataType]="'date'" width="150px"></igx-column>
        <igx-column field="ShipVia" header="Ship Via" [headerTemplate]="pinTemplate" width="150px"></igx-column>
        <igx-row-island [key]="'OrderDetails'" [autoGenerate]="false">
            <igx-column field="UnitPrice" header="Unit Price" width="150px"></igx-column>
            <igx-column field="Quantity" width="150px"></igx-column>
            <igx-column field="Discount" width="150px"></igx-column>
        </igx-row-island>
    </igx-row-island>
</igx-hierarchical-grid>

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

    public toggleColumn(col: ColumnType) {
    col.pinned ? col.unpin() : col.pin();
}

    Demo

    Pinning Limitations

    • Establecer el ancho de las columnas en porcentaje (%) explícitamente hace que el cuerpo de la cuadrícula jerárquica y el contenido del encabezado estén desalineados cuando hay columnas fijadas. Para que la fijación de columnas funcione correctamente, los anchos de las columnas deben estar en píxeles (px) o ser asignados automáticamente por la cuadrícula jerárquica.

    API References

    Additional Resources

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