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.

    Blazor Grid Column Animations

    La Ignite UI for Blazor admite la animación de columnas durante eventos como ocultar o mover columnas. Cuando se configura la animación de columnas en la cuadrícula de datos Blazor, se activará la animación correspondiente para todas las celdas de esa columna.

    Ejemplo de animación de columnas de cuadrícula Blazor

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    CSS

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

    Propiedades de animación

    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.

    Fragmento de código

    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" />
    razor

    Referencias de API