Reordenación y movimiento de columnas de cuadrícula jerárquica

    La función de movimiento de columnas de cuadrícula jerárquica Web Components en Ignite UI for Web Components permite un reordenamiento rápido y sencillo de las columnas. Esto se puede hacer a través de la API de movimiento de columnas o arrastrando y soltando los encabezados a otra posición mediante el mouse o gestos táctiles. En la cuadrícula jerárquica Web Components, puede habilitar el movimiento de columnas para columnas ancladas y no ancladas, así como para encabezados de varias columnas.

    [!Note] Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns.

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

    [!Note] If the pinned area exceeds its maximum allowed width (80% of the total IgcHierarchicalGridComponent width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.

    public headerTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
    `;
}

    Web Components Hierarchical 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 queIgcHierarchicalGridComponent pueden tener columnas móviles o inmóviles. Esto se hace mediante lamoving entrada de elIgcHierarchicalGridComponent.

    <igc-hierarchical-grid moving="true">
    ...
    <igc-row-island moving="true"></igc-row-island>
</igc-hierarchical-grid>

    API

    Además de la funcionalidad de arrastrar y soltar, la función Mover columnas también proporciona 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 función de movimiento de columna, elColumnMovingEnd evento se emitirá si la operación ha tenido éxito. También hay que tener en cuenta que, en comparación con la funcionalidad de arrastrar y soltar, usar la función de mover columnas 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 paraIgcHierarchicalGridComponent implementar alguna lógica personalizada cuando una columna se cae a una nueva posición. Por ejemplo, puedes cancelar que se elimine la columna Categoría después de la columna Cambio en el Año (%) en el siguiente fragmento de código.

    <igc-hierarchical-grid id="dataGrid" auto-generate="false" moving="true">
    <igc-column field="Category"></igc-column>
    <igc-column field="Change On Year(%)" data-type="Number" ></igc-column>
</igc-hierarchical-grid>

    constructor() {
    var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}

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

    Styling

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles.

    En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

    <igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

    Luego establezca las propiedades CSS relacionadas con esta clase:

    .grid {
    --ig-grid-ghost-header-text-color: #f4d45c;
    --ig-grid-ghost-header-background: #ad9d9d;
    --ig-grid-ghost-header-icon-color: #f4d45c;
}

    Demo

    API References

    Additional Resources

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