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

Row API

TreeGrid documentation

TRow is row JavaScript object. col is column name as string.

In TreeGrid rows are stored in the same way as in the input XML, the variable rows are placed inside pages (if the grid is not paged, to only one page) and the pages root is Body. <Head>, <Foot> and <Solid> rows are placed in the separated tags accessible by Head, Foot and Space variables.
Every row is represented by JavaScript object similar to HTMLElement. The rows can be iterated by firstChild / nextSibling variables or GetFirst / GetNext methods.
In this documentation, the row object is named as TRow, but this object name in fact does not exist.
All rows are accessible by their ids from Rows array.

All attributes loaded from XML data are in rows represented as properties with the same name. For example you can access row.Selected or row.Added or row.Col1CanEdit or row.Col1 as cell value.
There is not predefined type for attributes, it can be string or number, depending on many factors. Therefore if you expect boolean value, you cannot test it as if(row.Selected) but if(row.Selected-0).
For many attributes is better to read them by predefined methods as CanEdit, CanFocus and so on. Most of row's attributes are expected to be read only, thus don't change their values directly.
Generally, use predefined functions (if any) to read or change row's attribute values instead of accessing them directly.
Also use these properties as read only if possible. To get row's attribute use global function Get rather then direct access to attribute.

All other XML data (defaults, columns, panel, toolbar, pager, configuration menu, language texts) are represented as JavaScript object (or arrays of these objects accessed by name) with properties of same name as XML attributes. These properties has converted type, therefore numbers are always numbers not strings. But it depends on property value not on expected type (the conversion is universal).

Grid configuration (tag <Cfg>) is filled to properties of basic TGrid object. TGrid object has all properties named as <Cfg> tag attributes. Values are also converted by their value types.

In all functions columns are identified by its name (given in XML, <C Name="">). By this name column object can be got from TGrid.Cols array.

In HTML table is every row represented by one <tr> tag for every section (left columns, variable columns, right columns). You can access cell DOM by GetCell function.

Any grid on page can be accessed from global JavaScript array Grids. By its Index or by its id.
new 6.0 API variable TRow[ ]

Rows

read only JavaScript named array of row objects by their id
All rows in grid by their id. Including fixed and Space rows.
If the row has set its id neither in XML nor by IdNames, the id is automatically generated as "R"+number from 1.
upd 7.0 API method TRow

GetRowById

(string id, string attr, bool nofixed)
Searches for the row by its id.
If the row exists in Rows, it returns the row from Rows, otherwise it iterates all rows in grid to find the row.
The advantage to Rows is that it can be used also before the Rows array is filled during grid creating.
The disadvantage is that it will be slow when the Rows does not contain given id.
(Since 7.0) If set attr, it searches the row according to this attribute value instead of id, in this case it always iterates all the rows.
(Since 7.0) If set nofixed, it does not search in fixed and space rows.
renamed 6.0 API variable TRow

Body

read only
The parent of all pages in grid. The XML <Body> tag.
You can iterate the pages by firstChild / nextSibling attributes.
You can iterate the rows in page also firstChild / nextSibling attributes or by GetFirst / GetNext method.
renamed 6.0 API variable TRow

Head

read only
The parent of all fixed rows in Head section. The XML <Head> tag.
You can iterate them by firstChild / nextSibling attributes.
renamed 6.0 API variable TRow

Foot

read only
The parent of all fixed rows in Foot section. The XML <Foot> tag.
You can iterate them by firstChild / nextSibling attributes.
renamed 6.0 API variable TRow

Solid

read only
The parent of all Space rows. The XML <Solid> tag.
You can iterate them by firstChild / nextSibling attributes.
The rows are not positioned by its Space attribute, but by its position in XML.
renamed 6.0 API variable TRow

Header

read only
The main Header row in grid. (the header with id='Header').
API variable TRow

Toolbar

read only
The main Toolbar row in grid. (the toolbar with id='Toolbar')
new 6.0 API variable TRow

Filter

read only
The first filter row in grid.
API method TRow[ ]

GetFixedRows

( )
Returns all fixed rows (head and foot) as JavaScript array.
API variable int

RowCount

read only
Count of actually rendered variable rows.
This variable is set after page was rendered and is updated for every next page or child page or child part is rendered.
For non-paged grids, you can access this variable first in OnRenderPageFinish event handler.
new 7.0 API variable int

LoadedCount

read only
Count of actually loaded variable rows.
This variable is set after page was loaded and is updated for every next page or child page is loaded.
For non-paged grids, you can access this variable first in OnUpdated event handler.
API TRow var. string

Fixed

read only
It is set for fixed and space rows only.
For head rows is "Head", for foot rows is "Foot", for Space rows is "Solid".

Row iterating

API TRow var. TRow

nextSibling

read only The first letter is lower case
Next row below this row.
API TRow var. TRow

previousSibling

read only The first letter is lower case
Previous row above this row.
API TRow var. TRow

firstChild

read only The first letter is lower case
First child of the row in tree.
API TRow var. TRow

lastChild

read only The first letter is lower case
Last child of the row in tree.
API TRow var. TRow

parentNode

read only The first letter is lower case
Parent row in tree. For root row it returns page or Head / Foot / Solid section for fixed row.
API method TRow

GetFirst

(TRow parent, int type)
Returns first existing row in given page parent or children of the parent row.
If parent is null returns the first variable row.
if (type&4) - including head and foot rows.
API method TRow

GetLast

(TRow parent, int type)
Returns last existing row in given page parent or children of the parent row.
If parent is null returns the last variable row.
if (type&1) - ignores rows in collapsed parents, if (type&4) - including head and foot rows.
upd 13.2 API method TRow

GetNext

(TRow row, int type)
Returns next existing row below the given row.
if (type&1) - ignores rows in collapsed parents, if (type&2) - only from actual root page.
Since 13.2 if (type&4) - including head and foot rows.
upd 13.2 API method TRow

GetPrev

(TRow row, int type)
Returns previous existing row above the given row.
if (type&1) - ignores rows in collapsed parents, if (type&2) - only from actual root page.

Since 13.2 if (type&4) - including head and foot rows.
API method TRow

GetFirstVisible

(TRow parent, int type)
Returns first visible row (has Visible='1') in given page parent or children of the parent row.
If parent is null returns the first visible variable row.
if (type&4) - including head and foot rows.
API method TRow

GetLastVisible

(TRow parent, int type)
Returns last visible (has Visible='1') row in given page parent or children of the parent row.
If parent is null returns the last visible variable row.
if (type&1) - ignores rows in collapsed parents, if (type&4) - including head and foot rows.
upd 13.2 API method TRow

GetNextVisible

(TRow row, int type)
Returns next visible (has Visible='1') row below the given row.
if (type&1) - ignores rows in collapsed parents, if (type&2) - only from actual root page.
Since 13.2 if (type&4) - including head and foot rows.
upd 13.2 API method TRow

GetPrevVisible

(TRow row, int type)
Returns previous visible (has Visible='1') row above the given row.
if (type&1) - ignores rows in collapsed parents, if (type&2) - only from actual root page.
Since 13.2 if (type&4) - including head and foot rows.
API method object[ ]

GetPrevShift

(TRow row, int pagepos, int cnt)
Returns [TRow row, int pagepos] .
Returns previous visible row shifted by cnt rows above. row can be root page, in this case pagepos is used as row position in the page.
API method object[ ]

GetNextShift

(TRow row, int pagepos, int cnt)
Returns [TRow row, int pagepos] .
Returns next visible row shifted by cnt rows below. row can be root page, in this case pagepos is used as row position in the page.
upd 12.0 API method TRow

GetNextSibling

(TRow row, int type)
Returns next row on the same tree level, for root rows iterates through pages.
Since 12.0, type&1 - ignores rows in collapsed parents, type&2 - only from actual root page. type&4 also from next parents on the same level.
upd 12.0 API method TRow

GetNextSiblingVisible

(TRow row, int type)
Returns next visible row on the same tree level, for root rows iterates through pages.
Since 12.0, type&1 - ignores rows in collapsed parents, type&2 - only from actual root page. type&4 also from next parents on the same level.
new 10.0 upd 12.0 API method TRow

GetPrevSibling

(TRow row, int type)
Returns previous row on the same tree level, for root rows iterates through pages.
Since 12.0, type&1 - ignores rows in collapsed parents, type&2 - only from actual root page. type&4 also from previous parents on the same level.
new 10.0 upd 12.0 API method TRow

GetPrevSiblingVisible

(TRow row, int type)
Returns previous visible row on the same tree level, for root rows iterates through pages.
Since 12.0, type&1 - ignores rows in collapsed parents, type&2 - only from actual root page. type&4 also from previous parents on the same level.