Reordenación y movimiento de columnas de cuadrícula

    El componente Grid en Ignite UI for Angular proporciona la función de movimiento de columnas para permitir el reordenamiento de las columnas mediante gestos táctiles o de arrastrar y soltar estándar, o mediante el uso de la API de movimiento de columnas. El movimiento de columnas funciona tanto con columnas fijadas como sin fijar y con encabezados de varias columnas. Al mover una columna al área fijada, se fija la columna y viceversa; al mover una columna fuera del área fijada, 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 el encabezado de una columna tiene una plantilla y el movimiento de columnas está habilitado o la columna correspondiente es agrupable, entonces los elementos con plantilla deben tener el atributo arrastrable establecido en falso. Esto permite adjuntar controladores para cualquier evento emitido por el elemento; de lo contrario, la directiva igxDrag consume el evento.

    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

    La función de movimiento de columnas está habilitada a nivel de cuadrícula, lo que significa que igx-grid podría tener columnas móviles o inamovibles. Esto se hace a través de la entrada moving del 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: mueve una columna antes o después de otra columna (un objetivo). El primer parámetro es la columna que se va a mover y el segundo parámetro es la columna de destino. También acepta una position de tercer parámetro opcional (que representa un valor DropPosition), que determina si se coloca la columna antes o después de la columna de destino.

    // 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 específico. Si el parámetro de índice pasado no es válido (es negativo o excede el número de columnas), o si no se permite que la columna se mueva 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);

    Tenga en cuenta que al utilizar la API, solo se emitirá el evento columnMovingEnd si la operación se realizó correctamente. También tenga en cuenta que, en comparación con la funcionalidad de arrastrar y soltar, el uso de la API no requiere establecer la propiedad moving en verdadero.

    Eventos

    Hay varios eventos relacionados con el movimiento de la columna para proporcionar un medio para aprovechar las operaciones de arrastrar y soltar de las columnas. Estos son columnMovingStart, columnMoving y columnMovingEnd. Puede suscribirse al evento columnMovingEnd de igx-grid para implementar alguna lógica personalizada cuando una columna se coloca en una nueva posición. Por ejemplo, puede cancelar la eliminación de la categoría después de la columna Cambio en el año (%).

    <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

    Para comenzar a diseñar los encabezados móviles de la columna Grid, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

    @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 simple, creamos un nuevo tema que extiende el grid-theme y acepta los parámetros $ghost-header-background, $ghost-header-text-color y $ghost-header-icon-color.

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

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

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

    Dependiendo de la estrategia de encapsulación de vista del componente, puede ser necesario penetrate esta encapsulación usando::ng-deep

    :host {
    ::ng-deep {
        @include grid($dark-grid-column-moving-theme);
    }
}

    Defining a color palette

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

    igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:

    $yellow-color: #F4D45C;
$black-color: #575757;

$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);

    Y luego, con igx-color podemos recuperar fácilmente el color de la paleta.

    $dark-grid-column-moving-theme: grid-theme(
    $palette: $dark-palette,
    $ghost-header-text-color: color($dark-palette, "primary", 400),
    $ghost-header-background: color($dark-palette, "secondary", 200),
    $ghost-header-icon-color: color($dark-palette, "primary", 500)
);
    Note

    El color y la paleta son funciones poderosas para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.

    Using Schemas

    Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.

    Amplíe uno de los dos esquemas predefinidos, que se proporcionan para cada componente, en este caso: light-grid.

    // Extending the dark grid schema
$dark-grid-column-moving-schema: extend($_light-grid,
        (
            ghost-header-text-color:(
               color: ("primary", 400)
            ),
            ghost-header-background:(
               color: ("secondary", 200)
            ),
            ghost-header-icon-color:(
               color:( "primary", 500)
            )
        )
);

    Para aplicar nuestro esquema personalizado, tenemos que extender uno de los globales (claro u oscuro), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo al tema del componente respectivo:

    // Extending the global dark-schema
$custom-light-schema: extend($light-schema,(
    igx-grid: $dark-grid-column-moving-schema,
));

// Defining dark-grid-theme with the global dark schema
$dark-grid-column-moving-theme: grid-theme(
  $palette: $dark-palette,
  $schema: $custom-light-schema
);

    No olvide incluir el tema de la misma manera que se demostró anteriormente.

    Demo

    Note

    La muestra no se verá afectada por el tema global seleccionado en Change Theme.

    API References

    Additional Resources

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