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

Row moving and dragging

TreeGrid documentation

Rows in TreeGrid can be dragged inside one grid or between any two grids. The dropped rows can be moved or copied.
Only variable rows can be moved or copied!
By default every row can be dragged and every row accepts every child as drop target.
To control which row can be dragged use row's CanDrag attribute and/or OnStartDrag event.
To control which row accepts which child use Def and AcceptDef attributes. The row accepts as child only rows with Def attribute listed in the row's AcceptDef array. The root rows are controlled by <Root AcceptDef/>.
All the Def and AcceptDef settings are described in Default rows documentation.
Dynamically you can control dropping by OnCanDrop and OnEndDrag events.
<Cfg> bool

Dragging

[1]
If rows can be moved by mouse - the grid can be a source grid for drag / drop rows.
<Cfg> bool

Dropping

[1]
If rows can be dropped to this grid - the grid can be a target grid for drag / drop rows.
chg 10.0 <Cfg> bool

Copying

[1]
If existing rows can be copied / duplicated.
If set to 0, the Panel Copy button is hidden and the CopyMenu does not display items for copying.
If set to 0, all Copy... actions fail but CopyRow and CopyRows methods still work.
(Since 10.0) If set to 0, the rows cannot be copied by dragging.
Copying is automatically disabled when set Adding='0'.
It is not related to Copy&Paste, it is controlled by Pasting.
new 13.0 <Cfg> string

DragCol

[...]
If defined, shows drop position by outer arrows instead of showing it in the MainCol.
Useful especially for plain grid without MainCol. Default value is Index if not defined MainCol, otherwise it is null.
<Cfg> bool

DragCopy

[0]
For copying between two grids. If set to 1 in source grid, rows are copied instead of moved - the moved rows are not deleted in the source grid.
It does not affect moving rows inside the same grid.
new 11.0 <Cfg> bool

DragCopyId

[0]
If set, the moved row between grids does not change its id. It is not used for copied rows.
You must ensure the rows have unique ids in both grids, including newly added rows - use different IdChars or IdPrefix in the grids.
If set, the OnRowCopyId is not called for the moved rows.
new 6.4 chg 10.0 <Cfg> bool

CopyDeleted

[0]
If copies also deleted rows.
Since 10.0 it is used also for copied rows by dragging, in previous version the deleted rows were copied always, now only if set it to 1.
upd 12.0 <Cfg> int

DragEdit

[0]
If set, dragging actions are permitted even if the grid is in edit mode.
If set to 1, the grid finishes editing on mouse down at any other cell than edited one.
If set to 2, (since 12.0) the editing is not finished during dragging.
It is still not possible to drag row by the cell being edited.
<Cfg> bool

ShowDrag

[1]   Saved to cookies, to not load it, set ShowDragLap='1'
If shows dragged object under mouse cursor. The dragged row(s) or moved column(s).
It can be changed by a user in configuration menu
new 6.0 <Cfg> int

DragObject

[1]
What is shown under mouse cursor when dragging rows.
0 - nothing
1 - the first dragged row proxy. If dragged more rows, the border of the proxy is thicker
2 - row name or count of dragged rows, in Grid.CSS is represented by class GxDragObject.
the message is defined in Text.xml by <Lang><Text DragObjectMove DragObjectCopy DragObjectMoreMove DragObjectMoreCopy/></Lang>.
<Cfg> bool

DropFixed

[0]
If set to 1, it is possible to drop rows above fixed sections.
If the row is dropped to head section, it is placed as the first root row, if the row is dropped to foot section, it is placed as the last root row.
<Cfg> bool

ExpandOnDrag

[1]
If set 1, expands row when dragging row and mouse goes over the expand icon of not expanded row.
new 6.0 chg 7.0 <Cfg> int

ScrollOnDrag

[50]
If set, scrolls grid down if the dragging mouse hovers foot section and scrolls up if mouse hovers head section.
Since 7.0 it specifies the scrolling speed, for how many pixels will be scrolled in one step, the original value 1 is changed to 50.
new 9.0 <Cfg> bool

NoDragIcon

[0]
If set 1, does not show dragging icon during dragging.
new 10.0 <Cfg> int

TouchDragFocused

[2]
Only for touch screens.
If set to 1, it permits dragging only focused object (row, Gantt bar, Gantt icon or Gantt line).
If set to 2 permits dragging focused cell, not only focused row. Gantt is the same as for 1.
First tap on the object to focus it and next touch and move or resize it.
Similarly tap to empty space in Gantt chart and next touch and drag to create new bar.
It affects also showing Gantt menu - tap on the Gantt object and tap on it again to show the popup GanttMenu.
new 10.0 <Cfg> int

TouchClearFocused

[0]
Only for touch screens.
Time in milliseconds; after that time the focus from actually focused cell or Gantt object is cleared.
0 means never.
<I> bool

CanDrag

[1]
If row can be moved by mouse dragging. Not applicable for fixed rows. Fixed rows cannot also be drop target.
<C> bool

CanDrag

[1]
If row can by caught by cell in this column and being dragged. Set it to 0 to let a user to select text in cell instead of dragging.
chg 10.0 <I> bool

CanCopy

[1]
If the row can be duplicated and copied.
If set to 0, the Panel Copy button is inactive and all Copy... actions fail but CopyRow and CopyRows methods still work.
The row cannot be also copied by dragging.
Since 10.0 it is tested also for copied rows by dragging.
It is not related to copying values into clipboard.
<I> int

Moved

[0]   Uploaded to server, supports Undo
If and how the row has been moved inside the grid. 0 - no, 1 - to another position in the same parent, 2 - to another parent.
When sorting is enabled, the value 1 is not used.
When the row is moved between grids, it is marked as Added in target grid and Deleted in source grid. No Moved flag is set in this case.
After uploading changes to server or calling AcceptChanges the moved row just looses its state and becomes normal row.
chg 10.0 <I> string

Copy

Uploaded to server
This attribute is set when used ChildPaging=3 and the row was created as deep copy of another row, the Copy is id of the source row.
This attribute is set only if the source row has some children and they were not loaded from server yet (the row was not expanded yet).
The server script must provide deep copy of the children of source (Copy) node to children of this (id) node.
Since 10.0 it is set also for copied rows by dragging.
<I> string

Parent

Uploaded to server
When the row is moved or added, this is id of the new parent row or position of page (from 0).
<I> string

Next

Uploaded to server
When the row is moved or added, this is id of the row below or "" if the row is the last row in its parent.
<I> string

Prev

Uploaded to server
When the row is moved or added, this is id of the row above or "" if the row is the first row in its parent.
<C> bool

Move

[0]
If the default Panel button Move is visible. This button is hidden also if <Cfg Dragging="0"/>. This button is inactive when the row has CanDrag='0'.
Dragging this button moves the row. Use this button if dragging row by cells has different function like selecting cells.
Used only if the Buttons and the cell value are not set.
upd 10.0 API event bool

OnStartDrag

(TGrid grid, TRow row, string col, bool more, bool copy, TRow[ ] rows)
Called before the row is being dragged. Return true to suppress dragging the row.
row is the caught row, col is column where the row is caught, more is true when more selected rows will be dragged together.
copy (since 8.0) is true if the row will be copied instead of moved.
rows (since 10.0) are all the moved rows (when moved more selected rows). It does not contain children of moved rows.
upd 10.0 API event int

OnEndDrag

(TGrid grid, TRow row, TGrid togrid, TRow torow, int type, int X, int Y, bool copy, TRow[ ] rows)
Called after the dragged row is dropped. It is called for any drop, even not permitted.
grid, row - dragged source row, togrid, torow - drop target - row under mouse cursor
type - 0 - cannot drop, 1 - above torow, 2 - to the end of children of torow, 3 - below torow
X, Y - mouse cursor position on screen (related to browser window)
togrid is never null, it is the last grid that was under mouse cursor. torow is null when no row is under mouse cursor in time of drop.
copy (since 8.0) is true if the row will be copied instead of moved.
rows (since 10.0) are all the moved rows (when moved more selected rows). It does not contain children of moved rows.
Return new type to change dropping results.
renamed 6.0 upd 10.0 API event int

OnCanDrop

(TGrid grid, TRow row, TGrid togrid, TRow torow, int type, bool copy, TRow[ ] rows)
Called during dragging row above other rows (drop targets) to find out if and how row can be dropped to this target.
It is called even if the dropping here is restricted (with type = 0). It is not called for grids with <Cfg Dropping='0'/>.
grid, row - dragged source row, togrid, torow - drop target - row under mouse cursor,
type - 0 - cannot drop, 1 - above torow, 2 - to the end of children of torow, 3 - below torow
copy is true if the source row will be copied, not moved.
rows (since 10.0) are all the moved rows (when moved more selected rows). It does not contain children of moved rows.
Return new type to change dropping permits.
This event controls dropping. To control which rows can be dragged (caught), set the row attribute CanDrag or set <Cfg Dragging> for whole grid or use OnStartDrag event.
upd 7.0 API event int

OnRowMoveToGrid

(TGrid grid, TRow row, TGrid togrid, TRow torow, bool copy)
Called after row is moved or copied to another grid. Called from function MoveRowsToGrid( ).
In time of call new row (torow) is positioned and displayed in target grid (togrid).
Old row (row) is still not deleted in source grid (grid).
If copy = true, old row will not be deleted.
return null to default behavior according to copy, or 0 to move, 1 to copy and -1 to remove source row.
API event void

OnRowMove

(TGrid grid, TRow row, TRow oldparent, TRow oldnext)
Called after row has been moved inside one grid. Called from function MoveRow( ).
The row is still displayed in old position but have new settings.
oldparent is original parent of the row, oldnext is original next sibling.
new 6.4 upd 10.0 API event bool

OnRowCopyId

(TGrid grid, TRow row, TRow source, bool move)
Called before creating id for the new moved / copied row, the row has already copied the IdNames columns, the other columns will be copied later.
Since 8.1 it can set the row id and return true to not generate the new id.
Since 10.0 move is set when the row is moved from another grid.
new 10.0 API event bool

OnRowCopyDef

(TGrid grid, TRow row, TRow source, bool move)
Called when moving row between grids. Called before copying values from old default row to the new row.
Use if the default row of copied row differ between grids to copy only some attributes and return true.
move is set when the row is moved from another grid.
API method void

MoveRow

(TRow row, TRow parent, TRow next, bool show = false)
Moves row with all its children to the parent's children in front of next row. parent can be row, page or null. If show = true, displays changes.
If next is null, moves new row as last parent's child. If parent and next are null, moves row as the last root row.
If the row is first row in spanned range (has set RowSpan for some cell), it moves the whole range.
API method void

MoveRows

(TRow row, TRow rowto, int type)
Moves row with all its children inside one grid. It converts its parameters and calls MoveRow.
row is the row to move, type - 1 - above torow, 2 - to the end of children of torow, 3 - below torow
If the row is first row in spanned range (has set RowSpan for some cell), it moves the whole range.
chg 7.0 API method TRow

MoveRowsToGrid

(TRow row, TGrid togrid, TRow torow, int type, int copy = 1)
Moves or copies row to another (or the same) grid. Displays changes. Returns added row from source (calling) grid.
row is the row to move or copy, togrid is target grid. If target grid is the same as source grid it calls MoveRows.
type - 1 - above torow, 2 - to the end of children of torow, 3 - below torow
If copy is 0, row (and its children) is added to target grid (marked as Added) and deleted from source grid (marked as Deleted).
If copy is 1, row (and its children) is added to target grid, but it is not deleted from source grid.
If copy is 2, copies only row, without its children.
Copies all row and cell attributes except when replacing deleted row with the same id. Does not copy RowSpan.
If copy is 0 and in target grid already exists deleted row with the same id as source row, to the target grid is not added new row, but the existing target row is moved to new position and filled with cell values from source row and the source row is deleted!
If copy is 0 it preserves creating new and new rows when moving one row more times between two grids.
Since 7.0 replaces only deleted rows with the same id. Also copies all attributes not only values.
new 8.0 Global func. void

DragByMouse

(object tag, Event event, int move = null, string html = null, function func = null, object param = null)
Useful for dragging external object into grid (or anywhere else)
Attaches copy of given HTML tag to mouse cursor to simulate its dragging. Call it only on mouse down.
Automatically removes the attached object on mouse up. You can call DragByMouse without parameters to remove the object manually.
The ghost object is placed below mouse cursor to not suppress standard mouse events.
tag is HTML tag to be dragged. It is not modified by this function. It is used to get its position, class and innerHTML.
event is standard HTML MouseEvent, the function used its clientX and clientY for placing the ghost object.
move can be direction to move the ghost object only, 1 - horizontally, 2 - vertically
html is html to filled into ghost object. If not set, the tag.innerHTML is used.
function func (param) is called when the ghost object is removed (usually on mouse up). param is any custom parameter.
<Actions>

DragRow

Attached to OnDragPanelMove and OnDragRow events, can be attached to OnDrag... events only
Starts dragging actual row with all its children to new position. Dropped row will be moved.
<Actions>

DragSelected

Attached to OnDragRow events, can be attached to OnDrag... events only
Starts dragging selected rows with all their children to new position. Dropped rows will be moved.
Fails if actual row is not selected. It is possible to drag selected rows only by dragging one of them.
chg 7.0 <Actions>

DragCopy

Not attached to any event, can be attached to OnDrag... events only
Starts dragging actual row without its children to new position. Dropped row will be copied.
Like DragRow, but copies row, without its children.
Since 7.0 it fails also when set Adding='0' or Copying='0'.
chg 7.0 <Actions>

DragSelectedCopy

Not attached to any event, can be attached to OnDrag... events only
Starts dragging selected rows without their children to new position. Dropped rows will be copied.
Fails if actual row is not selected. It is possible to drag selected rows only by dragging one of them.
Like DragSelected, but copies rows, without their children.
Since 7.0 it fails also when set Adding='0' or Copying='0'.
chg 7.0 <Actions>

DragCopyChildren

Not attached to any event, can be attached to OnDrag... events only
Starts dragging actual row with all its children to new position. Dropped row will be copied.
Like DragRow, but copies row, with all its children.
Since 7.0 it fails also when set Adding='0' or Copying='0'.
chg 7.0 <Actions>

DragSelectedCopyChildren

Not attached to any event, can be attached to OnDrag... events only
Starts dragging selected rows with their children to new position. Dropped rows will be copied.
Fails if actual row is not selected. It is possible to drag selected rows only by dragging one of them.
Like DragSelected, but copies rows, with all their children.
Since 7.0 it fails also when set Adding='0' or Copying='0'.
new 8.0 <Actions>

DragCell

Not attached to any event, can be attached to OnDrag... events only
Custom dragging of the cell. It does not provide any action on drop, just calls custom events.
On mouse down, the cell content is attached to the mouse cursor.
On start calls OnStartDragCell, while moving there is called API event OnMoveDragCell, on mouse up there is called OnEndDragCell API event.
new 8.0 API event string

OnStartDragCell

(TGrid grid, TRow row, string col, string html)
Called when started dragging by action DragCell.
grid, row, col - dragged source cell,
html - html to be attached to mouse as ghost object for dragging
return true to suppress dragging or return new html to attach it to mouse cursor.
new 8.0 upd 12.0 API event bool

OnMoveDragCell

(TGrid grid, TRow row, string col, TGrid togrid, TRow torow, string tocol, int X, int Y)
Called during dragging by action DragCell.
grid, row, col - dragged source cell,
togrid, torow, tocol - drop target - cell under mouse cursor or null when dragging outside. togrid is never null, it is the last grid that was under mouse cursor
X, Y - mouse cursor position on screen (related to browser window)
Since 12.0 return true to set drag cursor, return false to set no drag cursor, return null to not change mouse cursor.
new 8.0 API event void

OnEndDragCell

(TGrid grid, TRow row, string col, TGrid togrid, TRow torow, string tocol, int X, int Y)
Called the dragged cell is dropped, started by action DragCell.
grid, row, col - dragged source cell,
togrid, torow, tocol - drop target - cell under mouse cursor or null when dragging outside. togrid is never null, it is the last grid that was under mouse cursor
X, Y - mouse cursor position on screen (related to browser window)