Angular Tree Grid Column Pinning

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 de árbol. 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 Tree 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 Tree 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 de árbol de forma predeterminada y permanecen fijas mediante el desplazamiento horizontal de las columnas no fijadas en el cuerpo de la Cuadrícula de árbol.

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="Title"></igx-column>
    <igx-column [field]="ID"></igx-column>
</igx-tree-grid>

También puede utilizar los métodos pinColumn o unpinColumn de Tree Grid de IgxTreeGridComponent para anclar o desanclar columnas por su nombre de campo:

this.treeGrid.pinColumn('Title');
this.treeGrid.unpinColumn('Name');

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-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true" (columnPin)="columnPinning($event)"></igx-tree-grid>

public columnPinning(event) {
    if (event.column.field === 'Name') {
        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-tree-grid #grid1 [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-tree-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>
<div class="grid__wrapper">
    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" height="620px"
        width="100%">
        <igx-column [field]="'Name'" dataType="string" [headerTemplate]="pinTemplate" width="250px"></igx-column>
        <igx-column [field]="'Title'" dataType="string" [headerTemplate]="pinTemplate" width="300px"></igx-column>
        <igx-column [field]="'ID'" dataType="number" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'HireDate'" header="Hire Date" dataType="date" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Age'" dataType="number" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Address'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'City'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Country'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Fax'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'PostalCode'" header="Postal Code" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Phone'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
    </igx-tree-grid>
</div>

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 de árbol 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 de árbol.

API References

Additional Resources

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

Angular Tree Grid Column Pinning