News in version
Buy Try it free
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
TreeGrid SpreadSheet Examples Documentation References
Gantt chart Download Licensing & prices Contacts
TreeGrid Examples Download
Gantt chart Documentation References
SpreadSheet Licensing & prices Contacts
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

Undo & Redo

TreeGrid documentation

upd 15.0 <Cfg> int

Undo

[0]
Which changes can be undone and redone by Undo/UndoAll and Redo/RedoAll actions, by default for CtrlZ and CtrlY events. Bit array.
1.bit&1All changes (change cell value, delete row, add row, move row, copy row)
Does not affect changes in Filter row and rows with NoUpload='1' (by default Group, Search, Tabber, Toolbar)
(new 12.0) Also adding and deleting columns.
(new 7.0) Next modifications are change Def by ChangeDef, change attribute by SetAttribute.
(new 7.0) If set <Cfg DynamicSpan='1'/>, also span cell, split cell and move column can be undone.
(new 12.0) If set <Cfg DynamicBorder='1'/>, also cell border change can be undone.
(new 15.0) Also deleting and modifying defined Names.
2.bit&2(new 11.0) Selecting rows and cells. More selection changes done subsequently are undone at once, including Focusing cells.
3.bit&4(new 11.0) Focusing cell(s). More focus changes done subsequently are undone at once, including Selecting cells.
4.bit&8(new 11.0) Resizing rows, columns, sections and grid. Moving columns.
(new 12.0) Also showing / hiding rows and columns.
5.bit&16(new 11.0) Features (filter cell and operator change, sort change, search action change except Find and Help actions).
Note, rows cannot be sorted into original state if no Sort was defined on grid load.
The group change and search expression change is covered by undo cell change. Set NoUpload='0' to these rows to provide undo.
Cannot be used in server paging (Paging=3).
6.bit&32(new 11.0) Undo can go beyond saved (accepted) changes.
If set AutoUpdate, every undone or redone change is uploaded to server immediately.
Incompatible with GanttRunStates.
7.bit&64(new 12.0) Also scroll, both vertical and horizontal
8.bit&128(new 15.0) If set, the scroll, focus and select actions (if permitted) are added to actual undo position and do not clear the next actions for redo.

TreeGrid buffers all modifications since last save or reload. For server paging the buffer is cleared by any action reloading body like sort or filter.
Undo undoes the last unsaved modification and it is disabled with AutoUpdate except if is set the 6th bit (&32).
new 12.0 <Cfg> string[*][ ]

UndoMerge

[ ]
Which undo actions will be merged and undone at once.
It is two dimensional array, the first dimension (groups) is first character separated, the second dimension (actions) is comma separated. Like "|action11,action12,...|actions21,actions22,...|..."
All actions in one group will be merged, if there is no other action between them. No action can be in more groups.
To merge always all actions of the same type, place one empty group, like "||action11,action12,...|..."
For example UndoMerge="|Focus,Select,Scroll|ColsVisibility|Filter" means to merge Focus,Select and Scroll actions. To merge all actions of type ColsVisibility and to merge all actions od type Filter.
The undo actions are listed in OnUndo.
upd 11.0 <I> int

NoUpload

[0/1]
If set to 1, ignores changes in this row and does not upload them to server.
If set to 1, it also does not save undo for changed cells except the cell has set Undo='1'.
(Since 11.0) If set to 2, it works like 1 and if the row contains some pending changes, they are not accepted after save.
Default value is 0 for data rows and Solid rows with Kind "Space" and 1 for other space rows and rows created by grouping.
Filter row has always set 1.
new 6.4 <cell> bool

Undo

[0/1]
If the change in cell will be saved to undo list and can be undone.
By default it is set 1 for data rows and 0 for space rows. Exactly default value is set to !NoUpload.
Filter row cells have always set 0.
<Actions>

Undo

Attached to event OnCtrlZ and OnClickButtonUndo
Undoes the last grid modification (cell change, add row, delete row(s), move row(s), copy row(s)).
<Actions>

UndoAll

Not attached to any event
Undoes all modifications done since last save or accepting changes or reloading body or grid.
<Actions>

Redo

Attached to event OnCtrlY and OnClickButtonRedo
Does again the last undone action. It can be done only when between Undo and Redo was not done any other modification.
<Actions>

RedoAll

Not attached to any event
Does again all undone actions. It can be done only when between Undo and Redo was not done any other modification.
<Actions>

ClearUndo

Not attached to any event
Clears undo buffer.
Remember, the undo buffer is cleared automatically on save (except 6. bit of Undo is set) or reload or reload body.
new 6.3 API method bool

CanUndo

( )
Returns true, if there is something to undo.
new 6.3 API method bool

CanRedo

( )
Returns true, if there is something to redo.
new 7.0 API method void

StartUndo

( )
Starts new undo block.
Call it before doing more changes in grid to be undone all at once
The undo blocks can be nested. But the count of calling StartUndo must be the same as count of calling EndUndo.
new 7.0 API method void

EndUndo

( )
Ends new undo block.
Call it after doing more changes in grid to be undone all at once.
API method void

ClearUndo

(bool recalc)
Clears undo buffer.
Remember, the undo buffer is cleared automatically on save or reload or reload body, except Undo has set flag 32.
If set recalc, it recalculates the space rows to refresh toolbar buttons.
new 7.0 API method void

CustomUndo

(object Object, function Undo, function Redo)
Adds into undo queue custom undo action.
The Object should contain all information you require to do both undo and redo actions.
On undo is called Undo(Object), on redo is called Redo(Object). Or is possible also to use OnUndo / OnRedo API events.
new 11.0 API method void

MergeUndo

(string type1 = null, string type2 = null)
Merges two last blocks of undo to one.
If set type1 it merges the blocks only if the older block contains undos only of types type1 or type2.
new 7.0 upd 12.0 API method void

OnUndo

(TGrid grid, string action, .... )
Called after given action is undone by clicking Undo button or Ctrl + Z. action:
"Start"OnUndo (TGrid grid, string action)Called before block of undo actions starts, but undo is already disabled
"End"OnUndo (TGrid grid, string action)Called after block of undo actions finishes, but before undo is enabled
"Change"OnUndo (TGrid grid, string action, TRow row, string col, type value)After cell changed to original value. value is previous value
"EFormula"OnUndo (TGrid grid, string action, TRow row, string col, type value)After cell formula changed to original value. value is previous value
"Add"OnUndo (TGrid grid, string action, TRow row, TRow src)After added or copied row is deleted, but before it is removed
"Delete"OnUndo (TGrid grid, string action, TRow row)After deleted row is undeleted or undeleted row is deleted
"Move"OnUndo (TGrid grid, string action, TRow row, TRow parent, TRow next)After moved row is moved to original position
"Show"OnUndo (TGrid grid, string action, TRow row)After row is hidden (new 12.0, if set Undo&8)
"Hide"OnUndo (TGrid grid, string action, TRow row)After row is shown (new 12.0, if set Undo&8)
"Span"OnUndo (TGrid grid, string action, TRow row1, string col1, TRow row2, string col2)After spanned cell is split back (if set DynamicSpan='1')
"Split"OnUndo (TGrid grid, string action, TRow row1, string col1, TRow row2, string col2)After split cell is spanned back (if set DynamicSpan='1')
"AddCol"OnUndo (TGrid grid, string action, string col, TCol C)After added column is removed (new 12.0)
"DeleteCol"OnUndo (TGrid grid, string action, string col, int del, TCol C)After column is deleted or undeleted (new 12.0)
"MoveCol"OnUndo (TGrid grid, string action, string col, string tocol, string rightcol)After moved column is moved back to original position (if set DynamicSpan='1' or Undo&8)
"ColsVisibility"OnUndo (TGrid grid, string action, string[ ] show, string[ ] hide)After columns are hidden or shown (new 12.0, if set Undo&8)
"ChangeDef"OnUndo (TGrid grid, string action, TRow row, string def)After row Def attribute is changed back to original value
"SetAttribute"OnUndo (TGrid grid, string action, TRow row, string col, string attr, type value)After the attribute set by SetAttribute method changed to original value
"CopyAttrs"OnUndo (TGrid grid, string action, TRow row, string col, string attrs[ ], type values[ ])After the attributes changed due CopyAttrs changed to original value (new 12.0)
"GanttBase"OnUndo (TGrid grid, string action, string base, string col)After GanttBase is moved back to original position
"GanttFinish"OnUndo (TGrid grid, string action, string finish, string col)After GanttFinish is moved back to original position
"Focus"OnUndo (TGrid grid, string action, TRow row, string col, int pagepos, type[ ] Rect)After moved focus back to original position (new 11.0, if set Undo&2)
"ResizeRow"OnUndo (TGrid grid, string action, TRow row, int height)After resizing row back to original height (new 11.0, if set Undo&8)
"ResizeCol"OnUndo (TGrid grid, string action, string col, int width)After resizing column back to original width (new 11.0, if set Undo&8)
"ResizeSec"OnUndo (TGrid grid, string action, int Left, int Mid, int Right)After resizing sections back to original widths (new 11.0, if set Undo&8)
"ResizeMain"OnUndo (TGrid grid, string action, int Width, int Height)After resizing grid main tag to original size (new 11.0, if set Undo&8)
"Select"OnUndo (TGrid grid, string action, TRow row, string col, bool select)After selecting cell (col!=null), row (row!=null) or all rows to original selection state (new 11.0, if set Undo&4)
"Filter"OnUndo (TGrid grid, string action, TRow row, string col, string value, int operator, bool hasoperator)After changing filter cell value or operator back to original value (new 11.0, if set Undo&16)
"Sort"OnUndo (TGrid grid, string action, string sort)After changing sort setting back to original value (new 11.0, if set Undo&16)
"Search"OnUndo (TGrid grid, string action, string action)After changing search action back to original value (new 11.0, if set Undo&16)
"Filtered"OnUndo (TGrid grid, string action, bool filtered)After changing Filtered value back to original value (new 11.0, if set Undo&16)
"Sorted"OnUndo (TGrid grid, string action, bool sorted)After changing Sorted value back to original value (new 11.0, if set Undo&16)
"Searched"OnUndo (TGrid grid, string action, bool searched)After changing Searched value back to original value (new 11.0, if set Undo&16)
"Grouped"OnUndo (TGrid grid, string action, bool grouped)After changing Grouped value back to original value (new 11.0, if set Undo&16)
"Scroll"OnUndo (TGrid grid, string action, int vscroll, int hscrollleft, int hscrollmid, int hscrollright)After grid is scrolled (new 12.0, if set Undo&64)
"Custom"OnUndo (TGrid grid, string action, object Object)After undo of custom undo set by CustomUndo
new 7.0 upd 12.0 API method void

OnRedo

(TGrid grid, string action, .... )
Called after given action is redone by clicking Redo button or Ctrl + Y. action and parameters are the same as in OnUndo.