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) Upgrading from 9.3 to 10.0 Upgrading from 5.9 to 6.0

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 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 and type Cell value Reading / writing attributes by API Cell HTML 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 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) Mathematical functions 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 Special cell style attributes Cell CSS class Cell background color Dynamic cell border Cell HTML style Row color alteration Cell mouse cursor

Cell types
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 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 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 Basic settings Communication with server Export API Client export Server export

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

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 Language & regional setup (Text.xml) Useful API function Help file

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

Menus

TreeGrid documentation

TreeGrid library contains sophisticated menu system.
The TreeGrid menus can contain sub levels, collapsible sub levels, sub menus, columns, checkboxes, combo boxes, edit inputs and many other features.
The TreeGrid menus can be fully navigated by mouse and also by keys.
The TreeGrid menus are also available in independent library without TreeGrid component itself.

In TreeGrid the menus are used for Enum type (EnumMenu), Select type (Defaults), Defaults list (Defaults), cell popup Menu (Menu), global configuration menu and columns menu.

The menus definition use standard JavaScript format JSON.
The simple menu can be defined also by just comma or first character list of strings as menu names.

The JSON menu definition

{
Attr1 : "string value",
Attr2 : number_value,
Attr3 : "next string",
...
Items : [
{ Name : "1. item name", Attr1 : "string value", Attr2 : "next string", Attr3 : number_value ... },
{ Name : "2. item name", Attr1 : ... },
{ Name : "3. item name", ... },
{ Name : "4. item name", ... , Items : [
{ Name : "1. sub item name", Attr1 : ... },
...
] },
...
]
}


An example of clickable menu with columns, submenus, collapsible and static levels, captions and separators.

<I Col1Button="Defaults" Col1Defaults=""
{
ShowCursor : 1,
Items : [
{ Name:'Item1',Value:'Value1' },
{ Name:'Item2',Value:'Value2' },
{ Columns:2, Items : [
{ Name:'ColItem1',Value:'ColValue1' },
{ Name:'Menu3',Menu:1,Items:[
{ Name:'SubItem1',Value:'SubValue1' },
{ Name:'SubItem2',Value:'SubValue2' }
]},
{ Name:'ColItem2',Value:'ColValue2' },
{ Name:'ColItem3',Value:'ColValue3' }
]},
{ Name:'Item3',Value:'Value3' },
{ Name:'-'},
{ Name:'Menu1',Menu:1, Items : [
{ Name:'SubItem1',Value:'SubValue1' },
{ Name:'SubItem2',Value:'SubValue2' },
{ Name:'Menu1-1',Menu:1, Items : [
{ Name:'SubItem1',Value:'SubValue1' },
{ Name:'SubItem2',Value:'SubValue2' },
{ Name:'SubItem3',Value:'SubValue3' }
]},
{ Name:'SubItem3',Value:'SubValue3' }
]},
{ Name:'Menu2',Menu:1, Items : [
{ Name:'SubItem1',Value:'SubValue1' },
{ Name:'SubItem2',Value:'SubValue2' },
{ Name:'SubItem3',Value:'SubValue3' }
]},
{ Name:'Item4',Value:'Value4' },
{ Name:'Level1',Level:1, Items : [
{ Name:'Level1Item1',Value:'Level1Value1' },
{ Name:'Level1Item2',Value:'Level1Value2' },
{ Name:'Level1Item3',Value:'Level1Value3' }
]},
{ Name:'Caption1',Caption:1 },
{ Name:'Item5',Value:'Value5' },
{ Name:'Level2',Level:1,Expanded:0, Items : [
{ Name:'Level2Item1',Value:'Level2Value1' },
{ Name:'Level2Item2',Value:'Level2Value2' },
{ Name:'Level2Item3',Value:'Level2Value3' }
]},
{ Name:'Level3',Level:1,Expanded:0, Items : [
{ Name:'Level3Item1',Value:'Level3Value1' },
{ Name:'Level3Item2',Value:'Level3Value2' },
{ Name:'Level3Item3',Value:'Level3Value3' }
]}
]
}
"/>

Base settings

Base menu/dialog attributes.
The TDialog is precedestor of TMenu class and all its attributes can be used also in menu.

Base attributes

TMenu TMenuItem[ ]

Items

required attribute
An array of individual item objects displayed in the menu.
The items are displayed in the order they are listed.
In simple menu it can be also set as comma or first character separated list of item names.
TMenu TMenuItem

Default

Default settings for all immediate items (in Items array)
It sets all not explicitly defined attributes in all items in Items array.
It affects only immediate items, the sub items can be preset by Default attribute of the parent TMenuItem and so on.
TMenu int

SaveType

[0]
What values and how are loaded and returned from menu for types Bool, Enum, Edit.
Have sense for Range cells only, when more values are returned.
In TreeGrid Range are usually used values 0 and 4.

0Only nonempty values are returned.
The Bool items are returned as "Name". The Enum and Edit items are returned as "Name:Value".
Usually used to return checked items from menu if only Bool items are present.
 
1Only changed values are returned. When loading from data, the values are not nulled.
The Bool items are returned as "Name:0" or "Name:1". The Enum and Edit items are returned as "Name:Value".
 
2All values are returned.
The Bool items are returned as "Name:0" or "Name:1". The Enum and Edit items are returned as "Name:Value".
 
3All values are returned.
The Bool items are returned as "0" or "1". The Enum and Edit items are returned as "Value" only.
 
4All values are returned
The Bool items are returned as "" or "Name". The Enum and Edit items are returned as "Value" only.
TMenu string[ ]

Buttons

[ null / ["Clear","Ok"] ]
Array of buttons displayed, possible values are "Ok", "Cancel", "Clear". Case insensitive. The order specifies the order of buttons shown.
By default is empty for normal menu and ["Clear","Ok"] for Range cells.
The buttons are useful when menu supports selecting more values (contains some Bool / Enum / Edit items).
The button texts are defined in Text.xml, attributes MenuOk, MenuClear, MenuAll, MenuCancel.
The Range menu can be also accepted if set EnterSwitches : 1.
TDialog string

Header

For TreeGrid menu it is HTML displayed in on the cell, when the menu is shown.
For custom menu it is HTML displayed inside place set by TPosition object.
TDialog string

Head

Top HTML - menu caption, will not be scrolled.
TDialog string

Foot

Bottom HTML - menu footer, will not be scrolled.
It is ignored when shown Buttons.

Visual settings

TMenu bool

ShowCursor

[1]
If left side cursor icons are shown
TMenu bool

ShowTree

[1]
If tree icons expand / collapse are shown
TMenu int

Indent

[12]
Tree level indent from left in pixels
TDialog bool

Shadow

[1]
If it shows shadow under the dialog
TDialog bool

ShadowHeader

[1]
If it shows shadow under the header
TDialog bool

HeadClose

Displays close button on the right in the Head. Only if some Head is set.
TDialog bool

AppendHeader

[1]
Append dialog next to Header (if any) rather than to the place or to the TreeGrid cell.

Key navigation

TDialog bool

CanFocus

[1/0]
If the dialog gets key focus, 1 is default for menu, 0 for dialog.
TMenu bool

EnterSwitches

[1]
0 - Enter always accepts results and closed the menu
1 - Enter switches on/off items that support it (Bool items, collapsible levels, popup menus, ...)
TMenu bool

IgnoreSpace

[0]
If Space key is ignored, useful when menu is used as support for editbox
TMenu int

PageLength

[8]
Count of items to move cursor by for PgDn / PgUp keys

Behavior

TMenu bool

CollapseOther

[1]
If collapses all other expanded sections when is expanding another section on the same level
TMenu int

SubmenuTime

[200]
When (in millisecond) will be shown submenu on mouse hover parent item (0 = never)
TMenu int

ExpandTime

[200]
When (in millisecond) will be shown sub section on mouse hover parent item (0 = never)
TMenu int

EnumTime

[200]
When (in millisecond) will be expanded inline Enum item on mouse hover (0 = never)
TMenu bool

ShowHint

[1]
If shows overflowed item texts as hint
TDialog bool

Modal

[0]
If set to 1, disables all other controls at page when the dialog is shown.
TDialog bool

CloseOut

[0]
If it is automatically closed when mouse moves outside the dialog and its header
TDialog bool

CloseClickHeader

[0]
If it is automatically closed after click to Header.
For predefined header in TreeGrid menu like for Enum type is already set.

Size, scroll and position

TDialog bool

NoScroll

[0]
If set to 1, never shows vertical scrollbar
TDialog int

MaxHeight

[null]
Maximal height of the dialog in pixels (without header), for higher dialog will be displayed scrollbar.
TDialog int

MinHeight

[0 / null]
Minimal height of the dialog in pixels (without header), so the dialog will be never shrunk below this limit with displayed scrollbars.
For higher dialog it will be displayed with another align to be displayed whole.
0 means always (rather change align than show scrollbars) (default for menu)
null means never (never change align) (default for dialog)
TDialog int

MaxWidth

[null]
Maximal width of the dialog in pixels, for wider dialog the rest will be overflowed - hidden.
0 means the Width set in position (the cell width).
TDialog int

MinWidth

[null]
Minimal width of the dialog in pixels
0 means the Width set in position (the cell width)
if the dialog cannot be displayed whole, its align is changed
TDialog int

MinEdge

[3]
Minimal distance to window edge in pixels, for 0 can be dialog placed immediately next to the edge.
TDialog bool

ResizeUpdate

[1]
Automatically updates size when the Area or body resizes.
TDialog bool

ScrollUpdate

[1]
Automatically updates size when body scrolls.
TDialog object

Area

Into this area is dialog overflowed or moved. It means only in this area will be the dialog shown and cannot exceed it.
Affects setting of minimal and maximal extents, align change, resize, move and drag.
By default it is the whole browser window (not page body!)
It can be set as {X:0,Y:0,Width:0,Height:0} or [X,Y,Width,Height] or HTML tag id or the HTML tag itself.
TDialog TPosition

Position

Position and align of the menu. The position object has preset its place to the cell the menu is shown for.
You can set especially Position.Align attribute to align the dialog to the cell differently.

Menu item

Attributes of every item in TMenu Items array.
By default are all items clickable for normal menu or items Bool for Range cells. To explicitly define clickable menu item in Range cell set its Bool:0.

Base attributes

TMenuItem string

Name

required attribute
Unique identification for the item.
Is also displayed if the Text is missing.
Is also returned for clickable item when its Value is missing.
Is returned for Bool type item in when it has Value : 1.
If two items have the same name, to the second name is added an index. It does not apply in different levels or submenus.
Name : "-" displays inactive separator and ignores other settings.
TMenuItem string

Text

HTML text displayed as menu item, if not set, used Name instead.
TMenuItem string

Icon

URL to item icon file displayed left side to item text.
TMenuItem int

IconWidth

[20]
Width of the icon in pixels, must be specified to correctly display the icon.
TMenuItem string

LeftHtml

HTML displayed left side to item text, right side to Icon.
TMenuItem int

LeftWidth

[20]
Width of the LeftHtml in pixels, must be specified to correctly display the left html.
TMenuItem string

RightHtml

HTML displayed right side to item text and value, left side to submenu menu icon.
TMenuItem int

RightWidth

[20]
Width of the RightHtml in pixels, must be specified to correctly display the right html.
TMenuItem int

Height

Minimal height of the item in pixels. If not set, the item height is as high as its content. It is intended especially to set icon height.
TMenuItem bool

Hidden

[0]
If the item is hidden. For sublevels and columns it hides the whole sublevel.
To hide only sublevel parent, set its Expanded : -1.
new 6.1 TMenuItem bool

Disabled

[0]
If the item is disabled. Disabled item is shown as inactive and inaccessible.
TMenuItem TMenuItem

Default

Default settings for all immediate items in summenu / sublevel item (all in Items array)
It sets all not explicitly defined attributes in all items in Items array.
It affects only immediate items, the sub items can be preset by Default attribute of the parent TMenuItem and so on.

Clickable item

Clickable item is an item without any special meaning.
By default are all items clickable for normal menu or items Bool for Range cells. To explicitly define clickable menu item in Range cell set its Bool:0.
By clicking this item is them menu closed and its Value (or Name) is returned.
If menu supports selection of more items, clicking the clickable item still closes the menu and returns only the item value without any other settings.
TMenuItem string

Value

A value of clickable item, it will be returned instead of Name on click the item and close menu.

Inactive caption

It is used only to visually separate menu item sections and to show some informational texts.
To show only horizontal line as separator, set Name='-' (minus), you don't need to set the Caption in this case.
TMenuItem bool

Caption

[0]
If set to 1, displays inactive item as not clickable caption.

Collapsible sub level

It shows collapsible / expandable or static sub level.
The sub items are set it Items array and they are indented by Indent value from the left, relative to this parent indent.
The expandable sub level is automatically expanded when mouse hovers this parent menu item for ExpandTime milliseconds.
If is set ExpandTime : 0, the level can be expanded / collapsed by mouse click.
When one sub level is expanded the other expanded sub levels are collapsed when set CollapseOther.
When navigating by keys, the sub level can be expanded and collapsed by Enter key.
TMenuItem bool

Level

[0]
The sub items are displayed in sub level.
TMenuItem TMenuItem[ ]

Items

[0]
Sub level items defined in the same way as base menu Items.
It can contain any TMenuItem settings, including nested levels and sub menus and columns.
TMenuItem int

Expanded

[null]
If the sub items will be expanded or expandable
nullexpanded, not collapsible, this parent item is displayed as inactive caption
-1expanded, not collapsible, this parent item is hidden
1expanded, collapsible
0collapsed, expandable

Popup sub menu

The item with popup submenu shows an popup icon on the right and on click to the item it shows the submenu defined in Items array.
The menu is automatically shown when mouse hovers this parent menu item for SubmenuTime milliseconds.
When navigating by keys, the popup menu is shown also on Enter and right arrow and hidden by Esc and left arrow.

The parent menu item can contain settings like TMenu for its submenu. Especially setting MinWidth and MaxWidth is useful for submenus.
TMenuItem bool

Menu

[0]
The sub items are displayed in sub popup menu (on right side).
TMenuItem TMenuItem[ ]

Items

Sub menu items defined in the same way as base menu Items.
It can contain any TMenuItem settings, including nested levels and sub menus and columns.

Columns

Menu can be divided horizontally to columns to easily display more items.
You can control count and width of these columns.
The items are automatically placed to the columns, they are always placed down and after right.
TMenuItem int

Columns

[0]
Count of columns to display in them the included Items. This item itself is not displayed.
The sub items are displayed in more columns.
new 12.0 TMenuItem string

ColumnSizes

Count of rows per individual column, for example "5,8,6" for 3 columns shows 5 rows, 8 rows and 6 rows.
TMenuItem int

Group

[0]
A number of group of columns from 1, all columns vertically in the group will have the same width, the groups should have the same count of columns.
If you have more column items in the menu (more items with Columns attribute set), you can let resize their columns to have all the same width, to look the menu better. Just set their Group attribute to the same value.
TMenuItem TMenuItem[ ]

Items

Sub items to show them in columns defined in the same way as base menu Items.
It can contain any TMenuItem settings, including nested sub menus and columns. Only nested sub levels are not supported.

Bool item (checkbox or radio)

Bool item shows checkbox or radio button on the right or left side.
It can be used for selecting more items.
It is default item for Range cells. To explicitly define clickable menu item in Range cell set its Bool:0.
The menu returns all checked item Name attributes on click button OK or Ctrl + Enter or Enter (when EnterSwitches is 1).
The Bool item can be saved to results as Name/"" or 0/1 or Name:0/1, see TMenu SaveType.
TMenuItem bool

Bool

[0]
Displays checkbox on the right and the menu item becomes not clickable.
TMenuItem bool

Value

[null]
Item Bool Value - 1 checked, 0 unchecked
TMenuItem bool

Left

[0]
Displays the check box on the left instead of the right.
new 12.0 TMenuItem int

ShowIcon

[1]
If the checkbox or radio icon will be shown.
0 - icon is hidden and checked item is colored. 1 - icon is shown, 2 - icon is shown and checked item is also colored.
TMenuItem int

Group

[null]
Sets radio group to group more radio buttons. If set, the Bool item becomes radio button.
It is index of group (from 1) that the checkbox belongs to. Only one checkbox in group can be checked.
These checkboxes are not affected by Clear/All on button.
TMenuItem bool

Uncheck

[0]
If the radio button can be unchecked - to let all radio buttons to be in group empty.
TMenuItem bool

CheckAll

[0]
Special checkbox or clickable item that checks / unchecks all checkboxes with the same GroupAll attribute value. If no GroupAll is set, it checks all Bool items.
Set GroupAll attribute to the same value for more checkboxes and in one or more for them set also CheckAll attribute - these items will select all of the checkboxes on click.
If the Bool is not set, closes also the menu.
TMenuItem int

GroupAll

[null]
Index of group all, this group is unchecked / checked together by CheckAll checkbox.
The null is base default group.
Must not be set with Group attribute.

Enum item (combo box)

Enum item shows combo box to choose the item value.
The Enum item can be saved to results as Value or Name:Value, see TMenu SaveType.
The menu Enum item can choose only one value, it should not contain sub items Bool, Enum, Edit.

The menu item can contain settings like TMenu for its Enum combo box.
TMenuItem bool

Enum

[0]
Displays combo box on the right.
TMenuItem string

Value

A selected item value in the combo box.
TMenuItem TMenuItem[ ]

Items

Sub items to show them in combo box defined in the same way as base menu Items.
It can contain any TMenuItem settings, including nested sub levels, sub menus and columns. It should not contain Bool, Enum and Edit type items.
TMenuItem int

Width

[0]
Width of the combo box in pixels.
If it is 0, the combo box resizes to accommodate its value.
TMenuItem bool

Left

[0]
Displays the combo box on the left instead of the right.

Edit item (input)

Edit item shows edit box to let a user to input any text value.
The Edit item can be saved to results as Value or Name:Value, see TMenu SaveType.
The value and name separators are automatically replaced in input text when saving.

The menu item can contain settings like TEdit for its Edit input box.
TMenuItem bool

Edit

[1]
Displays edit box on the right.
TMenuItem string

Value

Input value
TMenuItem int

Width

[0]
Width of the edit box in pixels.
If it is 0, the edit box resizes to accommodate its value.
TMenuItem bool

Left

[0]
Displays the edit box on the left instead of the right.

Custom menu in JavaScript

TreeGrid library contains global functions to show a custom menu.
The custom menu has all TreeGrid menu attributes and many other.
global func. TMenu

ShowMenu

(TMenu Menu, TPosition Pos, function Func, string Init)
Shows custom menu on given position.
Remember, the Menu and Pos are JavaScript objects, not strings.
Func is function called when the menu is closed and value(s) is accepted - replaces OnSave event.
Init are initial values in string for menu items Bool, Enum and Edit, in the same format it is sent to OnSave event. See also Input.
Returns the Menu or new menu object if the Menu has been set in string.
To show menu in grid for some cell use grid API method ShowMenu instead.
global func. TMenu

ShowPopup

(TMenu Menu, function Func, string Init)
Shows custom menu near the mouse cursor. Other settings see ShowMenu.
TMenu method void

Close

( )
Closes the menu manually. Usable especially for not Popup menus.

Custom menu position

TPosition specifies position on screen of rectangle place for that is the dialog displayed - it is not the dialog's area itself!
The place can be for example TreeGrid cell.
Inside the place is displayed dialog's Header if any.
The dialog is attached to some side outside or inside the place or can be also centered inside the place, see Align.

If the place has not set width and height, it specifies the exact position of the dialog.
TPosition int

X , Y

X, Y specifies left top position of the place on screen (as position:absolute tag).
Or if not set Width and Height, it specifies an exact position of the dialog.
Or if set Mouse, it is relative position to actual mouse position.
Or if set Tag, it is position relative to the tag.
TPosition int

Width

A width of the place in pixels.
Or if set Tag, it is modification to the tag width. In this case, it can be even negative.

If not set, the X specifies an exact dialog position.
TPosition int

Height

A height of the place in pixels.
Or if set Tag, it is modification to the tag height In this case, it can be even negative.
If not set, the Y specifies an exact dialog position.
TPosition object

Tag

If set, it specifies the place instead of X, Y, Width, Height - for this tag will be dialog displayed.
It can be a string as tag id or the HTMLElement itself.
If set, the X, Y are relative to the tag and Width, Height are modification of the tag width, height.
It can be e.g. document.body for the whole screen.
TPosition bool

Mouse

If set to 1, the X, Y are relative to mouse pointer.
TPosition string

Align

["left,below"]
An align of the dialog to the place,
It can contain two keywords, one for horizontal and one for vertical align
By default is dialog is displayed under the place, left aligned "left below"
Horizontal alignment
prevoutside attached to left side, can be automatically changed to "next" if dialog cannot fit to screen
nextoutside attached to right side, can be automatically changed to "prev" if dialog cannot fit to screen
leftinside left aligned, minimal width is Width, can be automatically changed to "right" if dialog cannot fit to screen
rightinside right aligned, minimal width is Width, can be automatically changed to "left" if dialog cannot fit to screen
centerinside centered horizontally, can be automatically shifted horizontally if dialog cannot fit to screen
Vertical alignment
aboveoutside attached from top, can be automatically changed to "below" if dialog cannot fit to screen
belowoutside attached from bottom, can be automatically changed to "above" if dialog cannot fit to screen
topinside aligned to top, can be automatically changed to "bottom" if dialog cannot fit to screen
bottominside aligned to bottom, can be automatically changed to "top" if dialog cannot fit to screen
middleinside centered vertically, can be shifted vertically if dialog cannot fit to screen

TPosition bool

Move

[null]
If the dialog can be automatically moved to fit into screen
If set to null, it is 1 for Align center and middle and 0 for the rest
TPosition int

MoveMouse

If set Move and Mouse and it automatically moves the dialog above the mouse to fit to screen and adds here the MoveMouse pixels.
TPosition bool

Resize

[null]
If the dialog can be automatically resized to fit into screen
If set to null, it is 1 for Align center and middle and 0 for the rest
TPosition bool

Realign

[null]
If the Align can be changed to fit into screen
If set to null, it is 1 for all Align settings except center and middle
TPosition string

AlignHeader

["justify middle"]
Align of Header inside the place. It can contain two keywords, one for horizontal and one for vertical align
Horizontally:"justify" - fill the whole place horizontally, "left" - left aligned, "right" - right aligned
Vertically:"middle" - fill the whole place vertically, "top" - top aligned, "bottom" - bottom aligned

Custom menu advanced settings

TMenu string

Cursor

Start and runtime position of key cursor - an item Name.
TMenu string

CursorValue

Places the key cursor to clickable item with this Value (or Name if missing).
TMenu bool

Popup

[1]
If it is automatically closed after selecting clickable item or click button.
If set to 0, the menu must be closed manually Close method.
TDialog bool

CloseClickOut

[1/0]
If it is automatically closed after click outside the menu. It is default 1 for menu and 0 for dialog.
TMenu string

Separator

["|"]
Character that separates the individual item results when returns the value of Bool, Enum and Edit in OnSave
TMenu string

NameSeparator

[":"]
Character that separates Name from Value when returns the value of Bool, Enum and Edit in OnSave
TMenu string

SeparatorReplace

[!]
Character that replaces Separator and NameSeparator when entered to Edit input
TDialog string

Class

Custom dialog class prefix, if set, all classes in menu contains base class definition and the with this class prefix
TMenu string

ClassMenu

Custom class to inherit for submenu, set to Class of all submenus
TMenu string

ClassEnum

Custom class to inherit for Enum menus, set to Class of all enums.
TMenu object

Texts

[ { Ok:"OK",Clear:"Clear",All:"All on",Cancel:"Cancel" } ]
Texts for menu buttons
TMenu object

Input

If set, the menu loads and saves its results in this <input>.
Can be an id of the <input> tag or tag <input> itself.
new 6.2 TDialog bool

Rtl

[0]
Displays the dialog in right to left mode for Middle East languages.

Custom menu JavaScript events

TMenu event bool

OnSave

(TMenuItem Item, string[ ] Data)
1) Called after a clickable item is clicked and the menu will be closed.
The Item is the clicked item. You can read its Name and Value attributes.
The Data is null.

2) Called after click to OK button to save Bool, Enum, Edit menu item values.
The Item is null.
The Data is array of strings that contain individual results of items Bool, Enum, Edit.
Which and how are the values present in Data is controlled by SaveType attribute.
The Edit values contain replaced Separator and NameSeparator by SeparatorReplace.
Return false to not close Popup menu.

It is replaced by function Func if set as parameter in ShowMenu.
It can be attached also to submenu (Menu:1) item to provide different action on save the submenu. In this case the base menu OnSave will not be called.

The menu is accessible by this variable.
In menus created for TreeGrid cell there are set these Menu properties: TGrid Grid; TRow row; string col.

Example: <C Name="A" Menu="{ Items: [ {Name:'XXX'}, {Name:'YYY'} ], OnSave: function(I,D){ alert('Selected '+I.Name+' in col '+this.Col); } }"/>
TDialog event void

OnClose

( )
Called on close dialog.
upd 12.0 TMenu event TMenu

OnSubmenu

(TMenuItem Item, TMenu Submenu, TPosition Pos)
Called on show submenu.
You can update or even dynamically generate or download the submenu here.
The Item is menu item in parent menu for that is submenu shown.
The Submenu is new submenu to be shown, its Items and other parameters are the subset of the Item properties.
The function can modify the Submenu or can create and return new submenu.
(Since 12.0) The function can modify the submenu position Pos.
Can return false to suppress showing the submenu.
TMenu event bool

OnExpand

(TMenuItem Item)
Called on expand sub level
The Item is the menu sub level item to be expanded.
Can return false to suppress showing sub section.
TMenu event void

OnMove

(TMenuItem Item)
Called after key cursor moves to new position. Item is the new cursor position.
TMenu event bool

OnMoveOut

(int dir)
Called when cursor is to be moved outside the menu (it is on the first on last item and arrow key is pressed). dir is 0 up, 1 down.
Return true to hide cursor, false to let the cursor stay on the first/last item
TMenu event void

OnTab

(bool dir, Event event)
Called when pressed tab key. dir is 0 for tab right, 1 for tab left. event is standard JavaScript key event.
TMenu event bool

OnButton

(string button)
Called after click on any bottom button, see Buttons.
button can be "Ok","Clear","All", "Cancel"
Can return false to suppress the action
new 6.4 chg 8.0 TMenuItem event bool

OnClick

( )
Called after click to the menu item, before any its action.
Return false to suppress the action and continue in menu.
(Since 8.0) Return true to suppress the action and close the menu.
Return null to do default action.
The item is accessible by property TMenuItem this. The item name, like other properties, by this.Name.
The item has set property TMenu Owner to access the owner menu and TMenuItem Parent to access parent item or menu.
In menus created for TreeGrid cell there are set these Menu properties: TGrid Grid; TRow Row; string Col. So access the grid from OnClick by this.Owner.Grid.
Since 8.0 it can be also string to be used as the function code, e.g. {Name:"Item 1", OnClick:"alert(this.Owner.Col)"}
new 9.0 TMenuItem event string

OnChanged

(string Value)
Called after any change in item of type Bool, Enum or Edit, but before the change is applied.
The item is accessible by property TMenuItem this. The item name, like other properties, by this.Name.
The Value is new value to be set to item. Original value is in this.Value.
The function must return the value to be set into I.Value, return Value to not change the input or this.Value to discard the change or something else.
The item has set property TMenu Owner to access the owner menu and TMenuItem Parent to access parent item or menu.
In menus created for TreeGrid cell there are set these Menu properties: TGrid Grid; TRow Row; string Col. So access the grid from OnClick by this.Owner.Grid.
It can be also string to be used as the function code, e.g. <Name:"Item 1", OnClick:"alert(Value + ' in ' + this.Owner.Col)"}

This event can be used to modify input value.
Or to recalculate other menu values related to this item - use methods FindItem and SetValue.

Custom menu JavaScript methods

new 9.0 TMenu method TMenuItem

FindItem

(string Name)
Finds menu item by its Name attribute value.
new 9.0 TMenu method void

SetValue

(TMenuItem Item, type Value)
Sets the Value to Item type Bool, Enum or Edit and shows changes in menu.
new 9.0 TMenu method void

SetText

(TMenuItem Item, string Text)
Sets the Text to Item caption and shows changes in menu.

Calendar dialog

TreeGrid calendar dialog. Supports choosing one or more dates from calendar. Supports also time cell.
In grid these attributes can be used in cell Calendar attribute, in TreeGrid menu JSON format.
new 6.2 TCalendar type

Date

Date to show in calendar. It can be string in English notation "M/d/yyyy" or "d.M.yyyy" or "yyyy-M-d". Or it can be count of milliseconds from 1/1/1970. Or it can be JavaScript Date object.
If set Range attribute, it can be range of dates, in strings or counts of milliseconds. In Range are the bounds separated by '~', the ranges by ';'.
Used only for custom calendars.
new 6.2 TCalendar bool

Range

[0]
If the calendar support choosing more dates or date ranges.
The individual dates can be selected or unselected by mouse click and date ranges by mouse drag. By mouse it only selects, not unselects.
The dates can be clean by Clear button and accepted by Ok button.
new 6.2 TCalendar string

TimeFormat

Format string for editing time (e.g "hh:mm"). When set, the calendar will let a user to edit also time part of date.
new 6.2 TCalendar string

Class

["GMPick"]
Calendar class prefix, it must be set, otherwise calendar is not shown correctly. It is base class prefix, not custom one like in Menu.
new 6.2 TCalendar bool

Rtl

[0]
Displays the calendar in right to left mode for Middle East languages.
To switch to Persian Hirji dates in custom calendar you need to set Formats.Hirji = 1.
new 6.2 TCalendar bool

ReadOnly

[0]
The calendar shows all dates inactive and a user cannot change the selected date(s).
new 6.2 upd 6.7 TCalendar int

Buttons

[0/7]
Which buttons will be displayed, bit array.
By default are no button displayed for one date calendar and all buttons for date ranges.
1.bit &1 - Today, 2.bit &2 - Clear, 3.bit &4 - Ok, 4.bit &8 - Yesterday (new 6.7)
new 11.0 TCalendar int

Buttons2

[1]
If the OK button will be displayed on the second, month / year, calendar. 0 - no, 1 - yes, -1 only if the first calendar shows footer buttons or time
new 6.2 TCalendar int

RowsPrev

[0]
How many full rows will be displayed from previous month above
new 6.2 TCalendar int

RowsNext

[0]
How many full rows will be displayed from next month below.
The calendar displays minimally 6 rows, even if the last row is fully from the next month.
new 6.2 upd 6.7 TCalendar object

Texts

[ { Ok:"OK",Clear:"Clear",Cancel:"Cancel",Yesterday:"Yesterday" } ]
Texts for calendar buttons
TDialog string

Header

For TreeGrid calendar it is HTML displayed in on the cell, when the menu is shown.
For custom calendar it is HTML displayed inside place set by TPosition object.
TDialog string

Head

Top HTML - calendar caption, with close icon.
TDialog string

Foot

Bottom HTML - calendar footer, displayed under calendar
TDialog bool

Shadow

[1]
If it shows shadow under the dialog.
TDialog bool

ShadowHeader

[1]
If it shows shadow under the header.
TDialog bool

HeadClose

Displays close button on the right in the Head. Only if some Head is set.
TDialog bool

AppendHeader

[1]
Append dialog next to Header (if any) rather than to the place or to the TreeGrid cell.
TDialog bool

Modal

[0]
If set to 1, disables all other controls at page when the dialog is shown.
TDialog bool

CloseOut

[0]
If it is automatically closed when mouse moves outside the dialog and its header.
TDialog bool

CloseClickHeader

[0]
If it is automatically closed after click to Header.
For predefined header in TreeGrid menu like for Enum type is already set.

Custom calendar and JavaScript events

TreeGrid library contains global function to show a custom calendar.
new 6.2 global func. TCalendar

ShowCalendar

(TCalendar Calendar, TPosition Pos, function Func, type Date)
Shows custom calendar on given position.
Remember, the Calendar and Pos are JavaScript objects, not strings.
Func is function called when the calendar is closed and value(s) is accepted - replaces OnSave event.
Date is initial date(s), replaces Date.
Returns the Calendar or new TCalendar object if the Calendar has been set in string.
To show calendar in grid for some cell use grid API method ShowCalendar instead.
new 6.2 TCalendar method void

Close

( )
Closes the calendar manually. Usable especially for not Popup calendars.
new 6.2 TCalendar event bool

OnSave

(type date)
Called after a user chooses the date(s).
The date is count of milliseconds from 1/1/1970. For range is the range of these integers.
Return false to cancel closing.
new 6.2 TCalendar event void

OnChange

(type date)
Called in multiselect (Range=1) for every change.
The date is range(s) of counts of milliseconds from 1/1/1970.
new 6.2 TCalendar event bool

OnCanEditDate

(Date date)
Called for every day shown in calendar to choose if it is selectable or not
new 10.0 TCalendar event string

OnGetCalendarDate

(Date date, string text, string[ ] classes, bool range)
Called when displaying Calendar dialog for every date in the calendar to let modify the displayed date text and / or class.
date is the Date object for given day. text is the text that will be displayed for the day.
classes is an array of four CSS classes that will be used for the day: [normal, hover, selected, selected+hover]. The event handler can modify theses four strings to use different CSS classes.
range is true if the calendar will permit selecting more dates or date ranges. If it is false, the classes use only first two strings.
Return the text of date or text.
TDialog event void

OnClose

( )
Called on close dialog.
new 6.7 TCalendar event void

OnButtonClick

(int button)
Called on click to the control button.
button = 1 - OK, 2 - Cancel, 3 - Today, 4 - Yesterday.
Return the clicked button number or 0 to ignore the click.

Custom dialog in JavaScript

TreeGrid library contains global functions to show a custom dialog with any HTML content.
For other TDialog properties see menu attributes for TDialog object.
global func. TDialog

ShowDialog

(TDialog Dialog, TPosition Pos)
Shows custom dialog on given position.
Remember, the Dialog and Pos are JavaScript objects, not strings.
Returns the Dialog or new dialog object if the Dialog has been set in string.
To show dialog in grid for some cell use grid API method ShowDialog instead.
To show popup dialog in some grid use such code: G.CloseDialog(); G.Dialog = ShowDialog("HTML to show",{X:mousex,Y:mousey});
TDialog prop. object

Tag

The DOM object of the dialog HTML representation.
Use for example to focus an input on the dialog like: ShowDialog ({...},{...}).Tag.getElementsByTagName("input")[0].focus();
TDialog method void

Close

( )
Closes the dialog manually. Usable especially for not Popup dialogs.
TDialog string

Body

Basic HTML content of the dialog
TDialog bool

ClosePlace

If the dialog is automatically closed when mouse moves outside the place set by TPosition (used for hint).
TDialog bool

CloseIn

If the dialog is automatically closed when mouse moves into the dialog (used for informational message).
TDialog int

CloseTimeout

[300]
How long should be fulfilled the CloseOut, ClosePlace, CloseArea or CloseIn condition to close the dialog.
TDialog bool

CloseClick

If the dialog is automatically closed after click to dialog.
TDialog bool

CloseMove

If the dialog is automatically closed when mouse moves for given count of pixels (used for tooltip).
TDialog bool

CloseAfter

If the dialog is automatically closed after given count of milliseconds.
TDialog bool

HeadDrag

[1]
If the dialog can be moved by mouse dragging the Head.
TDialog int

Shift

[-1]
How much (in pixels) will be the dialog moved in align direction from the header (to overlay header and dialog).
TDialog int

ShadowWidth

[7]
The width of shadow in pixels, it will be reserved to the edge right and bottom edge.
TDialog bool

Wrap

If the dialog lets wrapping of texts, 0 - no, 1 - yes, null - default.
TDialog bool

InDiv

[0]
Set it to 1 when it is already in div to not surround it by another.
TDialog object

FocusTag

Tag that is focused after click to scroll, for null it is the main dialog tag.