[!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
The Ignite UI for Blazor Data Table / Data Grid supports Column Animation during events like Column Hiding or Column Moving. When Column Animation on the Blazor data grid is set, the corresponding animation will fire for all of the cells in that column.
Blazor Grid Column Animations Example
Animation Properties
Each column animation property is listed and described below:
ColumnAddingAnimationMode
: When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in.ColumnExchangingAnimationMode
: When a column is exchanged, you have the option to have the exchanged column header and its cells slide to the left, right, top, or bottom. There are also options to have it fade as well as slide and fade.ColumnHidingAnimationMode
: When a column is hidden, you have the option to have the column header and its cells slide out to the left, right, top, or bottom. There are also options to have it fade out as well as slide and fade out.ColumnMovingAnimationMode
: When a column is moved, you have the option to have the column header and its cells slide over.ColumnPropertyUpdatingAnimationMode
: When a column's property changes, you have the option to have that property change animate by interpolating or deeply interpolating its change.ColumnShowingAnimationMode
: When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in.
Code Snippet
The following demonstrates the implementation of each of the column animations described in this topic:
<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
ColumnAddingAnimationMode
ColumnExchangingAnimationMode
ColumnHidingAnimationMode
ColumnMovingAnimationMode
ColumnPropertyUpdatingAnimation