News in version
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
Documentation
Search in documentation
TreeGrid versions compatibility

Changes log (txt file) Using custom CSS from 13.3 to 14.0 Upgrading from 9.3 to 10.0 Upgrading from 5.9 to 6.0

Using in JavaScript frameworks

Angular Ember Express React Svelte Vue Other frameworks NodeJS server SalesForce LWC

Creating grid

Simple examples Basic information Creating grid Deleting grid Reloading grid Rendering grid Accessing grid by API

Data & communication
Data communication with server

Communication types AJAX communication AJAX SOAP envelope Submit communication Directly included data Data from JavaScript Cross domain / local load by JSONP Sessions (AJAX) Server response (AJAX) Synchronous communication (AJAX) Caching (AJAX) API (AJAX)

Download data

Settings for data download Layout XML structure Data XML structure

Upload data

Settings for data upload API for upload XML structure sent to server

Changing data from server

XML structure of download changes XML structure of request for a cell Synchronizing data with server

Input / output data formats

Complete list of tags Internal XML format Short XML format Extra short XML format DTD XML format JSON format

Cells
Cell basics

Cell type Cell format Dynamic format Dynamic type Cell value Reading / writing attributes by API Cell HTML Cell default Range or more values in one cell Cell with link URL Cell hint Cell tooltip / title Cell popup menu

Cell editing and changing values

Cell editability Dynamic editing Locking Defaults list Suggest list (auto complete) Tags input Changing cell value Mass cell change Clearing cells Editing cells Controlling <input> tag by JavaScript Input validation and restrictions Side checkbox Cell selecting

Calculations - cell formulas

Basics Formulas Mathematical functions Aggregate functions Special functions for actions Custom functions

Calculations - editable cell formulas

Basics Suggest list (auto complete) Defined names Actions for choosing cells Conditional functions Lookup functions Cell reference functions Logical functions Informational functions Mathematical functions Trigonometry functions Rounding numbers Number conversions String functions Date functions Summary functions Custom functions

Cell side buttons

Introduction Right side Button Left side Icon

Cell spanning

Column span Row span Dynamic spanning

Cell style and color

Basic grid style Sizing and scaling - responsive design Dynamic cell style attributes Cell CSS class Cell background color Dynamic cell border Cell HTML style Row color alteration Cell mouse cursor

Editable cell images

Insert image Edit image

Cell types
Automatic type - Auto String - Text, Lines & Pass
Number - Int & Float

Format Localization

Date and time - Date

Format Calendar component Dates dialog Localization

List & combo - Enum & Radio

Introduction Definition Related lists Enum specific Radio specific

Checkbox - Bool
Action button - Button

Introduction Basic clickable button Switch button Radio / tab button Menu button Combo switch button Combo radio / tab button Special Space rows with buttons

Panel with more buttons - Panel

Definition Standard fast panel Custom panel

HTML and special types

Html type EHtml type (editable) Icon type Abs type List type Editable Link type Editable Img type DropCols type Upload File type

Columns

Column basics Column index Column visibility Column visibility menu Column selecting Column tree Auto column tree Column position and moving Column adding and copying Column deleting Column width Column API

Rows
Row basics

Rows by functionality Rows by position Row name Row id Row index

Default rows

Description Example of default rows Example of changing default row Attributes

Row tree

Tree attributes Actions & API for expand / collapse

Row identification

Setting row id attribute Row id attribute in tree Row id created from cell values API for row ids

Row visibility
Row adding and copying

Five ways of adding rows to grid Adding and copying restrictions Adding new empty rows Copying existing rows

Row deleting Row moving and dragging Row selecting Row height Row API Space rows
Features
Sorting rows

Sort settings Controlling sort position Comparing strings Sorting actions Sorting API

Grouping rows to tree

Group settings Creating groups Comparing strings Created group rows <D Group='1'/> User interface to choose grouping Grouping actions and API

Filtering rows

Filter settings Comparing strings User interface to choose filter Filter actions and API

Searching in rows and cells

Search settings User interface for search Search actions and API

Printing grid

Print settings Choosing items to print Page size Print API

Print / export to PDF

Introduction Client side settings Printing options Client side API Server side API Data sent from client to server

Export to Excel or CSV

Introduction and export types Basic settings Styling export XLSX export Gantt export CSV export Old XLS / XHTML export Export API Communication with server Client export Server export

Import from Excel

Basic settings Sheets manipulation

Copy & paste rows via clipboard

Copy & paste permissions Copying to clipboard Pasting from clipboard

Master - detail grids

Introduction External master - detail grids Nested master - detail grids Synchronizing grids Other attributes for master - detail

Pivot tables

Pivot attributes & API Pivot formulas

External objects (custom JavaScript objects) Undo & Redo
Gantt and bar chart
Gantt objects

Gantt objects list Display settings Edit settings

Main bar

Definition of main bar and plans Main bar as Task Edit settings Main bar content and side html Tip on mouse hover Vertical position and height Style specific attributes API to manipulate Main bars Actions Side text (deprecated) Real Flow (deprecated)

Run bar

GanttRun Definition Extended definition Run bar as Task Edit settings Save format Selecting Run boxes Run box content and side html Tip on mouse hover Box identification Vertical position and height Style specific attributes Overlaid (Error) boxes Containers for more boxes Dragging - moving and resizing API to manipulate Run boxes Actions Run special formulas

Summary task

Main for Main Main for Run Editable Main Editable Run

Gantt icons - Flag & Point

Flag - icon with text Point - math points

Gantt display objects

Header - column captions Cell and column Background Vertical movable Line Mark & Progress line

Gantt zoom

Zoom options Chart size limits Zoom selection Paging in Gantt chart

Dependency, constraints & schedule

Introduction Data units Defining dependencies Dependency colors and shapes Changing dependencies Correcting dependencies Scheduling algorithm Project date constraints Task date constraints Critical path - Slack (Float)

Gantt calendars

Global base calendar Local calendar Calendar list Calendars dialog Other settings

Gantt resources

Resources list Resources assign Resources filter Resources calculations Availability chart Resource usage chart Generated resource usage chart

Gantt popup menu Gantt API
Line and XY points charts

Charts in grid cells Chart JSON definition Base chart settings Basic attributes Size Axis and caption Individual chart lines Data sources Visual settings API for standalone usage

Paging in large grids
Paging root rows

Paging types and attributes Auto adding root pages API for paging

Pager components

Side pager Side pager type Pages Side pager type Gantt Side pager type Custom Pager with navigation buttons & edit Pager as list of page indexes

Paging in tree

ChildPaging - load / render on expand MaxChildren - limit children count ChildParts - load / render on scroll

Paging columns

Paging types and attributes Auto adding column pages API for column paging

Server paging

Server paging for root rows Server communication in root paging Root paging in very large tables Server paging in tree Server communication in tree paging XML Request for Data in root paging XML Download Data in root paging XML Request for root Page / children XML Download root Page / children API for server paging

TreeGrid DLL/SO for server paging

Introduction Compatibility with TreeGrid control Using TreeGrid server DLL/SO ASP.NET C# ASP.NET VB PHP JSP Java TreeGrid server concepts Function reference Calculations

JSON menus and dialogs
JSON menu description JSON menu definition example
Menu settings

Base attributes Visual settings Key navigation Behavior Size and scroll

Menu item settings

Base attributes Clickable item Inactive caption Collapsible sub level Popup sub menu Columns Bool item Enum item Edit item

Custom menu in JavaScript

Show custom menu Custom menu position Custom menu advanced settings Custom menu JavaScript events Custom menu JavaScript methods

Calendar dialog Custom calendar & JavaScript events Custom dialog in JavaScript
Global grid settings
Grid size and scroll

Default behavior Maximize grid height and width Update size according to the content Let a user to control the grid size Widths of individual sections Other scrolling attributes and API

Media rules - responsive design
Languages

Language & regional setup (Text.xml) Translate texts dynamically Change language

Grid cursor - Focus & hover

Focused cell and row Focused cell range Move and copy focused cells Filling cell values by dragging Tabulator navigation Key navigation Cursor look - focus & hover

Selecting rows, cells and columns

Selecting base Selecting rows Selecting cells Selecting columns

Global settings

Status messages Configuration menus Configuration menu - options Configuration menu - columns Configuration menu - print / PDF Configuration menu - export Default toolbar Useful API function Help file

Animations

Animations base Row animations Column animations Cell animations Animations for undo / redo Animations for server side changes Dialog animations

Grid configuration in cookies
Mouse & key events & actions

List of event handler types TreeGrid mouse events Mouse event names Key and mouse button prefixes Touch event names Event targets Assigning event actions / callbacks Event action parameters Action name suffix Calling actions from JavaScript Creating custom actions Focused vs. Actual cell TreeGrid key events JavaScript API events

Mouse API event TreeGrid files
Debugging and testing

Debug window Automated testing

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.
new 13.0 <Cfg> bool

SuppressAnimations

[0] Saved to cookies, avoid it by <Cfg SuppressAnimationsLap='1'/>
If set to 1, no animation is run.
new 13.0 Global func. void

TGAnimate

(Element element, string animationcode, function func, bool noclr)
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.
new 13.0 API method void

FinishAnimations

( )
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.
new 13.0 <Cfg> int

AnimateRows

[3]
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.
new 13.0 <Cfg> int

AnimateRowsMax

[10]
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.
new 13.0 <Cfg> int

AnimateRowsColorMax

[10]
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).
new 13.0 API method void

AnimateRow

(TRow row, string animation, string childrenanimation, function func)
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.
new 13.0 <Animations>

Show

["..."]
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.
new 13.0 <Animations>

Hide

["..."]
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.
new 13.0 <Animations>

Add

["..."]
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.
new 13.0 <Animations>

CopyTo

["..."]
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.
new 13.0 <Animations>

CopyFrom

["..."]
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.
new 13.0 <Animations>

MoveTo

["..."]
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.
new 13.0 <Animations>

MoveFrom

["..."]
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!
new 13.0 <Animations>

Delete

["..."]
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!
new 13.0 <Animations>

Undelete

["..."]
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.
new 13.0 <Animations>

Select

["..."]
Animation run when the row is selected (on Action SelectRow).
new 13.0 <Animations>

Deselect

["..."]
Animation run when the row is unselected (on Action DeselectRow).
new 13.0 <Animations>

Expand

["..."]
Animation run when single row's children are expanded (on Action Expand).
It is usually set only for children as animation ExpandChildren.
new 13.0 <Animations>

Collapse

["..."]
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.
new 13.0 <Cfg> int

AnimateCols

[1]
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.
new 13.0 <Cfg> int

AnimateColsMax

[10]
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.
new 13.0 API method void

AnimateCol

(string col, string animation, function func)
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.
new 13.0 <Animations>

ShowCol

["..."]
Animation run after column is shown (e.g. on Action ShowCol).
Animation ShowCols sets animation for showing selected or focused columns.
new 13.0 <Animations>

HideCol

["..."]
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!
new 13.0 <Animations>

AddCol

["..."]
Animation run when the column is added to grid (on Action AddCol).
Animation AddCols sets animation for adding more columns.
new 13.0 <Animations>

CopyColTo

["..."]
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.
new 13.0 <Animations>

CopyColFrom

["..."]
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.
new 13.0 <Animations>

MoveColTo

["..."]
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.
new 13.0 <Animations>

MoveColFrom

["..."]
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!
new 13.0 <Animations>

DeleteCol

["..."]
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!
new 13.0 <Animations>

UndeleteCol

["..."]
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.
new 13.0 <Animations>

SelectCol

["..."]
Animation run when column is selected (on Action SelectCol).
new 13.0 <Animations>

DeselectCol

["..."]
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.
new 13.0 <Cfg> int

AnimateCells

[1]
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.
new 13.0 <Cfg> int

AnimateCellsMax

[200]
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.
new 13.0 API method void

AnimateCell

(TRow row, string col, string animation, function func)
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.
new 13.0 API method void

RefreshCellAnimate

(TRow row, string col, string animation = "Change")
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".
new 13.0 <Animations>

Focus

["..."]
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.
new 13.0 <Animations>

Find

["..."]
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.
new 13.0 <Animations>

Copy

["..."]
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.
new 13.0 <Animations>

EditTo

["..."]
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.
new 13.0 <Animations>

EditFrom

["..."]
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.
new 13.0 <Animations>

CalculateTo

["..."]
Animation run after cell value is changed by calculating editable formula (EFormula) or by calculating not editable Formula if set CalculatedChanges. Similar to EditTo.
new 13.0 <Animations>

CalculateFrom

["..."]
Animation run before cell value is changed by calculating editable formula (EFormula) or by calculating not editable Formula if set CalculatedChanges. Similar to EditFrom.
new 13.0 <Animations>

ChangeTo

["..."]
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.
new 13.0 <Animations>

ChangeFrom

["..."]
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.
new 13.0 <Animations>

FillTo

["..."]
Animation run after cell value is changed by filling cell range to (actions like FocusFillRowCol). Similar to EditTo.
new 13.0 <Animations>

FillFrom

["..."]
Animation run before cell value is changed by filling cell range to (actions like FocusFillRowCol). Similar to EditFrom.
new 13.0 <Animations>

PasteTo

["..."]
Animation run after cell value is changed by pasting value(s) from clipboard (action Paste). Similar to EditTo.
new 13.0 <Animations>

PasteFrom

["..."]
Animation run before cell value is changed by pasting value(s) from clipboard (action Paste). Similar to EditFrom.
new 13.0 <Animations>

MarkTo

["..."]
Animation run after cell is marked by search (by SearchAction Mark). Similar to EditTo.
new 13.0 <Animations>

MarkFrom

["..."]
Animation run before cell is marked by search (by SearchAction Mark). Similar to EditFrom.
new 13.0 <Animations>

ClearTo

["..."]
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.
new 13.0 <Animations>

ClearFrom

["..."]
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
new 13.0 <Cfg> bool

AnimateUndo

[1]
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.
new 13.0 <Animations>

UndoShow

["..."]
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.
new 13.0 <Animations>

RedoShow

["..."]
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.
new 13.0 <Animations>

UndoHide

["..."]
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.
new 13.0 <Animations>

RedoHide

["..."]
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.
new 13.0 <Animations>

UndoAdd

["..."]
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!
new 13.0 <Animations>

RedoAdd

["..."]
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.
new 13.0 <Animations>

UndoMove

["..."]
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.
new 13.0 <Animations>

RedoMove

["..."]
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.
new 13.0 <Animations>

UndoDelete

["..."]
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.
new 13.0 <Animations>

RedoDelete

["..."]
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!
new 13.0 <Animations>

UndoUndelete

["..."]
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.
new 13.0 <Animations>

RedoUndelete

["..."]
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.
new 13.0 <Animations>

UndoSelect

["..."]
Animation run when selecting row action is undone. It means the row is unselected.
new 13.0 <Animations>

RedoSelect

["..."]
Animation run when selecting row undone action is done again. It means the row is selected.
new 13.0 <Animations>

UndoDeselect

["..."]
Animation run when unselecting row action is undone. It means the row is selected.
new 13.0 <Animations>

RedoDeselect

["..."]
Animation run when unselecting row undone action is done again. It means the row is unselected.
new 13.0 <Animations>

UndoResize

["..."]
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).
new 13.0 <Animations>

RedoResize

["..."]
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).
new 13.0 <Animations>

UndoShowCol

["..."]
Animation run when showing column action is undone. It means the column is hidden.
Animation is run only if FastColumns = '1'.
new 13.0 <Animations>

RedoShowCol

["..."]
Animation run when showing column undone action is done again. It means the column is shown.
new 13.0 <Animations>

UndoHideCol

["..."]
Animation run when hiding column action is undone. It means the column is shown.
new 13.0 <Animations>

RedoHideCol

["..."]
Animation run when hiding column undone action is done again. It means the column is hidden.
Animation is run only if FastColumns = '1'.
new 13.0 <Animations>

UndoAddCol

["..."]
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!
new 13.0 <Animations>

RedoAddCol

["..."]
Animation run when adding new column or copying column undone action is done again. It means the column is added.
new 13.0 <Animations>

UndoMoveCol

["..."]
Animation run when moving column action is undone. It means the column is moved to original position.
new 13.0 <Animations>

RedoMoveCol

["..."]
Animation run when moving column undone action is done again. It means the column is moved to the new position.
new 13.0 <Animations>

UndoDeleteCol

["..."]
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'.
new 13.0 <Animations>

RedoDeleteCol

["..."]
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!
new 13.0 <Animations>

UndoUndeleteCol

["..."]
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'.
new 13.0 <Animations>

RedoUndeleteCol

["..."]
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'.
new 13.0 <Animations>

UndoSelectCol

["..."]
Animation run when selecting column action is undone. It means the column is unselected.
new 13.0 <Animations>

RedoSelectCol

["..."]
Animation run when selecting column undone action is done again. It means the column is selected.
new 13.0 <Animations>

UndoDeselectCol

["..."]
Animation run when unselecting column action is undone. It means the column is selected.
new 13.0 <Animations>

RedoDeselectCol

["..."]
Animation run when unselecting column undone action is done again. It means the column is unselected.
new 13.0 <Animations>

UndoResizeCol

["..."]
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).
new 13.0 <Animations>

RedoResizeCol

["..."]
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).
new 13.0 <Animations>

UndoChangeTo

["..."]
Animation run after cell value change by any action is undone. It means the cell value is changed to original value. Similar to EditTo.
new 13.0 <Animations>

RedoChangeTo

["..."]
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.
new 13.0 <Animations>

UndoChangeFrom

["..."]
Animation run before cell value change by any action is undone. It means the cell value is changed to original value. Similar to EditFrom.
new 13.0 <Animations>

RedoChangeFrom

["..."]
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.
new 13.0 <Animations>

UndoBorder

["..."]
Animation run when cell dynamic style change action is undone. It means the border attributes are changed to original value.
new 13.0 <Animations>

RedoBorder

["..."]
Animation run when cell dynamic border change undone action is done again. It means the border attributes are changed to the new value.
new 13.0 <Animations>

UndoStyle

["..."]
Animation run when cell dynamic border change action is undone. It means the style attributes are changed to original value.
new 13.0 <Animations>

RedoStyle

["..."]
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" />.
new 13.0 <Animations>

Added

["..."]
Animation run after the row is added to grid by server side changes (<Changes>).
new 13.0 <Animations>

Moved

["..."]
Animation run after the row is moved to new position in grid by server side changes (<Changes>).
new 13.0 <Animations>

Deleted

["..."]
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'.
new 13.0 <Animations>

Selected

["..."]
Animation run after the row is selected by server side changes (<Changes>).
new 13.0 <Animations>

Deselected

["..."]
Animation run after the row is unselected by server side changes (<Changes>).
new 13.0 <Animations>

Expanded

["..."]
Animation run after the row is expanded and its children are shown by server side changes (<Changes>).
new 13.0 <Animations>

Collapsed

["..."]
Animation run after the row is collapsed and its children are hidden by server side changes (<Changes>).
new 13.0 <Animations>

ChangedTo

["..."]
Animation run before the cell value is changed to new value by server side changes (<Changes>). Cell animation, similar to EditTo
new 13.0 <Animations>

ChangedFrom

["..."]
Animation run after the cell value is changed to new value by server side changes (<Changes>). Cell animation, similar to EditFrom

Dialog animations

new 13.0 <Cfg> bool

AnimateDialogs

[2]
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.
new 13.0 <Animations>

ShowMenu

["..."]
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.
new 13.0 <Animations>

HideMenu

["..."]
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.
new 13.0 <Animations>

ShowPopup

["..."]
Animation run when showing popup menu on mouse position (cell or Gantt Menu).
Animation ShowPopupUp sets animation for menu shown above the cell.
new 13.0 <Animations>

HidePopup

["..."]
Animation run when hiding popup menu shown on mouse position (cell or Gantt Menu).
Animation HidePopupUp sets animation for menu shown above the cell.
new 13.0 <Animations>

ShowCfg

["..."]
Animation run when showing modal configuration menu (configuration, columns/rows, export, print, print pdf).
new 13.0 <Animations>

HideCfg

["..."]
Animation run when hiding modal configuration menu (configuration, columns/rows, export, print, print pdf).
new 13.0 <Animations>

ShowTip

["..."]
Animation run when showing tip for the cell or Gantt item.
new 13.0 <Animations>

HideTip

["..."]
Animation run when hiding tip for the cell or Gantt item.
new 13.0 <Animations>

ShowHint

["..."]
Animation run when showing cell value as hint.
Animation ShowHintVert is set for hint in Lines type cell, when the cell is overflown vertically.
new 13.0 <Animations>

HideHint

["..."]
Animation run when hiding cell value as hint.
Animation HideHintVert is set for hint in Lines type cell, when the cell is overflown vertically.
new 13.0 <Animations>

ShowMessage

["..."]
Animation run when showing grid modal message by ShowMessageTime.
Message is animated only if no JavaScript is running during the animation time.
new 13.0 <Animations>

HideMessage

["..."]
Animation run when hiding grid modal message shown by ShowMessageTime.
new 13.0 <Animations>

ShowCalendar

["..."]
Animation run when showing calendar for Date cell.
Animation ShowCalendarUp sets animation for calendar shown above the cell.
new 13.0 <Animations>

HideCalendar

["..."]
Animation run when hiding calendar shown for Date cell.
Animation HideCalendarUp sets animation for calendar shown above the cell.
new 13.0 <Animations>

CalendarDaysFrom

["..."]
Animation run before switching to days (the first) page in calendar dialog.
new 13.0 <Animations>

CalendarDaysTo

["..."]
Animation run after switching to days (the first) page in calendar dialog.
new 13.0 <Animations>

CalendarMonthsFrom

["..."]
Animation run before switching to months (the second) page in calendar dialog.
new 13.0 <Animations>

CalendarMonthsTo

["..."]
Animation run after switching to months (the second) page in calendar dialog.
new 13.0 <Animations>

CalendarMonthFrom

["..."]
Animation run before switching to the next or previous month in the days (the first) page in calendar dialog.
new 13.0 <Animations>

CalendarMonthTo

["..."]
Animation run after switching to the next or previous month in the days (the first) page in calendar dialog.
new 13.0 <Animations>

CalendarYearFrom

["..."]
Animation run before switching to the next or previous years in the months (the second) page in calendar dialog. It animates the whole dialog!
new 13.0 <Animations>

CalendarYearTo

["..."]
Animation run after switching to the next or previous years in the months (the second) page in calendar dialog. It animates the whole dialog!