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) Upgrading from 9.3 to 10.0 Upgrading from 5.9 to 6.0

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 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 Defaults list Suggest list (auto complete) 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) 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

Cell types
Auto 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 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 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 Basic settings Communication with server Export API 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 (like Adobe Flash) 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
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 Language & regional setup (Text.xml) 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 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

Tree

TreeGrid documentation

Rows in TreeGrid can be placed into tree.
TreeGrid supports unlimited levels of tree.
In XML can be rows placed in tree of <I> tags like <I A='1'> <I A='1-1'> <I A='1-1-1'/> <I A='1-1-2'/> </I> <I A='1-2-1'> <I A='1-2-2'/> <I/> </I> <I A='1-2'/> <I A='1-3'/> </I> <I A='2'/>
The tree lines and expand/collapse buttons are placed into MainCol.
The row's children can be expanded, collapsed or not expandable / not collapsible, see Expanded and CanExpand.
The width of icons and indent in tree is defined in styles in Grid.css.

The rows can be also placed into tree automatically by Grouping feature.
<Cfg> string

MainCol

Set this attribute to show TreeGrid instead of plain table. Let it empty to show only plain table.
It is name of main column with tree. The column must exist in the grid, but can be also hidden.
In this column will be displayed the tree with expand / collapse icons.
Only one main column is possible to be in grid. See also Button='Expand' to show the tree in more columns.
If set, the column should exist and be visible, otherwise a user cannot see the rows parent / children relationship.
new 9.3 API method void

ChangeMainCol

(string col, bool noshow = 0)
Changes MainCol to given column.
If set noshow, does not call RenderBody to display changes.
new 10.0 <Cfg> bool

ReversedTree

[0] Saved to cookies, avoid it by <Cfg ReversedTreeLap='1'/>
0 - it shows standard tree from top, children are below their parent
1 - it shows MS Excel summary outline tree, from bottom, children are above their parent
It changes also row order in functions for iterating rows: GetFirst, GetLast, GetNext, GetPrev, GetFirstVisible, GetLastVisible, GetNextVisible, GetPrevVisible, GetNextShift, GetPrevShift.
new 10.0 API method void

SetReversedTree

(bool value, bool noshow = 0)
Sets value of ReversedTree and renders body.
For noshow = 1 does not render body and requires rerender.
upd 7.0 <I> int

CanExpand

[1]
If row shows icon to expand / collapse and the row can be expanded or collapsed.
If set to 0, the row cannot be expanded or collapsed by a user. So its children are always shown or hidden, depending on Expanded.
Since 7.0, if set to 2, the row can be expanded or collapsed, but the expand / collapse icon is not shown. Use to expand / collapse the row by another way.
<I> bool

Expanded

[1]
Row is expanded, displays its children.
If ChildPaging is set to 3, only rows with Expanded='0' will take effect of the server ChildPaging and can download its children on expand.
upd 12.0 <I> string

TreeIconX

Custom tree icons for specified row state (icons for expand/collapse).
X = 0 - not expandable, 1 - last not expandable, 2 - expand (+), 3 - last expand (+), 4 - collapse (-), 5 - last collapse (-).
(Since 12.0) X = 6 line through, used only with custom icons 0 - 5, 7 no line through, used only if defined also 6, 8 - wait expand (+), 9 - last wait expand (+).
(Since 12.0) X = 10 - drag above, 11 - last drag above, 12 - drag into, 13 - last drag into, 14 - drag below, 15 - last drag below, 16 - no drag, 17 - last no drag.
If set NoTreeLines, only values 0, 2, 4, 8, 10, 12 and 14 are used.
The last is the last row inside its parent's children - its line does not continue.
For example: <I TreeIcon2='SpecialExpand.gif' TreeIcon4='SpecialCollapse.gif'/>
The height of the icon is always set to height of the row, the width is set to standard Tree icon or to TreeWidthX.
new 11.0 upd 12.0 <I> int

TreeWidthX

Custom widths of tree icons and indent. Are used only if set SpannedTree='1'.
X = 0 - tree level indent. 1 - width of leaf or not expandable button, 2 - width of expand / collapse button.
Since 12.0 it can be used with any value of NoTreeLines, but for tree lines only with custom TreeIconX.
new 7.0 <C> <cell> string

Button

Button = "

Expand

"
To show right side Expand button set Button="Expand".
It can be used to show the tree button in different column than in the main column.
To hide expand icon in the main column, you can set row attribute CanExpand='2'.
new 7.0 <C> <cell> string

Icon

Icon = "

Expand

"
To show left side Expand button set Icon="Expand".
It can be used to show the tree button in different column than in the main column.
To hide expand icon in the main column, you can set row attribute CanExpand='2'.
new 10.0 <Header cell> int

Levels

[0]
It can be set only in Header row in MainCol column.
If set, it displays buttons for tree levels, like in MS Excel outline. After click to the button, it expands / collapses the rows to show up to the selected level.
If set to 1, the button count is equal to the maximal tree level in grid (= max Level + 1).
If set to >1, it displays maximally given button count.
The count of level buttons is updated after grouping changes. It is also increased, but not decreased, after moving or adding rows.
new 12.1 <Header cell> int

MinLevels

[0]
If set, shows minimally this count of Levels buttons. Useful in server paging, when the tree depth is unknown.
<Cfg> bool

HideRootTree

[0]
Hides the first line in tree (root items are without any line).
Root rows become not expandable, so they should be all Expanded.
new 6.0 <Cfg> bool

SpannedTree

[0]
Set it to 1 if some MainCol cell is spanned between columns (has set Span attribute).
Set it to 1 along with NoTreeLines to control widths of the tree icons and indent by TreeWidthX.
If set to 1, it shows tree icons in included <table> tag and slows down rendering.
Cannot be used when the main column cells have set RowSpan.
<Cfg> bool

NoTreeLines

[0]
If set to 1, it does not show connecting lines in tree, shows only expand / collapse buttons.
Use especially for custom icons or tree indent widths.
new 9.0 upd 13.3 <Cfg> bool

NoPrintTreeLines

[ ]
If set to 1, it does not show connecting lines in tree when printing, shows only expand / collapse buttons.
If set to 2, it is set to 1 in Chrome/Safari and to 0 in other browsers, as the WebKit has problems with printing tree lines.
If empty, uses value of NoTreeLines.
new 7.0 API method void

SetNoTreeLines

(int Value)
Sets value of the NoTreeLines and re-renders grid.
API TRow var. int

Level

read only
Row's level in tree. Only for variable rows.
-1 = page, 0 root row, 1 first level children, 2 second level children, ...
API method bool

HasChildren

TRow row
Returns true if row has some visible children (shows icon expand/collapse).
API method int

GetPos

TRow row
Returns row's position in its parent. It counts only visible rows.
<Cfg> int

SaveExpanded

[0] Saves information to cookies
If set to 1, saves expanding / collapsing state of all rows to cookies. All rows must have set id attribute.
If set to 2, saves the state of only rows that differs from their default row's Expanded state.
Remember, cookies are limited to 4096 bytes for the whole page, so use this setting only for very small tables or use PersistentCfg.
Also use the smallest ids as possible (the amount of space is used: id+1 bytes per row).
Cannot be used with server side child paging. Cannot be used for automatically created group rows.
new 6.7 <Cfg> string

Expanded

All rows (comma separated ids) that will be expanded, all other rows will be collapsed if the attribute is present.
It is done on start and also after every page / child page load in server paging.
If defined both Expanded and Collapsed attributes, even empty, the row expanded state is changed only if the row is present in one of the lists.
It overrides the states saved by SaveExpanded.
new 12.0 <Cfg> string

Collapsed

All rows (comma separated ids) that will be collapsed, all other rows will be expanded if the attribute is present.
It is done on start and also after every page / child page load in server paging.
If defined both Expanded and Collapsed attributes, even empty, the row expanded state is changed only if the row is present in one of the lists.
It overrides the states saved by SaveExpanded.
chg 7.0 <Cfg> bool

NoScrollAfterExpand

[1]
If set to 0, TreeGrid scrolls down if the children are not shown all.
If set to 1, when expanding row, does not scroll into view the row's children - the icon always stays under mouse cursor.
Since 7.0 the default value is 1.

Actions and API for expand / collapse

The row can be expanded or collapsed by a user by clicking to row's expand / collapse icon in tree. And also by pressing Ctrl+Enter by default.
Collapsing rows is immediate, but expanding rows can be slows and asynchronous, depending on how many children will be loaded / render, see various paging types.

All rows can be expanded or collapsed by clicking to toolbar buttons ExpandAll or CollapseAll.
The CollapseAll always collapses all rows in grid, but ExpandAll can expand only some rows to avoid dead lock when too many children are present, see ExpandAll... settings.
<Actions>

Expand ...F

Attached to events OnClickExpand and OnCtrlEnter
Expands actual or focused row, fails if row is already expanded or cannot be expanded or does not have children.
The expanding can be asynchronous and can finish after the action returned.
<Actions>

Collapse ...F

Attached to events OnClickExpand and OnCtrlEnter
Collapses actual or focused row, fails if row is not expanded or cannot be expanded or does not have children.
Use "Expand OR Collapse" to invert expand state.
<Actions>

ExpandAll

Attached to event OnClickButtonExpandAll
Tries to expand all rows.
The ExpandAll can be asynchronous and can finish after the action returned.
The ExpandAll action can be stopped by a user during the process.
renamed 6.0 <Cfg> bool

ExpandAllLoaded

[0]
If set to 1 in server child paging (ChildPaging=3) the ExpandAll expands only rows with already downloaded children.
new 6.0 <Cfg> int

ExpandAllLevels

[3]
Which levels will be expanded on ExpandAll.
0 - only one level, no sub nodes of actually expanding rows will be expanded.
1 - all already rendered children, the rest only one level
2 - all already downloaded children, the rest only one level
3 - all levels, the expanding can be done in more passing, because it waits for children to download.
<Actions>

CollapseAll

Attached to event OnClickButtonCollapseAll
Collapses all rows.
The CollapseAll can be asynchronous and can finish after the action returned.
new 12.0 <Actions>

CollapseAllRoot

Not attached to any event
Collapses all rows in the first expanded collapsible level. All rows in grid will look collapsed, but they could contain expanded children.
The CollapseAll can be asynchronous and can finish after the action returned.
<Actions>

Indent ...F

Attached to event OnClickButtonIndent
Increases level of actual or focused row.
Moves the row as the last child of previous row.
new 10.0 chg 12.0 <Actions>

IndentSelected ...F

Attached to event OnClickButtonIndent
Increases level of all selected rows.
Moves every selected row as the last child of previous row. It never moves selected row as child of another selected row.
Since 12.0 version without ...F fails if the actual row is not selected.
new 12.0 <Actions>

IndentRows ...F

Not attached to any event
Increases level of focused rows on the same level as the first focused row.
Moves every focused row as the last child of previous row.
Version without ...F fails if the actual cell is not focused.
<Actions>

Outdent ...F

Attached to event OnClickButtonOutdent
Decreases level of actual or focused row.
Moves the row below its parent row.
new 10.0 chg 12.0 <Actions>

OutdentSelected ...F

Attached to event OnClickButtonOutdent
Decreases level of all selected rows.
Moves every selected row below its parent row. It never move the row if its parent is also selected.
Since 12.0 version without ...F fails if the actual row is not selected.
new 12.0 <Actions>

OutdentRows ...F

Not attached to any event
Decreases level of focused rows on the same level as the first focused row.
Moves every focused row below its parent row.
Version without ...F fails if the actual cell is not focused.
new 10.0 <Actions>

ShowTreeLevel

Attached to event OnClickLevels, cannot be attached elsewhere
Expands / collapses grid after click to Levels button.
API event bool

OnExpand

(TGrid grid, TRow row)
Called before the row is expanded or collapsed. Return true to suppress action.
Test the actual state by row.Expanded.
Return true to cancel the action.
API method void

Expand

(TRow row)
Expands row, for child paging is asynchronous.
API method void

ExpandParents

(TRow row)
Expands all parents to show the row. The row must not be hidden (must have Visible=1). For child paging is asynchronous.
upd 12.0 API method int

ExpandAll

(TRow parent, int loaded = 0, int levels = 3, int max = 100000, bool test = 0)
Expands all rows in parent and shows their children.
If parent is null, expands all rows in grid.
loaded is ExpandAllLoaded, levels is ExpandAllLevels.
max (since 12.0) is maximal level to expand, 0 expands only root rows, 1 expands root rows and their immediate children, etc.
(since 12.0) if set test = 1, it does not do anything, just returns count of affected rows.
Remember, in grid with ChildPaging is not often possible to expand all rows, because rendering of thousands of rows is very slow.
new 11.0 API event void

OnExpandAllFinish

(Grid grid, int cancelled)
Called after expanding all rows finished (cancelled = 0) or was interrupted (cancelled = 1).
cancelled is -1 if there were no rows to expand.
Note, in child parts it is called before the child parts are rendered.
API method void

Collapse

(TRow row)
Collapses row.
upd 12.0 API method void

CollapseAll

(int root = 0, bool test = 0)
Collapses all rows.
Since 12.0 for root = 1 collapses only first expanded level.
Since 12.0 for text = 1 does not do any change, just returns count of the collapsible rows.
Since 12.0 returns count of collapsed rows.
new 12.0 API method void

ShowTreeLevel

(int level)
Collapses / expands rows to show exactly given tree level. level is 1 for root level (collapses all), 2 for second level (expands the root rows), etc.