[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Descripción general del movimiento de columnas Blazor Grid

    La Ignite UI for Blazor Data Grid admite la capacidad de mover columnas, lo que le brinda flexibilidad sobre cómo desea mostrarlas con respecto al orden en que se muestran.

    Blazor Grid Column Moving Example

    El movimiento de columnas en la Ignite UI for Blazor Data Grid está activado de forma predeterminada y se puede controlar configurando la propiedad ColumnMovingMode 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.

    Code Snippet

    A continuación se muestra cómo implementar el movimiento de columnas en la Ignite UI for Blazor Data Grid con movimiento de columnas diferido, animaciones habilitadas y un separador de 5 píxeles de ancho:

    <IgbDataGrid Height="100%" Width="100%"
        DataSource="DataSource"
        ColumnMovingMode="ColumnMovingMode.Deferred"
        ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
        ColumnMovingSeparatorWidth="5" />
    

    API References