Reordenación y movimiento de columnas de cuadrícula de árbol

    El componente Cuadrícula de árbol de Ignite UI for Angular proporciona la función Movimiento de columnas para permitir el reordenamiento de columnas mediante gestos táctiles o de arrastrar y soltar estándar, o mediante la API de movimiento de columnas. El movimiento de columnas funciona tanto con columnas ancladas y no ancladas como con encabezados de varias columnas. Al mover una columna al área anclada, se fija la columna y viceversa, al mover una columna fuera del área anclada, se desancla la columna.

    Note

    Solo se permite reordenar entre columnas y grupos de columnas cuando están en el mismo nivel en la jerarquía y ambos están en el mismo grupo. Se permite moverse entre columnas/grupos de columnas, si son columnas de nivel superior.

    Note

    Si una cabecera de columna está plantillada y el movimiento de columna está habilitado o la columna correspondiente es agrupable, entonces los elementos con plantilla deben tener el atributo arrastrable configurado como falso. Esto permite adjuntar manejadores para cualquier evento emitido por el elemento, de lo contrario el evento es consumido por laigxDrag directiva.

    Note

    Si el área fijada excede su ancho máximo permitido (80 % del ancho total de la cuadrícula de árbol), una pista visual notifica al usuario final que la operación de colocación está prohibida y que no es posible fijar. Esto significa que no podrá colocar una columna en el área fijada.

    <ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>

    Angular Tree Grid Column Moving Overview Example

    Descripción general

    La función de mover columnas está habilitada a nivel de cuadrícula, lo que significa que la cuadrícula de árbol igx podría tener columnas móviles o inamovibles. Esto se hace mediante lamoving entrada de eligx-grid.

    <igx-tree-grid [moving]="true"></igx-tree-grid>

    API

    Además de la funcionalidad de arrastrar y soltar, la función Mover columnas también proporciona dos métodos API para permitir mover una columna/reordenar columnas mediante programación:

    moveColumn- Mueve una columna antes o después de otra columna (un objetivo). El primer parámetro es la columna a mover, y el segundo parámetro es la columna objetivo. También acepta un tercer parámetroposition opcional (que representa unDropPosition valor), que determina si colocar la columna antes o después de la columna objetivo.

    // Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");

grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);

    move- Mueve una columna a un índice visible especificado. Si el parámetro de índice pasado es inválido (negativo o supera el número de columnas), o si la columna no puede moverse a este índice (si está dentro de otro grupo), no se realiza ninguna operación.

    // Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);

    Ten en cuenta que al usar la API, solo se emitirá elcolumnMovingEnd evento si la operación fue exitosa. También hay que tener en cuenta que, en comparación con la funcionalidad de arrastrar y soltar, usar la API no requiere poner lamoving propiedad en true.

    Eventos

    Hay varios eventos relacionados con el movimiento de la columna para proporcionar un medio para acceder a las operaciones de arrastrar y soltar de las columnas. Estos soncolumnMovingStart,columnMoving ycolumnMovingEnd. Puedes suscribirte alcolumnMovingEnd evento de paraigx-tree-grid implementar alguna lógica personalizada cuando una columna se cae a una nueva posición. Por ejemplo, puedes cancelar la eliminación de la categoría después de la columna de Cambio de Año (%),

    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" [moving]="true" (columnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Name'" dataType="string" width="250px"></igx-column>
    <igx-column [field]="'Title'" dataType="string" width="250px"></igx-column>
</igx-tree-grid>

    public onColumnMovingEnd(event) {
    if (event.source.field === "Name" && event.target.field === "Title") {
        event.cancel = true;
    }
}

    Estilismo

    Para empezar a estilizar las cabeceras móviles de columnas de la cuadrícula de árbol, necesitamos importar elindex archivo, donde están todas las funciones del tema y los componentes mezclados:

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

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

    Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende losgrid-theme y acepta los$ghost-header-background​$ghost-header-text-color​$ghost-header-icon-color parámetros.

    // Define dark theme for the column moving
$dark-grid-column-moving-theme: grid-theme(
  $ghost-header-text-color: #f4d45c,
  $ghost-header-background: #575757,
  $ghost-header-icon-color: #f4bb5c
);
    Note

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

    El último paso es incluir los mixins de componentes con su respectivo tema:

    @include css-vars($dark-grid-column-moving-theme);

    Demo

    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.