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 basics

TreeGrid documentation

Rows in TreeGrid contain cells, including their values - call values are defined only in rows, not in columns.

TreeGrid can contain variable data rows, fixed data rows, fixed special rows, solid space rows and solid special rows.

Rows by functionality

Data rows

Standard rows structured to sections, columns and cells containing values. They can be fixed or variable. Are set by <I> tag inside <Head>, <Foot> and <B> tags.
By default have data rows one cell in every column. But the cells can be also spanned horizontally (by Span attribute) or vertically (by RowSpan attribute).
And the rows can also contain one or all custom sections without cells - the whole column section is spanned and custom HTML is displayed, from attribute specific for the section LeftHtml / MidHtml / RightHtml.
Data rows can also contain specific column definitions for individual cells (like Type or Format).

Row position in tree is done by placing <I> tags inside their parent <I> tag. Variable rows order in body is by default set by position of the <I> tags inside their parent, but is affected by actual sorting.

Space rows

Nonstandard rows not structured to columns and sections, but containing independent cells with values. They can be only solid. Are set by <I> or <Space> tag inside <Solid> tag.

Special rows

All rows with special functionality, they can be fixed (<Header>, <Filter>) or solid (<Group>, <Search>, <Toolbar>, <Tabber>).
The changes in cell values are usually not updated to server.
The special rows are editable even if the grid has restricted editing by <Cfg Editing='0'/>.
upd 12.0 API TRow var. string

Kind

Kind of the row set in XML by the tag name.
It can be Header, Filter, Panel (since 12.0), Group, Search, Toolbar, Tabber and Space for other Space rows or Data for all other non Space rows.

Rows by position

Variable (scrollable) rows

Standard data rows placed inside grid's <Body> section to <B> pages. If grid does not use paging, all the variable rows are in one page, otherwise they are in more pages.
They can be scrolled vertically or horizontally, paged, structured to tree, sorted, filtered, grouped. They can also be added, deleted or moved.
Variable rows can be only data rows. Variable rows are base rows in TreeGrid.

Fixed (frozen) rows

Standard rows placed to <Head> or <Foot> section above or bellow the <Body> section. They are still visible and cannot be scrolled vertically, only horizontally.
Rows order is set by position of the <I> tags inside the section <Head> or <Foot>.
They cannot be paged, structured to tree, sorted, filtered, grouped. They also cannot be added, deleted or moved, only shown or hidden by API.
Fixed rows are still divided to cells or at least to column sections (left, variable, right), so the variable column section is horizontally scrollable.
If all fixed and solid rows plus header together are higher then main tag height, the grid cannot display its content and displays only "Too small extents" message.
Fixed rows can be data rows, usually some sum or total result rows, or rows with some global input parameters.
Fixed rows can also be special filter rows.

Solid (floating) rows

Solid space rows contain its own cells (set by Cells attribute) with their own widths not corresponding with grid columns widths and positions.
Rows position inside grid is specified by Space attribute (0 above Head, 1 - between Head and Body, 2 - between Body and Foot, 3 - between Foot and scrollbar, 4 - below scrollbar).
Rows order inside section specified by Space is set by positions of <I> tags inside the tag <Solid>.
Their content is always visible and never scrolled. They have their own structure independent on columns.
The Solid space rows can also display custom html instead of cells, set by Html attribute.
They are still visible and cannot be scrolled. They cannot be paged, structured to tree, sorted, filtered, grouped. They also cannot be added, deleted or moved, only shown or hidden.
If all fixed and solid rows plus header together are higher then main tag height, the grid cannot display its content and displays only "Too small extents" message.
Solid rows can be space rows and also special group row, search row, simple pager and toolbar.
API TRow var. string

Fixed

Position in table, it can be Head or Foot for fixed rows and Solid for Space rows. For all other rows is null.

Row name

Row visual identification

You can specify row name that will be shown in messages and alerts that speaking about the row.
For example "Are you sure to delete row '%d' ?", the %d will be replaced by row name.
The row name is its Name attribute if set. Or value(s) in NameCol if set. Or row id.
new 6.0 <I> string

Name

Row name shown in any text that mention the row.
new 6.0 upd 15.0 <Cfg> string[ ]

NameCol

One or more column that are used as row name, only if the row Name attribute is not set.
Comma separated list of column names. Values from these column in the row (comma separated) will be used as row name in any texts mention the row.
It is possible to set NameCol to the same value as RowIndex to use the row index as row name.
Since 15.0 it can be full string with column names in *, e.g. "Row *Col1* (*Col2*,*Col*)", the column names in ** are replaced by the row attribute value.

Row id

Row unique identification. See Row id document

Unique identification of every row in grid, including, hidden, fixed and space rows.
The row ids are described in separate document Row id.

Row index

Row position

Shows column with row positions, usually as number from 1.
It does not identify row uniquely, for row identification use row id instead.
Used also for editable formulas. See also column index.
new 9.3 renamed 12.0 <Cfg> string

RowIndex

Since 12.0 it was named UpCounter.
Column name that will show the row positions in grid.
If the column does not exist, it is created in the LeftCols next to the Panel as <C Name='RowIndex' Type='Int or Text' CanEdit='0' CanSort='0' Width='30'/>
It is possible to set NameCol to the same value as RowIndex to use the row index as row name.
I does not work in server paging.
It iterates all the RowIndex cells after any row order change and resets the value, so it can be slow in very large grids.
new 9.3 renamed 12.0 <Cfg> int

RowIndexType

[0]
Since 12.0 it was named UpCounterType.
Bit array of flags for the RowIndex.
1. bit&1Count deleted rows
2. bit&2Count filtered rows
3. bit&4Count manually hidden rows (other than deleted and filtered)
4. bit&8Count collapsed children
5. bit&16Reset on children (first child gets 1). It causes more rows with the same index! The GetRowByIndex cannot be used!
6. bit&32Count fixed data rows
7. bit&64Count other fixed rows like Filter, but not Header
8. bit&128Count Header rows and (since 13.0) ColIndex row
For example RowIndexType='7' counts all hidden and deleted rows.
If loading xlsx file, RowIndex is automatically set to 46 = 2+4+8+32. Or to 47 if RowIndexType contained bit 1.
new 12.0 <Cfg> int

RowIndexStart

[1]
The index is created from this number. Useful to have all indexes the same length (e.g. starting from 1000).
new 12.0 <Cfg> int

RowIndexChars

[ ]
Characters to build the index. By default the index is a number. Setting the RowIndexChars="ABCDEFGHIJKLMNOPQRSTUVWXYZ" use alphabetical indexes.
new 13.0 <Cfg> int

RowIndexWidth

[60]
Width of created RowIndex column, in pixels. Used only of the column does not exist in grid.
new 12.0 <Cfg> int

AutoRows

[ ]
If set, automatically generates given number of empty rows as the last children in the last page. Cannot be used in server paging.
The rows will get auto generated ids (not the same as RowIndex).
See also AutoPages to add new rows on scroll down.
new 9.3 renamed 12.0 <I> int

NoIndex

Since 12.0 it was named NoUpCounter
If set to 1, the row and its children will not be counted by RowIndex
(new 11.0) If set to 2, the row only will not be counted by RowIndex, but the row's children will be counted.
(new 11.0) If set to 3, the row's children will not be counted by RowIndex, but the row itself will be counted.
new 12.0 TRow variable int

HasIndex

Row position from 1 or 0 for row without index. On grid loading it is available in OnReady and later.
It is not affected by RowIndexStart / RowIndexChars.
new 12.0 API event TRow

GetRowByIndex

(type index, bool type = 0)
Returns row according to its index. On grid loading it is available in OnReady and later.
For type = 0 The index is number from 1 as for row (HasIndex).
For type = 1 The index is number or string according to the displayed row index in RowIndex column.
new 12.0 API event type

GetRowIndex

(TRow row, bool type = 0, type default = null)
Returns row index. The row can be row object or row id. On grid loading it is available in OnReady and later.
For type = 0 Returns number from 1 as the row (HasIndex).
For type = 1 Returns number or string as the displayed row index in RowIndex column.
If the row has not index, return default.
new 9.3 renamed 12.0 API event bool

OnRowIndex

(TGrid grid, string[ ] values)
Since 12.0 it was named OnUpCounter
Called on recalculate the RowIndex column.
(new 12.0) values contains the changed indexes that will be assigned after the event finishes. It is named array as new value by row id. The indexes are always from 1, the index to delete is set as "".
(new 12.0) You can modify the values, but you cannot add or delete the items from the array.
Or you can assign your own index to the RowIndex column and true to not process the values, it is not possible if the index is used for calculated formula.