News in version
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
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 React Vue Other frameworks NodeJS server

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

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


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

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

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

Global settings

TreeGrid documentation

Status messages

chg 6.0 <Cfg> <treegrid / bdo> int


Which TreeGrid status messages will be suppressed.
1Messages during loading and updating grid on start and on reload
21 + Informational messages shown when longer task is run
32 + Message inside loading or rendering page
43 + Error message if TreeGrid cannot show
<Cfg> int


Minimal width of TreeGrid status messages, in pixels.
To place centered message to the same position and to not change the width according to message text.
new 10.0 <Cfg> int


If set to 1 it centers all the grid messages in the whole page. Useful for small grids.
If set to 2 it also disables the whole page while showing the message.
new 10.0 <Cfg> bool


If set to 1 it all the grid modal messages can be moved by mouse dragging.
TreeGrid core must be compiled with LibMouse module, that is not included by default.
API event void


(TGrid grid, HTMLElement message)
Called when any grid status message is displayed. message is the tag showing the text.
It is called after the tag is shown, but with display="none".
API event void


(TGrid grid)
Called before grid is disabled (and optional status message is shown).
API event void


(TGrid grid)
Called after grid is enabled (and any status message is hidden)
upd 13.0 API event void


(string message, int importance = 2, int type = 0)
Displays modal message centered inside main tag
It hides previously displayed message. When message is displayed, grid is disabled.
Shows only messages with importance > SuppressMessage.
(Since 13.0) If set type = 1, it disables the grid visually, usually as 50% transparent. type = 3 = 1 + 2.
(Since 13.0) If set type = 2, it animates the showing and hiding the message. Message is animated only if no JavaScript is running during the animation time.
new 7.0 API method void


(string message, int time = 0, function func = null, string[] buttons = null, int importance = 4)
Displays modal message centered inside main tag with given buttons.
The message is shown in 10ms timeout, so it can be used within handlers that hide message after their finish.
If set time, the message is hidden in next timeout after the time milliseconds elapsed.
If time is 0, the message is shown forever, if in this case the buttons are not set, shows OK button to hide it.
If func is set, it is called after the message is hidden or button is clicked. It has format: function func (result); The result is 0 - timeout, 1 - the first button, 2 - the second button, 3 - ..., -1 Enter, -2 Esc
The buttons is array of button names shown in the message. They can be direct button captions, or values from <Lang><MenuButtons/></Lang> tag, see Text.xml.
Shows only messages with importance > SuppressMessage.
For example: grid.ShowMessageTime("Do you want to do this action?",2000,function(result){ if(result==1) alert("Clicked yes"); },["Yes","No"]);
API method void


( )
Hides grid modal message and enables grid. If no message is shown, does nothing.
upd 13.0 API method void


(bool hard = false)
Disables grid, the grid is grayed and does not respond to user actions.
(Since 13.0) If set hard = true, it disables the grid visually, usually as 50% transparent.
API method void


( )
Enables disabled grid.
API method void


(string text, string default, function func, int width)
Replacement for standard JavaScript window.prompt function. It is asynchronous.
text is message text (can be HTML), default is default input value, width is optional width in pixels of the message box.
function func (val) is called after a user enters the value. The val is entered text or null when user clicked to Cancel button.
new 15.0 API event type


(TGrid grid, string text, string default)
Called before the prompt message is displayed. Called for every prompt in TreeGrid.
Return: string or number (0 return as string) to be used as the prompt result and don't show the prompt.
false to be used null (cancel) as the prompt result and don't show the prompt.
array as [text,default] to change the prompt texts.
new 15.0 API event type


(TGrid grid, string text, string default, string result)
Called after a user entered test in the prompt dialog. Called for every prompt in TreeGrid, except the prompt canceled by OnPrompt.
Return: string or number (0 return as string) to be used as the prompt result.
false to be used null (cancel) as the prompt result.
array as [text,default] to display the prompt again with these texts.
new 12.1 API method void


(string caption, string text, string cancel, int pos, int cnt)
Shows modal progress message with caption and text texts.
If set cancel, shows cancel button with the cancel caption. If clicked to this button, the message is hidden and the grid has set property CancelProgress = 1.
pos is actual progress completed from all cnt units.
Call the ShowProgress method whenver the progress changes with different pos
new 6.1 global variable bool


Set it before JavaScript modal dialog like alert, confirm or prompt to 1 and after call set it back to 0.
For example: Grids.Alert=1; alert("Error"); Grids.Alert=0;
It ensures that grid will not loose focus because of the alert dialog.

Configuration menus

TreeGrid contains four predefined configuration menus:
Settings menu in <MenuCfg>, Columns menu in <MenuColumns>, Print / PDF menu in <MenuPrint> and Export menu in <MenuExport.
upd 11.0 <Menu...> string


A list of items to display in the configuration menu. It sets also their order.
See available items in particular menus above.
To show separator, place item named "-".
The individual items can be hidden also by setting its name to 0.
Since 9.3 it is possible to disable individual option for the Enum item if set its text to empty string. Defined in Text.xml.
Default value depends on the menu, defined in Defaults.xml.
new 12.1 <Menu...> string


Full JSON menu definition used instead of Items.
new 12.1 <Menu...> int


If set, splits the menu rows and columns items to given number of columns.
If set to 0, splits the menu if it has more than 25 visible items.
new 12.1 <Menu...> int


If set, splits the menu configuration and options items to given number of columns.
If set to 0, it is set to Columns/0.66.
new 12.1 <Menu...> int


If set to 1, sorts all columns according to alphabet and not by their sections and merges to them also side pagers, if present Pagers item.
If set to 2, sorts all rows according to alphabet and not by their sections.
If set to 3, sorts both columns and rows.
new 12.1 <Menu...> int


For 0 never hides items that cannot be changed, just shows them disabled.
For 1 hides all items that cannot be changed and will not be processed, but shows disabled items that cannot be changed, but will be processed (for Print and Export).
For 2 hides all items that cannot be changed.
new 12.1 <Menu...> string


Which row and column attribute will be tested to display them in menu.
For MenuCfg and MenuColumns it is "CanHide", for MenuPrint "CanPrint and for MenuExport "CanExport".
<C> string


Html string displayed in Cols menu part for this column. If not set, the column caption is displayed.
new 12.1 <I> string


Html string displayed in Rows / Head / Foot / Space menu part for this row. If not set, the row Name or value in NameCol cell or row id is displayed.
new 12.1 API method TMenu


(object source = MenuColumns, function func = null, object options = null)
Shows given configuration menu.
source is the grid tag that contains the menu definition, it can be grid.MenuCfg, grid.MenuColumns, grid.MenuPrint or grid.MenuExport.
If the user clicks to OK, it calls function func (TMenu Menu), where Menu is the TMenu object.
options named array of groups of custom menu items to replace items in source, it is possible to read the options changes in the Menu parameter in function func.
Returns the created menu or null for error.
new 12.1 API event bool


(TGrid grid, TMenu Menu, object source, object options)
Called before the configuration menu is created.
Menu is not initialized menu, it is possible to change or define its Items or other attributes.
source is menu object definition, it can be: grid.MenuCfg, grid.MenuColumns, grid.MenuPrint or grid.MenuExport.
options named array of groups of custom menu items to replace items in source, e.g. Print or Export options.
Return true to not show the menu.
new 12.1 API event bool


(TGrid grid, TMenu Menu, object source, object options)
Called before configuration menu is displayed, Menu is initialized TreeGrid menu with all items to display.
It is possible to use the event to add custom items to the menu.
Return true to not show the menu. For parameters see OnCreateMenu.
new 12.1 API event bool


(TGrid grid, TMenu Menu, object source, object options)
Called after the configuration menu button OK is clicked, before the changes are saved.
Return true to not save the changes. For parameters see OnCreateMenu.
new 12.1 API event void


(TGrid grid, TMenu Menu, object source, object options, bool saved)
Called after the configuration menu is closed. saved is true if the changes were saved. For parameters see OnCreateMenu.

TreeGrid settings menu

Shows and changes grid and Gantt options. Can also choose visibility of columns and rows.
Defined in <MenuCfg /> tag, texts defined in <Lang><MenuCfg /></Lang>.
Shown by action ShowCfg attached to click to Cfg toolbar button.
Available items
Column groups: ColsCaption, Cols (all columns with CanHide>0), PagersCaption, Pagers (all side pagers with CanHide>0),
Row groups: SpaceCaption, Space (all solid space rows with CanHide>0), RowsCaption, Head (all head rows with CanHide>0), Foot (all foot rows with CanHide>0), Rows (all variable rows with CanHide>0),
Configuration groups: GanttCaption, GanttCfg (all Gant configuration items), CfgCaption, Cfg (all grid configuration items).
Individual Cfg items: ShowDeleted (show deleted rows), ReversedTree (child items above parents), AutoSort (auto sort rows after change), SortClick (sorting behavior on click to header), AutoUpdate (auto update changes to server), CheckUpdates (periodically download changes from server), Scrollbars (scrollbars on tablet), Scroll (scrolling behavior on tablets) , MouseHover (hover objects under mouse), ShowDrag (show dragged object below mouse cursor), ShowPanel (show left row panel column), ShowPager (show first side pager), ShowAllPages (show all pages or one page), ShowButtons (icons or text on toolbar buttons).
Individual GanttCfg items: GanttCheckDependencies (restrict circular dependencies), GanttCheckExclude (starting tasks on holidays), GanttCheck (incorrect manual inputs), GanttCorrectDependencies (auto schedule tasks), GanttDirection (schedule from start or finish), GanttStrict (schedule tasks method), GanttCorrectDependenciesFixed (auto schedule also the changed task), GanttFixComplete (schedule also already started tasks), GanttCorrectOutsideBounds (schedule tasks outside project bounds), GanttBaseProof (move objects before project start), GanttFinishProof (move objects after project finish), GanttBasePreferred (project start is preferred to constraints), GanttFinishPreferred (project finish is preferred to constraints), GanttMinSlack (minimal slack for critical task), GanttErrSlack (minimal slack bound for error task), GanttSeparateSlack (calculate critical path individually), GanttHideExclude (show holidays in chart).


Attached to event OnClickButtonCfg
Shows configuration menu defined in <MenuCfg />.
API variable object


All settings loaded from <MenuCfg> tags.
new 12.1 API event bool


(TGrid grid)
Called before the default configuration is loaded, when clicked to Defaults button in the options menu. Return true to not load it.
new 6.0 deleted 12.1 API event bool


(TGrid grid)
Replaced by OnCreateMenu
chg 6.0 deleted 12.1 API event void


(TGrid grid, TMenu Menu)
Replaced by OnShowMenu
deleted 12.1 API event int


(TGrid grid, TMenu Menu, int update)
Replaced by OnSaveMenu

Columns visibility menu

Can change visibility of columns and since 12.1 also rows. Since 12.1 it can also show and change grid and Gantt options.
Defined in <MenuColumns/> tag, texts defined in <Lang><MenuColumns/></Lang>.
Shown by action ShowColumns attached to click to Columns toolbar button.
Available items
The same as in TreeGrid settings menu.
In fact it can show the same items as TreeGrid options menu, the only difference is that Reset/Defaults button is replaced by Clear/Show all button and different API events are called.


Attached to event OnClickButtonColumns
Shows the column visibility menu.
new 12.1 API variable object


All settings loaded from <MenuColumns> tags.
new 6.0 deleted 12.1 API method void


(string attribute, string caption, function func, TMenuItem[ ] options, string optionscaption)
Replaced by ShowCfg, note it has different parameters!
renamed 6.0 deleted 12.1 <Cfg> int


Replaced by <MenuCfg Columns/>.
new 6.4 deleted 12.1 <Cfg> bool


Replaced by <MenuCfg Sort/>.
chg 6.0 deleted 12.1 API event bool


(TGrid grid, TMenu Menu)
Replaced by OnShowMenu.
new 9.1 deleted 12.1 API event bool


(TGrid grid, TMenu Menu)
Replaced by OnSaveMenu.
API event bool


(TGrid grid, bool[ ] cols, int count)
Deprecated, use OnSaveMenu instead.
Called when user presses OK button on columns menu. Before any updates in data or display.
cols is array of changed columns, with string index as column name and value as its new visibility.
Return true to suppress changes.
new 6.0 deleted 12.1 API event void


(TGrid grid)
Replaced by OnCloseMenu.

Print / PDF menu

Can choose printed columns and rows and set print options.
Defined in <MenuPrint/> tag, texts defined in <Lang><MenuPrint/></Lang>.
Shown by action Print attached to click to Print toolbar button, only if set PrintCols attribute.
Shown by action ExportPDF attached to click to ExportPDF toolbar button, only if set PrintPDFCols attribute.
Available items
Column groups: ColsCaption, Cols (all columns with CanPrint=1,2),
Row groups: SpaceCaption, Space (all solid space rows with CanPrint=1,2,5,6), RowsCaption, Head (all head rows with CanPrint=1,2,5,6), Foot (all foot rows with CanPrint=1,2,5,6), Rows (all variable rows with CanPrint=1,2),
Print groups: OptionsCaption, Options (all base print options), SizeCaption, Size (print page size options).
Individual Options items: PrintRows (maximum rows per page), PrintPageRoot (start page always by root row), PrintExpanded (print all rows expanded), PrintFiltered (print all rows (unfiltered)), PrintSelected (print selected rows only), PrintVisible (print visible Gantt only).
Individual Options items for PDF only: PDFName (file name), PDFFormat (actually not used), PDFText (actually not used)
Individual Size items: PrintPageSize (paper size), PrintPageOrientation (portrait/landscape), PrintMarginWidth (page margin width (mm)), PrintMarginHeight (page margin height (mm)), PDFFitPage (fit to one page), PrintDPI (DPI (PPI) ratio), PrintWidth (page width (px)), PrintHeight (Page height (px)), PrintResults (calculates printed pages count).
The Options and Size individual items cannot be used in the Items / Menu, they can be used only as attribute to hide the item by setting the attribute value to 0!
new 12.1 API variable object


All settings loaded from <MenuPrint> tags.

Export menu

Can choose exported columns and rows and set export options.
Defined in <MenuExport/> tag, texts defined in <Lang><MenuExport/></Lang>.
Available items
Column groups: ColsCaption, Cols (all columns with CanExport=1),
Row groups: RowsCaption, Head (all head rows with CanExport=1), Foot (all foot rows with CanExport=1), Rows (all variable rows with CanExport=1),
Export groups: OptionsCaption, Options (all export options).
Individual Options items: ExportName (file name), ExportFormat (file extension), ExportExpanded (export all rows expanded), ExportFiltered (export also filtered rows), ExportOutline (create Excel outline), ExportIndent (indent tree levels)
Individual Options items for XLSX only: ExportSelectedRows (export only selected rows), ExportSelectedCols (export only selected columns), ExportSelectedCells (export only selected cells), ExportFixedRows (freeze head rows), ExportFixedCols (freeze left columns), ExportEmpty (export also empty cells)
new 12.1 API variable object


All settings loaded from <MenuPrint> tags.

Default Toolbar

Toolbar is standard Space row and has all Space row and cell attributes.
Default TreeGrid toolbar is defined by root <Toolbar> tag in Defaults.xml.
Buttons visibility
The default toolbar buttons are defined in file Defaults.xml, in <Toolbar> section.
Here is defined also their xxxVisibleFormula that specifies when the button is shown.
To hide any default toolbar button set its name to 0, for example <Toolbar Add='0'/>.
Buttons actions
The default toolbar button actions are defined in <Actions> tag as OnClickButtonXXX, where XXX is the button name, for example <Actions OnClickButtonAdd="AddRowEnd"/>.
The default toolbar button actions are defined in Defaults.xml.
Adding custom buttons to toolbar
It is possible to add new buttons to toolbar like to any other Space row into Cells array. Because Toolbar already defines many cells, it is better to define custom CellsXXX attribute and control the placement by the XXX as index, for example:
<Toolbar Cells05Custom="Custom1" Cells65Custom="Custom2"
Custom1Type="Button" Custom1Button="Button" Custom1="Custom 1" Custom1OnClick="alert('Custom 1 clicked')"
Custom2Type="Button" Custom2Icon="Test.gif" Custom2OnClick="alert('Custom 2 clicked')" />
For more button types see Button type. It is also possible to show any other cell types (like Text, Int, Select,...) on Toolbar.
<Toolbar> bool


If the default toolbar is visible.
In trial version this attribute is ignored.
<Toolbar> int


Toolbar position in table.
-1 - above table, 0 - above Head, 1 - between Head and Body, 2 - between Body and Foot, 3 - between Foot and vertical scrollbar, 4 - under vertical scrollbar, 5 - under table
-1, 0, 4, 5 are spanned for whole grid, including vertical scrollbar and pager,
1, 2, 3 are spanned only for columns - the vertical scrollbar and pager are placed right side.
new 7.0 <Toolbar> string


The Kind can be Toolbar, Toolbar1, Toolbar2, Toolba3, Topbar, Topbar1, Topbar2, Topbar3.
It specifies just style of the toolbar. Set to Topbar when placing on top. Set it Toolbar1 or 2 when there are two bottom toolbars.
<Toolbar> string


To place Toolbar outside the grid to any HTML tag on page. If set, the Space attribute is ignored.
It is the id of HTML tag where to render the row.
The width of the external space row is still preserved to be the same as the actual main table width.
In trial version this attribute is ignored.
chg 12.0 <Toolbar> string[ ]


[ ]
Since 12.0 the Toolbar does not define the Cells, but more CellsXXX.
If you define the Cells, it removes all default Toolbar buttons and uses only the cells defined in the Cells.
new 12.0 <Toolbar> string[ ]


[ ]
Groups of Toolbar cells. Every group contains comma separated list of cells.
The final order of the cells on Toolbar is done by sorting the CellXXX groups by the names, always as strings.
To add new button to Toolbar, define new CellXXX group with the new cells. Choose the XXX to place the new cells to desired place.
The individual Toolbar cells can be hidden also by setting its name to 0, see next attributes.
Empty cell is for alignment.
By default Toolbar defines these CellXXX groups in Defaults.xml:
Cells10Gantt = "Correct"
Cells80Right = "Empty,Formula,Resize"
<Toolbar> bool


[ ]
Button for uploading pending changes to server. Set it 0 to hide the button.
It can be shown only when set <treegrid/bdo Upload_Url or Upload_Tag/>.
<Toolbar> bool


[ ]
Button for reloading data from server. All the pending changes are lost. Set it 0 to hide the button.
Cannot be shown in Detail grid.
<Toolbar> bool


[ ]
Button for repainting all pages. Useful when too many pages are rendered and grid becomes slow. Set it 0 to hide the button.
It can be shown only when set Paging and AllPages.
<Toolbar> bool


[ ]
Button for creating printable version and printing it. Set it 0 to hide the button.
Shown always
<Toolbar> bool


[ ]
Button for exporting grid data to Excel or CSV. Set it 0 to hide the button.
It can be shown only when set <treegrid/bdo Export_Url/>.
<Toolbar> bool


[ ]
Button for adding or copying rows. Set it 0 to hide the button.
It can be shown only when permitted Adding.
<Toolbar> bool


[ ]
Button for adding or copying rows into row's children. Set it 0 to hide the button.
It can be shown only when permitted Adding and MainCol is set.
<Toolbar> bool


[ ]
Button for enabling / disabling sorting. It is a switch button and has value of Sorted attribute. Set it 0 to hide the button.
It can be shown only when permitted Sorting.
<Toolbar> bool


[ ]
Button for enabling / disabling calculating grid. It is a switch button and has value of Calculated attribute. Set it 0 to hide the button.
It can be shown only when permitted Calculating.
<Toolbar> bool


[ ]
Button for expanding all rows. Set it 0 to hide the button.
It can be shown only when set MainCol.
<Toolbar> bool


[ ]
Button for collapsing all rows. Set it 0 to hide the button.
It can be shown only when set MainCol.
<Toolbar> bool


[ ]
Button for showing columns menu to choose visible columns. Set it 0 to hide the button.
Shown always.
<Toolbar> bool


[ ]
Button for showing configuration menu (MenuCfg) to set various grid configuration. Set it 0 to hide the button.
Shown always.
<Toolbar> bool


[ ]
Button for displaying TreeGrid user help page (Help.html). Set it 0 to hide the button.
Shown always.
<Toolbar> bool


[ ]
Button for showing debug window. Set it 0 to hide the button.
It can be shown only when set <treegrid/bdo Debug/>.
upd 7.0 <Toolbar> int


Controls visibility of all Style... buttons for choosing TreeGrid CSS style.
0 - no style buttons, 1 - style radio buttons, 2 - (new 7.0) styles combo
<Toolbar> string


Formula on toolbar, just to simplify showing some calculation result on toolbar.
You can add also any other custom cells and set their Formula attribute and have more calculated cells on toolbar.
Set the Formula to the formula to calculate, like <Toolbar Formula='count()+" rows"'/>
<Toolbar> bool


[ ]
Special button for resize grid. Set it 0 to hide the button.
The special icon for resizing is displayed if set <Cfg ResizingMain/> regardless on setting this Resize button.
This button just indents the Toolbar buttons from right to not overflow the resizing icon.
API variable object


All settings loaded from <Toolbar> tags.

Useful API functions

global func. int[2]


( )
Returns size of browser's window (not the whole body), client area without scrollbars, returns [width, height]
global func. int[2]


( )
Returns scroll of body, returns [left,top]
global func. int[2]


(Event event, object elem )
Converts event.clientX, event.clientY to coordinates relative to elem, returns [left,top]
global func. int[2]


(object elem, object parent )
Returns relative position of element in its parent, returns [left,top]
global func. void


(Event event, int type = 0 )
Cancels propagation and/or prevents default of event.
type = 0 - both, 1 - cancels propagation only, 2 - prevents default only.
global func. Style


(object Elem)
Returns computed style of the element.
global func. object


(string str)
Creates internal XML document from string. This document can be iterated by DOM functions.
This document does not provide attributes childNodes and xml.
API method string


(string str)
Escapes the string to show it in HTML code. Replaces the & < ' " characters by entities.
new 10.0 global variable bool


It is set to 1 if TreeGrid is run on touch screen.
new 11.0 API method bool


(type code, int time, string ident, int flags, type data)
Calls given code in timeout, similarly to standard JavaScript setTimeout, but with extended behavior.
The code will not be called if the grid is cleared or reloaded during the timeout time.
codeis JavaScript code as string or JavaScript function to be called.
timeis the delay in milliseconds, after this time will be the code called. Note, it is not exact value, the code can be called later if the browser is busy. The browser must be idle (no running JavaScript) to call the delayed codes.
identis unique string to identify this timeout. It is required parameter. It can be null, if the code is string, in this case it will have the code value.
If the SetTimeout is called with the same ident again before the timeout expired, it calls only one code, the new or the old depending on the flags setting.
flagsbit array of settings.
1. bit (&1). If set, it calls the code immediately from the SetTimeout, if there was no call with the same ident for at least time milliseconds.
2. bit (&2). If set, it does not replace the old not yet run code with the same ident. It also does not reset the timeout.
If not set, it replaces the not yet run code with the same ident by the new code and resets the timeout to time.
datais custom JavaScript object passed to code. If the code is string, it is accessible in parameter named data. If the code is function, the function is called with the data as its first parameter.
Returns true if the code was already called (due type&1), false if the code will be called, or null if it did not replace the previous code due type&2.

Help file

<Cfg> string


Path and filename of TreeGrid help file. It is shown when a user clicks to Help button on toolbar.
It is relative to actual page URL.


Show TreeGrid user help page