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

    Se puede anclar una o varias columnas a la izquierda o a la derecha de la cuadrícula de la interfaz de usuario de Angular. El anclaje de columna en Ignite UI for Angular permite a los usuarios finales bloquear la columna en un orden de columna determinado, lo que les permitirá verla mientras se desplazan horizontalmente por la cuadrícula jerárquica. La cuadrícula de la interfaz de usuario de material tiene una interfaz de usuario de anclaje de columnas integrada, que se puede usar a través de la barra de herramientas de la cuadrícula jerárquica para cambiar el estado de la ubicación de las columnas. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de anclaje de las columnas a través de la API de fijación de columnas.

    Angular Hierarchical Grid Column Pinning Example

    Column Pinning API

    Column pinning is controlled through the pinned input of the igx-column. Pinned columns are rendered on the left side of the Hierarchical Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Hierarchical Grid body.

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

    You may also use the Hierarchical Grid's pinColumn or unpinColumn methods of the IgxHierarchicalGridComponent to pin or unpin columns by their field name:

    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.

    A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the columnPin event and changing the insertAtIndex property of the event arguments to the desired position index.

    <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

    You can change the column pinning position via the pinning configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right.

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

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

    Demo

    Además, puede especificar cada ubicación de anclaje de columna por separado, lo que le permite anclar columnas a ambos lados de la cuadrícula para mayor comodidad y optimización más fácil de los conjuntos de datos. Consulte la demostración a continuación para obtener más referencia. Para anclar una columna, seleccione una columna haciendo clic en un encabezado y use los botones de anclaje agregados en la barra de herramientas, o simplemente arrastre una columna a otra anclada.

    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.