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.

    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.

    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!

    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>
    `;
}
ts

    Web Components Hierarchical Grid Column Moving Overview Example

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Descripción general

    La función de movimiento de columnas está habilitada en un nivel por cuadrícula, lo que significa que IgcHierarchicalGridComponent podría tener columnas móviles o inamovibles. Esto se hace a través de la moving entrada de la IgcHierarchicalGridComponent.

    <igc-hierarchical-grid moving="true">
    ...
    <igc-row-island moving="true"></igc-row-island>
</igc-hierarchical-grid>
html
    Ignite UI for Web Components | CTA Banner

    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 que se va a mover y el segundo parámetro es la columna de destino. También acepta un tercer parámetro opcional Position (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);
typescript

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

    Tenga en cuenta que cuando se utiliza la función de movimiento de columnas, 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 función de movimiento de columnas 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 de la ColumnMovingEnd​ ​IgcHierarchicalGridComponent 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 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>
html
    constructor() {
    var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcHierarchicalGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}
typescript
    public onColumnMovingEnd(event) {
    if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
        event.detail.cancel = true;
    }
}
typescript

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

    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;
}
css

    Demo

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API References

    Additional Resources

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