Angular Tree Grid Column Pinning

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 columnas en Ignite UI for Angular permite a los usuarios finales bloquear la columna en un orden de columna en particular, esto les permitirá verla mientras se desplazan horizontalmente por la cuadrícula del árbol. 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 de árbol para cambiar el estado 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 Tree 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 Tree Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Tree Grid body.

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

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

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.

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

Puedes cambiar la posición de fijación de columnas mediante lapinning opción de configuración. Te permite poner la posición de las columnas en Inicio o Fin. Cuando se configura como Fin, las columnas se renderizan al final de la cuadrícula, después de las columnas sin fijación. Las columnas sin clavar pueden desplazarse horizontalmente, mientras que las columnas clavadas 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

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