Animations

TreeGrid documentation

Since 13.0 it is possible to define animations for various TreeGrid actions like row children expand or dialog show.
The animations are defined in root tag <Animations> by assigning the animation to the action.
For example <Animations Expand="#Transparent, #Overflow, #ExpandH 100ms, 200, #Show 100ms"/>.
The animation definition string can contain more animations, comma separated, that are run one by one.
The animations has the same syntax as standard CSS animation attribute, it must contain at least the animation-name and animation-duration.
If the animation is defined as single class without duration, it is standard CSS class that is added to the animated tag class attribute.
If the animation is defined as single number, it waits for given number of milliseconds.
If the animation-name or CSS class name contains "#", it is replaced by actual TreeGrid Style prefix.
For above example and Standard style it does: 1) adds TSTransparent and TSOverflow CSS classes, 2) runs @keyframe TSExpandH for 100ms, 3) waits for 200ms, 4) runs @keyframe TSShow for 100ms.
After the animation ends, it is always cleared from the tag, therefore it is not possible to use forwards animation-fill-mode.
The default CSS @keyframes and CSS classes used in animations are defined in Grid.css in every TreeGrid style.
It is possible to define and use any custom CSS classes and @keyframes for the animations.
Remember, animation is shown only if no JavaScript code is running during the animation time. If set to 1, no animation is run. Runs given animation on the HTML element.
After animation finishes it calls func. The func is called always, also if the animation fails, is canceled, or does not exist.
The animationcode is list of animations to run like defined in <Animations> tag. But it cannot contain the "#" to be replaced by TreeGrid style prefix.
If set noclr does not clear the element.style.animation, use for forwards animations.
Never run TGAnimation() for TreeGrid rows or cells! Use always AnimateRow and AnimateCell methods instead. Ends all row, cell and column animations in grid and calls their callbacks.
Call this method before manipulating grid data to ensure there is no pending changes due running animation.

Row animations

Row is animated in up to three independent horizontal parts, placed in left, middle and right columns sections.
Row children are animated together in up to three independent horizontal parts, placed in left, middle and right columns sections.

The most of the animations can be set for row and also to its children. To children is applied animation with suffix Children, e.g. ExpandChildren or DeleteChildren.
If the animation with Children suffix does not exist, the animation without suffix is used also for children.

If more selected or focused rows are manipulated together, to the animation name there is added suffix Rows, before any other suffix, e.g. DeleteRows or CopyRowsToChildren.
If the animation with Rows suffix does not exist, the animation without suffix is used also for selected or focused rows.

If the animation code starts by "@", it animates also row background color and during animation are the cell backgrounds cleared.
It can slow down the animations especially if used for child rows, see AnimateRowsColorMax.
If animations for rows actions like expand or delete are shown and its way.
0 - no, 1 - simple in-place, does not work in IE, 2 - replace in IE and simple in-place in other browsers, 3 - replace in all browsers = including height animation for single rows (slower).
Animations are run only if defined in <Animations> tag in data and also in used CSS style. Maximum of rows that will be animated at once (e.g. when deleting selected rows).
If the count of animated rows exceeds this maximum, no next row is animated.
If set to negative value, it is taken as positive, but if the count of animated rows exceeds this maximum, no rows are animated.
Every browser has its own limit of animations, if it is exceeded, the animations are turned off automatically, usually all of them.
Maximum of child rows that will be colored if animating background color by "@" in animation code.
If the count of animated rows exceeds this maximum, no next child row is colored.
If set to negative value, it is taken as positive, but if the count of colored rows exceeds this maximum, no row is colored.
A few of animations are never applied to row children (Select, Deselect).
Runs given animation for the row and childrenanimation for the row children.
After animation finishes it calls func. The func is called always, also if the animation fails, is canceled, or does not exist.
The animation and childrenanimation is the animation name like "Expand" or "CopyFrom" or any custom animation defined in <Animations>.
The row can be also array of rows to run the animations for all of them, in this case the func is called once after all animations finish.
The row can be also array of arrays of animation parameters, e.g. AnimateRow([[row1,"anim1"],[row2,"anim2","animch2"],[rows,"anim3"],...]); In this case the other parameters are ignored.
On start it finishes all the row and cells previous animations and calls their callbacks.
If called with null for both animation and childrenanimation, it finishes all the row and cells previous animations. But if one of them is set, but the animation does not exist, it does not finish the previous animations.
Animation run when the row is shown (on Action Show).
Animation ShowRows sets animation for showing selected or focused rows.
Animation ShowFilter sets animation for showing rows by filter.
Animations ShowChildren, ShowRowsChildren, ShowFilterChildren set animation for children of the row being shown.
Animation run when the row is hidden (on Action Hide).
Animation HideRows sets animation for hiding selected or focused rows.
Animation HideFilter sets animation for hiding rows by filter.
Animations HideChildren, HideRowsChildren and HideFilterChildren set animation for children of the row being hidden.
Animation run when the row is added to grid (on Action AddRow).
Animation AddRows sets animation for adding more rows.
Animations AddChildren and AddRowsChildren set animation for children of the row being added, if added with children.
Animation run on destination (added) row when the row is copied (on drag action like DragCopy or copy action like CopyRow).
Animation CopyRowsTo sets animation for copying selected or focused rows.
Animations CopyToChildren and CopyRowsToChildren set animation for children of the row being copied.
Animations CopyToOutside, CopyRowsToOutside, CopyToOutsideChildren and CopyRowsToOutsideChildren set animation if the row(s) is copied from another grid.
Animation Copy...To... is run simultaneously with animation Copy...From..., as both run on different rows.
Animation run on source row (unchanged) when the row is copied (on drag action like DragCopy or copy action like CopyRow).
Animation CopyRowsFrom sets animation for copying selected or focused rows.
Animations CopyFromChildren and CopyRowsFromChildren set animation for children of the row being copied.
Animations CopyFromOutside, CopyRowsFromOutside, CopyFromOutsideChildren and CopyRowsFromOutsideChildren set animation if the row(s) is copied to another grid.
Animation Copy...To... is run simultaneously with animation Copy...From..., as both run on different rows.
Animation run on destination (added or moved) row when the row is moved (on drag action like DragRow).
Animation MoveRowsTo sets animation for moving selected or focused rows.
Animations MoveToChildren and MoveRowsToChildren set animation for children of the row being moved.
Animations MoveToOutside, MoveRowsToOutside, MoveToOutsideChildren and MoveRowsToOutsideChildren set animation if the row(s) is moved from another grid.
Animation Move...To... is run on the same row after animation Move...From... finishes.
Animation Move...ToOutside... is run simultaneously with animation Move...FromOutside..., as both run on different rows.
Animation run on source (added or moved) row when the row is moved (on drag action like DragRow).
Animation MoveRowsFrom sets animation for moving selected or focused rows.
Animations MoveFromChildren and MoveRowsFromChildren set animation for children of the row being moved.
Animations MoveFromOutside, MoveRowsFromOutside, MoveFromOutsideChildren and MoveRowsFromOutsideChildren set animation if the row(s) is moved to another grid.
Animation Move...To... is run on the same row after animation Move...From... finishes.
Animation Move...ToOutside... is run simultaneously with animation Move...FromOutside..., as both run on different rows.
Animation Move...From delays the row moving, the row is moved after the animation finishes! Animation run when the row is deleted from grid (on Action DeleteRow).
Animation DeleteVisible sets animation for deleting row if set ShowDeleted='1'.
Animation DeleteRows and DeleteVisibleRows sets animation for deleting selected rows.
Animations DeleteChildren, DeleteVisibleChildren, DeleteRowsChildren and DeleteVisibleRowsChildren set animation for children of the row being deleted.
If run for removing row, the row is physically removed after the animation finishes! Animation run when the row is undeleted and shown back in grid (on Action UndeleteRow).
Animation UndeleteVisible sets animation for undeleting row if set ShowDeleted='1'.
Animation UndeleteRows and UndeleteVisibleRows sets animation for undeleting selected rows.
Animations UndeleteChildren, UndeleteVisibleChildren, UndeleteRowsChildren and UndeleteVisibleRowsChildren set animation for children of the row being undeleted.
Animation run when the row is selected (on Action SelectRow).
Animation run when the row is unselected (on Action DeselectRow).
Animation run when single row's children are expanded (on Action Expand).
It is usually set only for children as animation ExpandChildren.
Animation run when single row's children are collapsed (on Action Collapse).
It is usually set only for children as animation CollapseChildren.

Column animations

Column is not animated en bloc, it animates every cell independently.

If more selected or focused columns are manipulated together, to the animation name there is added suffix Cols instead of Col, e.g. DeleteCols or HideCols.
If the animation with Cols suffix does not exist, the animation with Col suffix is used also for selected or focused columns.
If animations for columns actions like show or delete are shown.
If set to 2, it animates also right side button and left side tree in cells. It is animated separately.
Animations are run only if defined in <Animations> tag in data and also in used CSS style. Maximum of columns that will be animated at once (e.g. when deleting selected columns).
If the count of animated columns exceeds this maximum, no next column is animated.
If set to negative value, it is taken as positive, but if the count of animated columns exceeds this maximum, no columns are animated.
For animating columns there is applied also limit for cell animations AnimateCellsMax.
Every browser has its own limit of animations, if it is exceeded, the animations are turned off automatically, usually all of them.
Runs given animation for the column col.
After animation finishes it calls func. The func is called always, also if the animation fails, is canceled, or does not exist.
The animation is the animation name like "Hide" or "Delete" or any custom animation defined in <Animations>.
The col can be also array of column names to run the animations for all of them, in this case the func is called once after all animations finish.
The col can be also array of arrays of animation parameters, e.g. AnimateCol([[col1,"anim1"],[col2,"anim2"],[cols,"anim3"],...]); In this case the other parameters are ignored.
On start it finishes all the rows and cells previous animations and calls their callbacks.
If called with null for animation, it finishes all the rows and cells previous animations. But if it is set, but the animation does not exist, it does not finish the previous animations.
Animation run after column is shown (e.g. on Action ShowCol).
Animation ShowCols sets animation for showing selected or focused columns.
Animation run before column is hidden (e.g. on Action HideCol).
Animation HideCols sets animation for hiding selected or focused columns.
Animation HideCol delays the column hiding, the column is hidden after the animation finishes! Animation run when the column is added to grid (on Action AddCol).
Animation AddCols sets animation for adding more columns.
Animation run on destination (added) column when the column is copied (on drag action like ColCopy or copy action like CopyCol).
Animation CopyColsTo sets animation for copying selected or focused columns.
Animation CopyColTo is run simultaneously with animation CopyColFrom, as both run on different columns.
Animation run on source (unchanged) column when the column is copied (on drag action like ColCopy or copy action like CopyCol).
Animation CopyColsFrom sets animation for copying selected or focused columns.
Animation CopyColTo is run simultaneously with animation CopyColFrom, as both run on different columns.
Animation run on column after it is moved (on drag action like ColMove).
Animation MoveColsTo sets animation for moving selected or focused columns.
Animation MoveCol...To is run on the same column after animation MoveCol...From finishes.
Animation run on column before it is moved (on drag action like ColMove).
Animation MoveColsFrom sets animation for moving selected or focused columns.
Animation MoveCol...To is run on the same column after animation MoveCol...From finishes.
Animation MoveCol...From delays the column moving, the column is moved after the animation finishes! Animation run when the column is deleted from grid (on Action DeleteCol).
Animation DeleteVisible sets animation for deleting column if set ShowDeleted='1'.
Animations DeleteCols and DeleteVisibleCols set animation for deleting selected columns.
Animation DeleteCol delays the column deleting, the column is deleted after the animation finishes! Animation run when the column is undeleted back in grid (on Action UndeleteCol).
Animation UndeleteVisible sets animation for undeleting column if set ShowDeleted='1'.
Animation UndeleteCols and UndeleteVisibleCols sets animation for undeleting selected columns.
Animation run when column is selected (on Action SelectCol).
Animation run when column is unselected (on Action DeselectCol).

Cell animations

The cell is animated en bloc, but without left side tree and right side Button if present.
If set AnimateCells='2' (or AnimateCols='2' for column animations), it animates also the left side tree and right side button, but independently. The left side tree can have set specific animation by suffix "Left" and the right side Button by suffix "Right", e.g. HideColRight. If animation with suffix is not defined, the animation without suffix is used.
If animations for cells actions like edit or clear are shown.
If set to 2, it animates also right side button and left side tree in cells. It is animated separately.
Animations are run only if defined in <Animations> tag in data and also in used CSS style. Maximum of cells that will be animated at once (e.g. when clearing selected cells).
If the count of animated cells exceeds this maximum, no next cell is animated.
Every browser has its own limit of animations, if it is exceeded, the animations are turned off automatically, usually all of them.
Runs given animation for the cell.
After animation finishes it calls func. The func is called always, also if the animation fails, is canceled, or does not exist.
The animation is the animation name like "Expand" or "CopyFrom" or any custom animation defined in <Animations>.
On start it finishes all the row and cell previous animations and calls their callbacks.
If called with null for animation, it finishes all the row and cell previous animations. But if it is set, but the animation does not exist, it does not finish the previous animations.
Rerenders the cell and runs given animation for the change. animation is base animation name like "Edit", "Fill" or "Clear".
It first runs animation animation+"From", next renders the cell and finaly runs animation animation+"To".
Animation run when focusing cell (on Action Focus).
There are special animation definitions for every cell type (like Text / Lines / Bool / ... ) and row Kind (Data / Header / Filter / Space).
For example for Bool type in space row are tested these animations in this order FocusSpaceBool, FocusSpace, FocusBool, Focus.
Animation run when cell is found by search (by SearchAction Find).
There are special animation definitions for every cell type (like Text / Lines / Bool / ... ) and row Kind (Data / Header / Filter / Space).
For example for Bool type in space row are tested these animations in this order FocusSpaceBool, FocusSpace, FocusBool, Focus.
Animation run when cell value is copied to clipboard by ctrl+C (by action Copy).
There are special animation definitions for every cell type (like Text / Lines / Bool / ... ) and row Kind (Data / Header / Filter / Space).
For example for Bool type in space row are tested these animations in this order FocusSpaceBool, FocusSpace, FocusBool, Focus.
Animation run after single cell value is changed by editing or similar user interaction, e.g. Bool click or Enum/Defaults/Date select.
There are special animation definitions for every cell type (like Text / Lines / Bool / ... ) and row Kind (Data / Header / Filter / Space).
For example for Bool type in space row are tested these animations in this order EditSpaceBoolTo, EditSpaceTo, EditBoolTo, EditTo.
Edit...To is run after Edit...From. Edit...From is run with old cell value and Edit...To with new cell value.
Animation run before single cell value is changed by editing or similar user interaction, e.g. Bool click or Enum/Defaults/Date select.
There are special animation definitions for every cell type (like Text / Lines / Bool / ... ) and row Kind (Data / Header / Filter / Space).
For example for Bool type in space row are tested these animations in this order EditSpaceBoolFrom, EditSpaceFrom, EditBoolFrom, EditFrom.
Edit...To is run after Edit...From. Edit...From is run with old cell value and Edit...To with new cell value.
Animation run after cell value is changed by calculating editable formula (EFormula) or by calculating not editable Formula if set CalculatedChanges. Similar to EditTo.
Animation run before cell value is changed by calculating editable formula (EFormula) or by calculating not editable Formula if set CalculatedChanges. Similar to EditFrom.
Animation run after cell value is changed by another action, e.g. change in Gantt or moving or copying cell range to (actions CopyFocus / MoveFocus). Similar to EditTo.
Animation run before cell value is changed by another action, e.g. change in Gantt or moving or copying cell range to (actions CopyFocus / MoveFocus). Similar to EditFrom.
Animation run after cell value is changed by filling cell range to (actions like FocusFillRowCol). Similar to EditTo.
Animation run before cell value is changed by filling cell range to (actions like FocusFillRowCol). Similar to EditFrom.
Animation run after cell value is changed by pasting value(s) from clipboard (action Paste). Similar to EditTo.
Animation run before cell value is changed by pasting value(s) from clipboard (action Paste). Similar to EditFrom.
Animation run after cell is marked by search (by SearchAction Mark). Similar to EditTo.
Animation run before cell is marked by search (by SearchAction Mark). Similar to EditFrom.
Animation run after cell value is cleared by any action like clear cell, exclude, move cell range, fill, .... Similar to EditTo. It animates empty cell.
Animation run before cell value is cleared by any action like clear cell, exclude, move cell range, fill, .... Similar to EditFrom.

Animations for undo / redo

See also Undo & Redo If animations for undo and redo shown.
Undo and redo animations are affected also by AnimateRows, AnimateCols and AnimateCells.
Animations are run only if defined in <Animations> tag in data and also in used CSS style. Animation run when showing row action is undone. It means the row is hidden.
Animation UndoShowChildren sets animation for children of the row being hidden.
Animation run when showing row undone action is done again. It means the row is shown.
Animation RedoShowChildren sets animation for children of the row being shown.
Animation run when hiding row action is undone. It means the row is shown.
Animation UndoHideChildren sets animation for children of the row being shown.
Animation run when hiding row undone action is done again. It means the row is hidden.
Animation RedoHideChildren sets animation for children of the row being hidden.
Animation run when adding new row or copying row action is undone. It means the added row is removed.
Rows are removed one by one including children, so no action UndoAddChildren is available.
The row is physically removed after the animation finishes! Animation run when adding new row or copying row undone action is done again. It means the row is added.
Rows are added one by one including children, so no action RedoAddChildren is available. Animation run when moving row action is undone. It means the row is moved to original position.
Animation UndoMoveChildren sets animation for children of the row being moved.
Animation run when moving row undone action is done again. It means the row is moved to the new position.
Animation RedoMoveChildren sets animation for children of the row being moved.
Animation run when deleting row action is undone. It means the row is undeleted.
Animation UndoDeleteVisible sets animation for undeleting row if set ShowDeleted='1'.
Rows are undeleted one by one including children, so no action UndoDeleteChildren is available. Animation run when deleting row undone action is done again. It means the row is deleted.
Animation RedoDeleteVisible sets animation for deleting row if set ShowDeleted='1'.
Rows are deleted one by one including children, so no action RedoDeleteChildren is available.
If run for removing row, the row is physically removed after the animation finishes! Animation run when undeleting row action is undone. It means the row is deleted.
Animation UndoUndeleteVisible sets animation for deleting row if set ShowDeleted='1'.
Rows are deleted one by one including children, so no action UndoUndeleteChildren is available. Animation run when undeleting row undone action is done again. It means the row is undeleted.
Animation RedoUndeleteVisible sets animation for undeleting row if set ShowDeleted='1'.
Rows are undeleted one by one including children, so no action RedoUndeleteChildren is available. Animation run when selecting row action is undone. It means the row is unselected.
Animation run when selecting row undone action is done again. It means the row is selected.
Animation run when unselecting row action is undone. It means the row is selected.
Animation run when unselecting row undone action is done again. It means the row is unselected.
Animation run when resizing row action is undone. It means the row is resized to original height.
It is not possible to animate the row resizing (changing the row height by animation). Animation run when resizing row undone action is done again. It means the row is resized to the new height.
It is not possible to animate the row resizing (changing the row height by animation). Animation run when showing column action is undone. It means the column is hidden.
Animation is run only if FastColumns = '1'. Animation run when showing column undone action is done again. It means the column is shown.
Animation run when hiding column action is undone. It means the column is shown.
Animation run when hiding column undone action is done again. It means the column is hidden.
Animation is run only if FastColumns = '1'. Animation run when adding new column or copying column action is undone. It means the added column is removed.
The column is physically removed after the animation finishes! Animation run when adding new column or copying column undone action is done again. It means the column is added.
Animation run when moving column action is undone. It means the column is moved to original position.
Animation run when moving column undone action is done again. It means the column is moved to the new position.
Animation run when deleting column action is undone. It means the column is undeleted.
Animation UndoDeleteVisible sets animation for undeleting column if set ShowDeleted='1'.
Animation run when deleting column undone action is done again. It means column column is deleted.
Animation RedoDeleteVisible sets animation for deleting column if set ShowDeleted='1'.
If run for removing column, the column is physically removed after the animation finishes! Animation run when undeleting column action is undone. It means the column is deleted.
Animation UndoUndeleteVisible sets animation for deleting column if set ShowDeleted='1'.
Animation run when undeleting column undone action is done again. It means the column is undeleted.
Animation RedoUndeleteVisible sets animation for undeleting column if set ShowDeleted='1'.
Animation run when selecting column action is undone. It means the column is unselected.
Animation run when selecting column undone action is done again. It means the column is selected.
Animation run when unselecting column action is undone. It means the column is selected.
Animation run when unselecting column undone action is done again. It means the column is unselected.
Animation run when resizing column action is undone. It means the column is resized to original width.
It is not possible to animate the column resizing (changing the column width by animation). Animation run when resizing column undone action is done again. It means the column is resized to the new width.
It is not possible to animate the column resizing (changing the column width by animation). Animation run after cell value change by any action is undone. It means the cell value is changed to original value. Similar to EditTo.
Animation run after cell value change by any undone action is done again. It means the cell value is changed to the new value. Similar to EditTo.
Animation run before cell value change by any action is undone. It means the cell value is changed to original value. Similar to EditFrom.
Animation run before cell value change by any undone action is done again. It means the cell value is changed to the new value. Similar to EditFrom.
Animation run when cell dynamic style change action is undone. It means the border attributes are changed to original value. Animation run when cell dynamic border change undone action is done again. It means the border attributes are changed to the new value. Animation run when cell dynamic border change action is undone. It means the style attributes are changed to original value. Animation run when cell style dynamic style undone action is done again. It means the style attributes are changed to the new value.

Animations for server side changes

They are disabled by default. Enable them by setting 9. bit (&256) in Update in <Changes> or ChangesUpdate in <Cfg>, for example <Changes Update="257" />.
Animation run after the row is added to grid by server side changes (<Changes>).
Animation run after the row is moved to new position in grid by server side changes (<Changes>).
Animation run after the row is deleted from grid by server side changes (<Changes>).
Animation DeletedVisible sets animation for deleting row if set ShowDeleted='1'.
Animation run after the row is selected by server side changes (<Changes>).
Animation run after the row is unselected by server side changes (<Changes>).
Animation run after the row is expanded and its children are shown by server side changes (<Changes>).
Animation run after the row is collapsed and its children are hidden by server side changes (<Changes>).
Animation run before the cell value is changed to new value by server side changes (<Changes>). Cell animation, similar to EditTo
Animation run after the cell value is changed to new value by server side changes (<Changes>). Cell animation, similar to EditFrom

Dialog animations

If animations for showing and hiding dialogs like menu or calendar are shown.
For 2 it also closes dialog header when closing dialog - to let to animate cell change.
Animations are run only if defined in <Animations> tag in data and also in used CSS style. Animation run when showing menu for cell combo (Enum, Select / Defaults and Button / List) and for Filter operator.
Animation ShowMenuUp sets animation for menu shown above the cell.
Animation run when closing menu shown for cell combo (Enum, Select / Defaults and Button / List) and for Filter operator.
Animation HideMenuUp sets animation for menu shown above the cell.
Animation run when showing popup menu on mouse position (cell or Gantt Menu).
Animation ShowPopupUp sets animation for menu shown above the cell.
Animation run when hiding popup menu shown on mouse position (cell or Gantt Menu).
Animation HidePopupUp sets animation for menu shown above the cell.
Animation run when showing modal configuration menu (configuration, columns/rows, export, print, print pdf).
Animation run when hiding modal configuration menu (configuration, columns/rows, export, print, print pdf).
Animation run when showing tip for the cell or Gantt item.
Animation run when hiding tip for the cell or Gantt item.
Animation run when showing cell value as hint.
Animation ShowHintVert is set for hint in Lines type cell, when the cell is overflown vertically.
Animation run when hiding cell value as hint.
Animation HideHintVert is set for hint in Lines type cell, when the cell is overflown vertically.
Animation run when showing grid modal message by ShowMessageTime.
Message is animated only if no JavaScript is running during the animation time. Animation run when hiding grid modal message shown by ShowMessageTime.
Animation run when showing calendar for Date cell.
Animation ShowCalendarUp sets animation for calendar shown above the cell.
Animation run when hiding calendar shown for Date cell.
Animation HideCalendarUp sets animation for calendar shown above the cell.
Animation run before switching to days (the first) page in calendar dialog.
Animation run after switching to days (the first) page in calendar dialog.
Animation run before switching to months (the second) page in calendar dialog.
Animation run after switching to months (the second) page in calendar dialog.
Animation run before switching to the next or previous month in the days (the first) page in calendar dialog.
Animation run after switching to the next or previous month in the days (the first) page in calendar dialog.
Animation run before switching to the next or previous years in the months (the second) page in calendar dialog. It animates the whole dialog!
Animation run after switching to the next or previous years in the months (the second) page in calendar dialog. It animates the whole dialog!