Reordenación y movimiento de columnas de cuadrícula

    El componente Grid 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

    If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the draggable attribute set to false! This allows to attach handlers for any event emitted by the element, otherwise the event is consumed by the igxDrag directive.

    Note

    Si el área fijada excede su ancho máximo permitido (80% del ancho total de la cuadrícula), una pista visual notifica al usuario final que la operación de colocación está prohibida y que no es posible fijarla. 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 Grid Column Moving Overview Example

    Descripción general

    Column moving feature is enabled on a per-grid level, meaning that the igx-grid could have either movable or immovable columns. This is done via the moving input of the igx-grid.

    <igx-grid [moving]="true"></igx-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 - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter position (representing a DropPosition value), which determines whether to place the column before or after the target column.

    // 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 - Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed.

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

    Note that when using the API, only the columnMovingEnd event will be emitted, if the operation was successful. Also note that in comparison to the drag and drop functionality, using the API does not require setting the moving property to true.

    Eventos

    There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are columnMovingStart, columnMoving and columnMovingEnd. You can subscribe to the columnMovingEnd event of the igx-grid to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category after the Change On Year(%) column.

    <igx-grid #dataGrid [data]="data" [autoGenerate]="false" [moving]="true" (columnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Category'"></igx-column>
    <igx-column [field]="'Change On Year(%)'" [dataType]="'number'" ></igx-column>
</igx-grid>

    public onColumnMovingEnd(event) {
    if (event.source.field === "Category" && event.target.field === "Change On Year(%)") {
        event.cancel = true;
    }
}

    Estilismo

    To get started with styling the Grid column moving headers, we need to import the index file, where all the theme functions and component mixins live:

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

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

    Following the simplest approach, we create a new theme that extends the grid-theme and accepts the $ghost-header-background, $ghost-header-text-color and the $ghost-header-icon-color parameters.

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

    Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette and color functions. Please refer to Palettes topic for detailed guidance on how to use them.

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

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

    Demo

    Note

    The sample will not be affected by the selected global theme from Change Theme.

    API References

    Additional Resources

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