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

    Blazor Grid Column Animations

    La Ignite UI for Blazor Data Table/Data Grid admite la animación de columnas durante eventos como la ocultación de columnas o el movimiento de columnas. Cuando se establece la animación de columna en la cuadrícula de datos Blazor, la animación correspondiente se activará para todas las celdas de esa columna.

    Blazor Grid Column Animations Example

    Animation Properties

    Cada propiedad de animación de columna se enumera y describe a continuación:

    • ColumnAddingAnimationMode: cuando se agrega una columna, tiene la opción de que el encabezado de la columna y sus celdas se deslicen desde la izquierda, derecha, arriba o abajo. También hay opciones para que aparezca gradualmente, así como para que se deslice y aparezca gradualmente.
    • ColumnExchangingAnimationMode: cuando se intercambia una columna, tiene la opción de que el encabezado de la columna intercambiada y sus celdas se deslicen hacia la izquierda, derecha, arriba o abajo. También hay opciones para que se desvanezca, así como para que se deslice y se desvanezca.
    • ColumnHidingAnimationMode: cuando una columna está oculta, tiene la opción de que el encabezado de la columna y sus celdas se deslicen hacia la izquierda, derecha, arriba o abajo. También hay opciones para que se desvanezca, así como para que se deslice y se desvanezca.
    • ColumnMovingAnimationMode: cuando se mueve una columna, tiene la opción de hacer que el encabezado de la columna y sus celdas se deslicen.
    • ColumnPropertyUpdatingAnimationMode: cuando la propiedad de una columna cambia, tiene la opción de animar ese cambio de propiedad interpolando o interpolando profundamente su cambio.
    • ColumnShowingAnimationMode: cuando se agrega una columna, tiene la opción de que el encabezado de la columna y sus celdas se deslicen desde la izquierda, derecha, arriba o abajo. También hay opciones para que aparezca gradualmente, así como para que se deslice y aparezca gradualmente.

    Code Snippet

    A continuación se demuestra la implementación de cada una de las animaciones de columna descritas en este tema:

    <IgbDataGrid Height="100%" Width="100%"
    DataSource="DataSource"
    ColumnAddingAnimationMode="ColumnShowingAnimationMode.SlideFromLeft"
    ColumnExchangingAnimationMode="ColumnExchangingAnimationMode.SlideToRight"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToTopAndFadeOut"
    ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
    ColumnPropertyUpdatingAnimationMode="ColumnPropertyUpdatingAnimationMode.Interpolate"
    ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromBottomAndFadeIn" />

    API References