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

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

Global settings

TreeGrid documentation

Status messages

chg 6.0 <Cfg> <treegrid / bdo> int

SuppressMessage

[0]
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

MessageWidth

[140]
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

CenterMessage

[0]
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

MoveMessage

[0]
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

OnShowMessage

(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

OnDisable

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

OnEnable

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

ShowMessage

(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

ShowMessageTime

(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

HideMessage

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

Disable

(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

Enable

( )
Enables disabled grid.
API method void

Prompt

(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

OnPrompt

(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

OnPromptFinish

(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

ShowProgress

(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

Grids.Alert

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.
new 16.3 global variable object

TreeGridControlsTag

Set it to some HTML tag object or HTML Tag id string to show all TreeGrid popup dialogs, menus, tooltips and messages here instead of document.body.
Useful e.g. for displaying part of the page in fullscreen mode.

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

Items

[...]
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

Menu

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

Columns

[0]
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

CfgColumns

[0]
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

Sort

[0]
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

HideUnused

[1]
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

Attribute

[...]
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

MenuName

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

MenuName

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

ShowCfg

(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

OnCreateMenu

(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

OnShowMenu

(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

OnSaveMenu

(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

OnCloseMenu

(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).
<Actions>

ShowCfg

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

MenuCfg

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

OnRestoreCfg

(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

OnCreateCfg

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

OnShowCfg

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

OnCfgChanged

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

ShowColumns

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

MenuColumns

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

ShowColumns

(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

MenuColumnsCount

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

MenuColumnsSort

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

OnShowColumns

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

OnColumnsFinish

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

OnColumnsChanged

(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

OnAfterColumnsChanged

(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

MenuPrint

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

MenuExport

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

Visible

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

Space

[4]
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

Kind

["Toolbar"]
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

Tag

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

Cells

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

CellsXXX

[ ]
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"
Cells20Data="Import,Save,Reload,Repaint,Print,ExportPDF,Export"
Cells30Manipulate="Undo,Redo,Add,AddChild,AddCol,Join,Split,Outdent,Indent,ExpandAll,CollapseAll"
Cells40Sheet="AddImage,SetLink,Left,Center,Right,TextIndent,Top,Middle,Bottom,Bold,Italic,Underline,Strike,RotateLeft,NoRotate,RotateRight,WrapText,ClearStyle,Size,ColorText,ColorShadow,ColorBackground,Border,TextFormat"
Cells50GanttZoom="ZoomIn,ZoomOut,ZoomFit"
Cells60Cfg="DefSort,Sort,Calc,WinScroll,Columns,Cfg,Lock,Help,Debug"
Cells70Styles="Languages,Styles,GanttStyles,Sizes,Scales,Contrasts"
Cells80Right = "Empty,Formula,Resize"
new 6.3 <Toolbar> bool

Correct

[ ]
Button for scheduling all tasks in Gantt chart. Set it 0 to hide the button.
It can be shown only when defined Gantt chart column and GanttAncestors or GanttDescendants.
new 13.0 <Toolbar> bool

Import

[ ]
Button for opening xlsx in TreeGrid. Set it 0 to hide the button.
It can be shown only when set ImportAction = 1 or 3 and browser supports FileReader.
<Toolbar> bool

Save

[ ]
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 or Upload_Data or Upload_Script/>.
<Toolbar> bool

Reload

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

Repaint

[ ]
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 client Paging and AllPages and not AutoPages or ColPaging and not AutoColPages or ChildParts and not server ChildPaging and not AutoPages.
<Toolbar> bool

Print

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

ExportPDF

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

Export

[ ]
Button for exporting grid data to XLSX or XLS or CSV. Set it 0 to hide the button.
It can be shown only when set ExportFormat and not set <treegrid/bdo Export_Type/> or set <treegrid/bdo Export_Url or Export_Script/>.
new 6.3 <Toolbar> bool

Undo

[ ]
Button for undoing last action. Set it 0 to hide the button.
It can be shown only when permitted Undo.
new 6.3 <Toolbar> bool

Redo

[ ]
Button for redoing last undone action. Set it 0 to hide the button.
It can be shown only when permitted Undo.
<Toolbar> bool

Add

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

AddChild

[ ]
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.
new 12.0 <Toolbar> bool

AddCol

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

Join

[ ]
Button for spanning selected or focused cells together. Set it 0 to hide the button.
It can be shown only permitted DynamicSpan and permitted also SelectingCells or set FocusRect.
new 7.0 <Toolbar> bool

Split

[ ]
Button for splitting spanned cells. Set it 0 to hide the button.
It can be shown only permitted DynamicSpan and permitted also SelectingCells or set FocusRect.
new 7.0 <Toolbar> bool

Outdent

[ ]
Button for decreasing row tree level. Set it 0 to hide the button.
It can be shown only permitted Dragging and permitted also SelectingCells or set MainCol.
new 7.0 <Toolbar> bool

Indent

[ ]
Button for increasing row tree level. Set it 0 to hide the button.
It can be shown only permitted Dragging and permitted also SelectingCells or set MainCol.
<Toolbar> bool

ExpandAll

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

CollapseAll

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

AddImage

[ ]
Button for adding image file from disk to sheet. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 15.0 <Toolbar> bool

SetLink

[ ]
Button for entering link in sheet cell. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

Left

,

Center

,

Right

[ ]
Buttons for aligning sheet cell(s) horizontally - left / center / right. Buttons are switches, only one of them is on. Set it 0 to hide the button.
They can be shown only when set DynamicStyle.
new 13.0 <Toolbar> bool

TextIndent

[ ]
Combo to choose indenting cell value in sheet. Set it 0 to hide the combo.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

Top

,

Middle

,

Bottom

[ ]
Buttons for aligning sheet cell(s) vertically top / middle / bottom. Buttons are switches, only one of them is on. Set it 0 to hide the button.
They can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

Bold

[ ]
Button for setting / clearing bold text in sheet cell. It is a switch button. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

Italic

[ ]
Button for setting / clearing italic text in sheet cell. It is a switch button. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

Underline

[ ]
Button for setting / clearing text underline in sheet cell. It is a switch button. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

Strike

[ ]
Button for setting / clearing striking text in sheet cell by horizontal line. It is a switch button. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

RotateLeft

[ ]
Button for rotating sheet cell counter clockwise by 90 degrees. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

RotateRight

[ ]
Button for rotating sheet cell clockwise by 90 degrees. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 15.0 <Toolbar> bool

NoRotate

[ ]
Button for clearing rotation of sheet cell. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

WrapText

[ ]
Button for permitting / restricting of wrapping text to more lines in sheet cell. It is a switch button. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 15.0 <Toolbar> bool

ClearStyle

[ ]
Button for clearing all cell style attributes in sheet cell. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

Size

[ ]
Combo to choose font size in sheet cell. Set it 0 to hide the combo.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

ColorText

[ ]
Button with popup menu to choose text color in sheet cell. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

ColorShadow

[ ]
Button with popup menu to choose text shadow color in sheet cell. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

ColorBackground

[ ]
Button with popup menu to choose cell background color in sheet cell. Set it 0 to hide the button.
It can be shown only when set DynamicStyle.
new 12.0 <Toolbar> bool

Border

[ ]
Button with popup menu to choose cell border color, width and style in sheet cell. Set it 0 to hide the button.
It can be shown only when set DynamicBorder.
new 12.0 renamed 15.0 <Toolbar> bool

TextFormat

[ ]
Combo to choose cell value format. Set it 0 to hide the combo.
It can be shown only when set DynamicFormat.
new 6.3 <Toolbar> bool

ZoomIn

[ ]
Button for zooming in (increasing zoom level) Gantt chart. Set it 0 to hide the button.
It can be shown only when defined Gantt chart column.
new 6.3 <Toolbar> bool

ZoomOut

[ ]
Button for zooming out (decreasing zoom level) Gantt chart. Set it 0 to hide the button.
It can be shown only when defined Gantt chart column.
new 6.3 <Toolbar> bool

ZoomFit

[ ]
Button for choosing zoom level to show the whole Gantt chart without horizontal scrolling. Set it 0 to hide the button.
It can be shown only when defined Gantt chart column.
new 16.0 <Toolbar> bool

DefSort

[ ]
Button for restoring original sorting. Set it 0 to hide the button.
It can be shown only when permitted Sorting and set DefaultSort.
chg 16.0 <Toolbar> bool

Sort

[ ]
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.
Since 16.0 it is hidden by default and shown the DefSort button instead. To display it on Toolbar instead of DefSort when set DefaultSort, set <Toolbar SortVisibleFormula="1" DefSortVisibleFormula="return 0"/>
<Toolbar> bool

Calc

[ ]
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.
new 15.0 <Toolbar> bool

WinScroll

[ ]
Button for switching between grid scroll and page scroll. It is a switch button and has value of NoVScroll and NoHScroll attributes. Set it 0 to hide the button.
Shown always.
<Toolbar> bool

Columns

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

Cfg

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

Lock

[ ]
Button for locking and unlocking grid. Set it 0 to hide the button.
It can be shown only when set LockedValues.
<Toolbar> bool

Help

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

Debug

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

Languages

[2]
Controls visibility of all Language... buttons for choosing TreeGrid language.
0 - no language buttons, 1 - language radio buttons, 2 - languages combo
It can be shown only when set Language.
upd 7.0 <Toolbar> int

Styles

[2]
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
Shown always.
new 13.0 <Toolbar> int

GanttStyles

[2]
Controls visibility of all Gantt Style... buttons for choosing TreeGrid Gantt CSS style.
0 - no Gantt style buttons, 1 - Gantt style radio buttons, 2 - Gantt styles combo
It can be shown only when defined Gantt chart column and chosen TreeGrid responsive CSS style.
new 13.0 <Toolbar> int

Sizes

[2]
Controls visibility of all Size ... buttons for choosing TreeGrid style size.
0 - no size buttons, 1 - size radio buttons, 2 - sizes combo
Can be shown only if chosen TreeGrid responsive CSS style.
new 13.0 <Toolbar> int

Scales

[2]
Controls visibility of all Scale ... buttons for choosing TreeGrid scale.
0 - no scale buttons, 1 - scale radio buttons, 2 - scales combo
Shown always.
new 15.0 <Toolbar> int

Contrasts

[2]
Controls visibility of all Contrast ... buttons for choosing TreeGrid contrast.
0 - no contrast buttons, 1 - contrast radio buttons, 2 - contrasts combo
Can be shown only if chosen TreeGrid responsive CSS style.
<Toolbar> string

Formula

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

Resize

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

Toolbar

All settings loaded from <Toolbar> tags.

Useful API functions

global func. int[2]

GetWindowSize

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

GetWindowScroll

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

EventXYToElement

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

ElemToParent

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

CancelEvent

(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

GetStyle

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

CreateXML

(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

Escape

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

Grids.Tablet

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

SetTimeout

(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

HelpFile

["Help.html"]
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.
<Actions>

ShowHelp

Show TreeGrid user help page