Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.

    Web Components Resumen del movimiento de columnas de cuadrícula

    La cuadrícula de datos de Ignite UI for Web Components admite la capacidad de mover columnas, lo que le brinda flexibilidad sobre cómo desea mostrar sus columnas con respecto al orden de las columnas que se muestran.

    Ejemplo de movimiento de columna de cuadrícula de Web Components

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    El movimiento de columnas en la cuadrícula de datos de Ignite UI for Web Components está activado de forma predeterminada y se puede controlar estableciendo la columnMovingMode propiedad de la cuadrícula. Esta propiedad tiene dos opciones, Deferred o None. Deferred permitirá el movimiento de columnas, mientras que None deshabilitará el movimiento de columnas para toda la cuadrícula.

    Cuando el movimiento de columnas está configurado en Deferred, aparecerá un separador mientras se mueve una columna. Al mover una columna, una vez que se suelta el puntero del mouse, la columna movida tomará el lugar de la columna ubicada a la derecha del separador. Este separador también se puede personalizar en ancho y color mediante las propiedades columnMovingSeparatorWidth y columnMovingSeparatorBackground, respectivamente.

    También puedes animar los movimientos de las columnas, si lo deseas. Esto se puede hacer configurando la propiedad columnMovingAnimationMode de la cuadrícula. Las animaciones no están activadas de forma predeterminada.

    Fragmento de código

    A continuación, se muestra cómo implementar el movimiento de columnas en la cuadrícula de datos de Ignite UI for Web Components con movimiento de columna diferido, animaciones habilitadas y un separador de 5 px de ancho:

    import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';
    import { ColumnMovingMode } from 'igniteui-webcomponents-grids';
    ts
    <igc-data-grid id="grid"
        height="100%"
        width="100%"
        column-moving-mode="Deferred"
        column-moving-animation-mode="SlideOver"
        column-moving-separator-width="5">
    </igc-data-grid>
    html
    let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
    grid1.dataSource = data;
    ts
    Ignite UI for Web Components | CTA Banner

    Referencias de API