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) 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

Pagers

TreeGrid documentation

Side pager

The side pager is defined by <P> tag placed to <Pagers> tag, e.g. <Grid><Pagers><P Type='Pages'/><P ... /></Pagers></Grid>.
There can be more side pagers in grid, placed on right (default) or left side.
The side pagers are defined since 9.0, prior this version there was only one pager defined by <Pager> tag.

If used root paging (<Cfg Paging='1' or '2' or '3'/>), there is defined default pager by <Grid><Pager Name='Pager' Type='Pages'></Grid>
To not use the default pager for paging set <Pager Type=""/>.
new 9.0 <P> string

Name

[ ]
Name of the pager. by this name is the pager accessible by API in Pagers. Also redefining <P> tag with the existing Name will update already existing pager.
new 9.0 <P> string

Type

[ ]
Type of pager. It controls, what will be displayed in the pager, it can be:
PagesPager for root pages, defined by <Cfg Paging/>
ColumnsPager for columns, defined by <Cfg ColPaging/> (not yet implemented)
GanttPager for Gantt zoom, defined by <C Type='Gantt' GanttPageSize/>
CustomCustom pager, it is filled and controlled by custom API events.
new 9.0 <P> bool

Left

[0]
For 0 it shows the pager on the right grid side.
For 1 it shows the pager on the left grid side.
If there are more pagers defined on the same side, they are shown in the order they are defined in <Pagers> tag.
<P> bool

Visible

[1] Saved to cookies, to avoid it, set <P VisibleLap='1'/>
If pager is visible. Pager can be visible only if Cfg.Paging > 0 and Cfg.NoPager = 0.
A user can select pager visibility from configuration menu (except if set CanHide='0').
<P> bool

CanHide

[0]
If pager is displayed in columns menu and can be hidden or displayed by a user from this menu.
If set to 1, the pager can be also hidden automatically if there is no room for it, to preserve displaying "Too small extents" message.
This attribute does not affect displaying and hiding pager from configuration menu (you can control it by <MenuCfg ShowPager/> instead)
<P> string

Caption

Pager header caption.
<P> int

Width

[100] Saved to cookies, to avoid it, set <P WidthLap='1'/>
Pager width in pixels. A user can resize the pager by dragging its right side, unless it has CanResize='0'.
<P> int

MinWidth

[20]
Minimal width of pager in pixels. This restriction is applied when a user resizes the pager or the pager is resized automatically when main tag width is too small.
<P> bool

CanResize

If pager can be resized by a user.
If set to 1, pager can also be resized if there is no room for it, to preserver displaying "Too small extents" message.
<P> bool

Hover

[1]
If page will be highlighted under mouse cursor.
deleted 9.0 <Cfg> bool

NoPager

[0]
If set to 1, grid does not render any pager, regardless of settings in <Pagers> or <Pager> tag.
new 9.0 upd 10.0 API event bool

OnClickPagerPage

(TGrid Grid, object Pager, type Page, type Page2, bool Active)
Called on click to pager page.
Pager is the API object for <P> tag.
Page is the object for the page related to the Pager Type.
For "Pages" is the TRow object as the page.
For "Gantt" is the first date in the zoom.
For "Custom" is the page index from 0.
Page2 (since 10.0) is the last date in the "Gantt" page.
Active (since 10.0) is true if the "Gantt" page is already selected in the chart. False means Click, true means DblClick.
new 9.0 API event string

OnGetPageName

(TGrid Grid, object Pager, type Page, string Name)
Called when generating the HTML for individual pager pages.
Name is the default name to show.
Return new HTML name or Name.
See OnClickPagerPage for other attributes description.
new 9.0 API event string

OnGetPageTip

(TGrid Grid, object Pager, type Page, string Tip, string Drag)
Called when showing tip for pager page under mouse cursor.
Tip is default tip to show.
Drag is drag action name when dragging is active, otherwise null.
Return new tip or Tip.
See OnClickPagerPage for other attributes description.
API method void

UpdatePager

( )
Re-renders all pagers, including horizontal (space) pagers.
new 7.0 <Actions>

ScrollPager

Mouse dragging action, only for OnDragPager event
Starts scrolling side pager under mouse cursor. Only for touchpads (e.g. on iPad).
By default is the action attached to OnDrag2Pager for scrolling with two fingers.
new 9.0 API variable object[ ]

Pagers

An array of side pager objects. It has length property as count of the pagers.
The pagers can be accessible by the index or by the pager.Name.
The pager object has properties like all the <P> attributes.

Side pager type Pages

Pager for root pages (<Cfg Paging>)

new 9.0 <P> string

Type = "Pages"

Pager for root pages, defined by <Cfg Paging/>
<P> int

MaxColumns

[3]
Maximum of sorting columns to be listed in page names, can be set to 0 - 3.
If set to 0, the pages are always named "Page" + index.
new 13.0 <P> int

MaxChars

Maximal count of characters in the page names, if both bounds are presents.
new 13.0 <P> int

MaxCharsSingle

Maximal count of characters in the page names, if single cell value is present.
<Cell> string

PageNameValue

Cell value used for creating page names in side pager, see also OnGetPageNameValue event.
API event string

OnGetPageNameValue

(TGrid grid, TRow row, string col, string val)
Called to get value used for creating page names in side pager val is predefined value, return val or new value.
API event void

OnSetPageName

(TGrid grid, TRow page)
Called when are being (re)generated page names for side pager after sorting or grouping.
page is given page, read and set its properties page.Name (HTML, page name displayed in pager) and page.Title (text, tooltip for page item on pager).
deleted 9.0 API variable object

Pager

Pager settings, from XML node <Pager>.

Side pager type Gantt

Pager for Gantt zooms (<C GanttPageSize>)

new 9.0 <P> string

Type = "Gantt"

Pager for Gantt zoom, defined by <C Type='Gantt' GanttPageSize/>
new 9.0 <P> string

PageSize

Sets size of the page in pager. If not set, the page size is set by column GanttSize.
If set neither <P PagerSize/> nor <C GanttSize/> nor <C xxxPageSize/>, the pager does not show any page.
The values are the same as GanttUnits.
new 9.0 <C> string

xxxPageSize

PageSize can be set also in Gantt column instead of the pager <P> tag. The advantage is that it can be set different for every zoom level.
The xxx is the pager Name attribute, e.g. for <P Name='Test'/> it will be <C TestPageSize='...'/>
new 9.0 <P> string

ChartSize

Sets size of the whole pager. The ChartSize unit should be bigger than PageSize / GanttSize.
The pager shows pages only from this date range.
The values are the same as GanttUnits.
For example when set PageSize='d' ChartSize='M', the pager shows all days from actual month in Gantt chart. Changing month in chart will regenerate the pager.
If the ChartSize is not set, the pager shows all dates from actual Gantt chart. The size of actual Gantt chart is calculated to show all items in the chart.
Also GanttChartMaxStart and other chart size constraints affect the chart size.
If the ChartSize is set to 0, the chart size is in range GanttChartMinStart - GanttChartMaxEnd, if set, otherwise it acts like the ChartSize=""
new 9.0 <C> string

xxxChartSize

ChartSize can be set also in Gantt column instead of the pager <P> tag. The advantage is that it can be set different for every zoom level.
The xxx is the pager Name attribute, e.g. for <P Name='Test'/> it will be <C TestChartSize='...'/>
new 9.0 <P> int

ChartPrev

Adds given number of pages in front of pages (from previous ChartSize period)
new 9.0 <C> string

xxxChartPrev

ChartPrev can be set also in Gantt column instead of the pager <P> tag. The advantage is that it can be set different for every zoom level.
The xxx is the pager Name attribute, e.g. for <P Name='Test'/> it will be <C TestChartPrev='...'/>
new 9.0 <P> int

ChartNext

Adds given number of pages after pages (from next ChartSize period)
new 9.0 <C> string

xxxChartNext

ChartNext can be set also in Gantt column instead of the pager <P> tag. The advantage is that it can be set different for every zoom level.
The xxx is the pager Name attribute, e.g. for <P Name='Test'/> it will be <C TestChartPrev='...'/>
new 9.0 <P> string

Format

Formats the displayed page name. Formats starting date of the page.
If not set, the format is set by column xxxFormat.
The format is standard TreeGrid date / time format string for date PageSize, or standard TreeGrid number format string for number PageSize.
It can contain two formats separated by semicolon. In this case it prints two formatted date, the second format formats ending date of the page (= starting date of the next page minus 1).
new 9.0 <C> string

xxxFormat

Page Format can be set also in Gantt column instead of the pager <P> tag. The advantage is that it can be set different for every zoom level.
The xxx is the pager Name attribute, e.g. for <P Name='Test'/> it will be <C TestFormat='...'/>
new 9.0 <P> string

TipFormat

Formats the displayed page tip (TITLE). Formats starting date of the page.
If not set, the format is set by column xxxTipFormat.
The format is standard TreeGrid date / time format string for date PageSize, or standard TreeGrid number format string for number PageSize.
It can contain two formats separated by semicolon. In this case it shows two formatted date, the second format formats ending date of the page (= starting date of the next page minus 1).
new 9.0 <C> string

xxxTipFormat

Page TipFormat can be set also in Gantt column instead of the pager <P> tag. The advantage is that it can be set different for every zoom level.
The xxx is the pager Name attribute, e.g. for <P Name='Test'/> it will be <C TestTipFormat='...'/>
new 9.0 <P> string

CaptionFormat

Formats the displayed pager caption. Formats starting date of the pager (the first date of ChartSize or if not set, the first date in chart)
If not set, the format is set by column xxxCaptionFormat. If not set either it, it shows static Caption.
The format is standard TreeGrid date / time format string for date PageSize, or standard TreeGrid number format string for number PageSize.
It can contain two formats separated by semicolon. In this case it prints two formatted date, the second format formats ending date of the page (= starting date of the next page minus 1).
new 9.0 <C> string

xxxCaptionFormat

Pager CaptionFormat can be set also in Gantt column instead of the pager <P> tag. The advantage is that it can be set different for every zoom level.
The xxx is the pager Name attribute, e.g. for <P Name='Test'/> it will be <C TestCaptionFormat='...'/>
new 9.0 <P> string

FirstZoom

Name of the first zoom level to show the pager for.
If the actual zoom level will be lower (defined prior this zoom level in <Zoom> array), the pager will be hidden.
If not set, the pager is shown for all zoom levels from start.
new 9.0 <P> string

LastZoom

Name of the last zoom level to show the pager for.
If the actual zoom level will be higher (defined after this zoom level in <Zoom> array), the pager will be hidden.
If not set, the pager is shown for all zoom levels to end.
new 10.0 <P> int

Click

[0]
What to do on the page click, replaces the ZoomToPage. For special actions use OnClickPagerPage API event instead.
For 0 it scrolls to the page date.
For 1 it sets GanttSize to the PageSize and scrolls to the page date.
For 2 it changes zoom level to show exactly the page range in the chart, but does not change the GanttSize.
For 3 it sets GanttSize to the PageSize and changes zoom level to show exactly the page range in the chart.
For 4 (new 10.0) it chooses the (first) zoom level with the same GanttSize as the pager PageSize. It scrolls to previously displayed date if the GanttSize increased.
new 10.0 <P> int

DblClick

[0]
What to do on the page double click, replaces the ZoomToPage. For special actions use OnClickPagerPage API event instead.
The double click means a click to already active page.
The options are the same as for Click.
new 9.0 deleted 10.0 <P> int

ZoomToPage

[0]
Replaced by Click and DblClick.
new 10.0 <P> int

ShowUsedPages

[0]
If set to 1, highlights all pages in the pager that contain some Gantt object (Main bar, Flow, Run, Flag, Point, Constraint). Constraints used only if set GanttShowConstraints='2'.
If set to 2, works like 1, except it counts only edges of Main, Flow and Run bars. The Flag, Point and Constraints are counted the same as 1.
Used only if the pager size is equal or wider than actual zoom level (ChartSize>=GanttSize).
Can slow down the chart if there are a lot of rows with many objects, especially Run boxes!
new 10.0 <P> int

ShowExcludedPages

[0]
If set to 1, highlights all pages that contain only excluded dates. Used only for page sizes equal or less than days (PageSize<='d').
Used only if the pager size is equal or wider than actual zoom level (ChartSize>=GanttSize).
new 13.3 <P> bool

ZoomUndo

[0]
If set, adds the zoom change done by clicking to the pager page to the zoom undo to be undone by action UndoZoom.
new 9.0 <C> string

GanttSize

Limits the size of the chart to this unit. The values are the same as the GanttUnits.
For example GanttSize='M' shows always Gantt chart for one month.
This value can be used to show only part of the chart or for paging in Gantt chart using side pager Type='Gantt'
If set to empty string, it tries to show the whole chart. Also moving Gantt object outside the visible range will resize the visible range. It is default behavior in grid prior 9.0.
If set to 0, it tries to show the whole chart, moving Gantt object outside the visible range never resizes the visible range.
In API, the Grid.Cols[gantt_col].GanttSize contains actually selected page size in the grid.
new 9.0 <C> int

GanttSizeLeft

Count of GanttUnits added before GanttSize range, to show it from previous range.
new 9.0 <C> int

GanttSizeRight

Count of GanttUnits added after GanttSize range, to show it from next range.

Side pager type Custom

Custom pager controlled by API events

new 9.0 <P> string

Type = "Custom"

Custom pager controlled by API events.
Use the pager API events to control the individual pages: OnGetPageName, OnGetPageTip, OnClickPagerPage.
new 9.0 API event int

OnGetPagesCount

(TGrid Grid, object Pager)
Called to get count of items to show on custom pager.

Pager cell with navigation buttons and edit

<Space cell> string

Type = "Pager"

Displays control buttons PagerFirst, PagerPrevious, PagerNext, PagerLast and editable cell with page number and number of pages named PagerEdit.
This cell is replaced by the mentioned buttons and the editable cell and no longer exists for API.
You can set also attributes of the new cells, for example PagerEditWidth='100' or PagerNextOnClick='MyActionNext()'
Due its internal implementation, the Pager Type cell is available only in Extended API.

Pager cell as list of page indexes

<Space cell> string

Type = "Pages"

Displays all page numbers as links to the pages. Displays horizontal scrollbar if required.
You can set cell attribute RelWidth='1' to show the cell on the whole row.
You can set also cell attribute Wrap='1' to not show the horizontal scrollbar.
new 7.0 <Space cell> int

Count

[0]
Maximal count of page links displayed in Pages type cell.
The Pages type cell displays actual page + up to Count/2-1 links before actual page + up to Count/2 links after actual page + first page + last page + links for Step.
new 7.0 <Space cell> int[ ]

Step

For Pages type cell. It contains one or more comma separated values to display only some page links outside the Count range.
For example for Step='10' it displays pages 10, 20, 30, ...
For example for page 254 Count='10' Step='10,100' it displays pages 1, 100,200,210,220,230,240, 250,251,252,253,254,255,256,257,258,259,260, 270,280,290,300,400,500,600,...
When set cell attribute Wrap='2' the steps are displayed on own lines, the pager will be displayed on three lines. Otherwise the step links are separated by space.
Remember, when used Step the count of links often changes when changes active page and the pager height can change too. You should set row Height attribute to maximal expected height of the pager to avoid grid flickering.
new 7.0 API event string

OnGetPageNumber

(TGrid grid, int number)
Called for Pages type for every page number to get the html displayed in the link for the page.
The number is displayed for the page. It starts from 1, so it is bigger by 1 than the related page index.
To get page object call grid.GetPage(number-1);