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.

Since 14.0 it can be used also to show toolbar. To show toolbar set usually CloseClickOut: 0, Popup: 0, HeadClose: 0.
To show horizontal toolbar set Horz: 1 or 2. For image buttons use Icon or Class or ClassName.

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

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

0	Only 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.
1	Only 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".
2	All values are returned.
	The Bool items are returned as "Name:0" or "Name:1". The Enum and Edit items are returned as "Name:Value".
3	All values are returned.
	The Bool items are returned as "0" or "1". The Enum and Edit items are returned as "Value" only.
4	All values are returned
	The Bool items are returned as "" or "Name". The Enum and Edit items are returned as "Value" only.

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.
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.
Top HTML - menu caption, will not be scrolled.
Since 14.0 if set to "#" it is not displayed. Setting to "" displays it as empty.
Bottom HTML - menu footer, will not be scrolled.
It is ignored when shown Buttons.

Visual settings

If set the menu horizontally instead of vertically. Useful for showing toolbars.
0 - menu is shown vertically.
1 - menu is shown horizontally. Head and Foot are shown above and below the menu items.
2 - menu is shown horizontally. Head and Foot are shown left and right the menu items.
If left side cursor icons are shown
If tree icons expand / collapse are shown
Tree level indent from left in pixels
If it shows shadow under the dialog
If it shows shadow under the header
Displays close button on the right in the Head. Only if some Head is set.
Append dialog next to Header (if any) rather than to the place or to the TreeGrid cell.
If set, splits the menu Items to given columns count. Use to simplify the list, to avoid splitting the Items manually.
Minimal height in pixels of all items in horizontal menu. Horizontal alignment of all items, it can be Left, Right, Center or Justify.

Key navigation

If the dialog gets key focus, 1 is default for menu, 0 for dialog.
0 - Enter always accepts results and closed the menu
1 - Enter switches on/off items that support it (Bool items, collapsible levels, popup menus, ...)
If Space key is ignored, useful when menu is used as support for editbox
Count of items to move cursor by for PgDn / PgUp keys

Behavior

If collapses all other expanded sections when is expanding another section on the same level
When (in millisecond) will be shown submenu on mouse hover parent item (0 = never)
When (in millisecond) will be shown sub section on mouse hover parent item (0 = never)
When (in millisecond) will be expanded inline Enum item on mouse hover (0 = never)
If shows overflowed item texts as hint
The time after Tip for menu item is displayed, in milliseconds.
The time after Tip for menu item is automatically hidden, in milliseconds. 0 means never. Or should be higher than StartTip.
Position of the Tip. Values like Align.
If set empty (default), the Tip is shown under mouse cursor.
If set to 1, disables all other controls at page when the dialog is shown.
If it is automatically closed when mouse moves outside the dialog and its header
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

If set to 1, never shows vertical scrollbar
Maximal height of the dialog in pixels (without header), for higher dialog will be displayed scrollbar.
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)
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).
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
Minimal distance to window edge in pixels, for 0 can be dialog placed immediately next to the edge.
Automatically updates size when the Area or body resizes.
Automatically updates size when body scrolls.
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.
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

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.
Since 14.0 Name starting and ending by "-" displays the item as Caption.
HTML text displayed as menu item, if not set, used Name instead.
Since 14.0 if set to "#" it is not displayed. Setting to "" displays it as empty.
If defined, replaces item Text in vertical menu (Horz = 0). If defined, replaces item Text in horizontal menu (Horz = 1 / 2). If set, sets the width of item Text.
URL to item icon file displayed left side to item text.
Width of the icon in pixels, must be specified to correctly display the icon.
HTML displayed left side to item text, right side to Icon.
Width of the LeftHtml in pixels, must be specified to correctly display the left html.
HTML displayed right side to item text and value, left side to submenu menu icon.
Width of the RightHtml in pixels, must be specified to correctly display the right html.
The menu item gets the CSS class as Menu.Base+MenuItem.Class and Menu.Class+MenuItem.Class.
Basically XXMenu+Class, where XX is the Style prefix like TS for Standard style.
The menu item gets the CSS class with Name as Menu.Base+MenuItem.ClassName+MenuItem.Name and Menu.Class+MenuItem.ClassName+MenuItem.Name.
Basically XXMenu+ClassName+Name, where XX is the Style prefix like TS for Standard style.
The menu item gets the CSS class with Value as Menu.Base+MenuItem.ClassValue+MenuItem.Value and Menu.Class+MenuItem.ClassValue+MenuItem.Value.
Basically XXMenu+ClassValue+Value, where XX is the Style prefix like TS for Standard style.
For Enum type the menu items gets also the CSS class with enum value index from 0, as XXMenu+ClassValue+Index.
Html shown as tooltip on mouse hover the item.
Tip shown only if the menu item has specific value XXX.
For Enum type the XXX can be also Enum value index from 0.
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.
Horizontal alignment of the item text. It can be Left, Right, Center, Justify.
If the item is hidden. For sublevels and columns it hides the whole sublevel.
To hide only sublevel parent, set its Expanded : -1.
If set to 1 the item is not rendered at all.
If set to 2 (since 14.0) the item is rendered hidden.
If the item is disabled. Disabled item is shown as inactive and inaccessible.
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.
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.
If set to 1, displays inactive item as not clickable caption.
If set to 2, it the same as 1, but the caption is not hidden as unused, if there are no items below it.

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.
The sub items are displayed in sub level.
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.
If the sub items will be expanded or expandable

null	expanded, not collapsible, this parent item is displayed as inactive caption
-1	expanded, not collapsible, this parent item is hidden
1	expanded, collapsible
0	collapsed, 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.
The sub items are displayed in sub popup menu (on right side).
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.
If set, splits the submenu Items to given columns count. Use to simplify the list, to avoid splitting the Items manually.
Position of the submenu, how it is aligned to the parent menu. Values are the same as Align.
Default value is "next top" for Horz = 0 or "left below" for Horz = 1 / 2.

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.
Count of columns to display in them the included Items. This item itself is not displayed.
The sub items are displayed in more columns.
Count of rows per individual column, for example "5,8,6" for 3 columns shows 5 rows, 8 rows and 6 rows.
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.
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.
Displays checkbox on the right and the menu item becomes not clickable.
Since 14.0.11 if set to 2 it permits three states of the Value: 0, 1 and "".
Since 14.0.11 if set to 3 it calculates its state according to sub items, if set with Level or Menu and permits three states.
Item Bool Value - 1 checked, 0 unchecked and since 14.0.11 for Bool 2 or 3 can be "".
Displays the check box on the left instead of the right.
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.
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.
If the radio button can be unchecked - to let all radio buttons to be in group empty.
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.
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.
If set, the menu item is not affected by menu button Clear / All on.

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.
Displays combo box on the right.
A selected item value in the combo box.
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.
If set, splits the Enum Items to given columns count. Use to simplify the list, to avoid splitting the Items manually.
If set, the Enum permits choosing more items. The chosed items are set in value as comma separated list of the Items names.
If set to 1 it shows only the list and the changes are applied always when the enum menu is closed.
If set to 2 it shows also buttons "Ok", "Clear" and "Cancel". The changes are applied only if clicked to "Ok" button.
A value representing all Range items are on.
If set and all items are checked, the Value will be set to ValueAll.
If not set, Value will be set to all the checked items.
Width of the combo box in pixels.
If it is 0, the combo box resizes to accommodate its value.
Displays the combo box on the left instead of the right.
If set Menu attribute with Enum, it displays the Enum as popup menu and does not show the Enum value, but the Value is still changed by the popup menu chosen item.

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.
Displays edit box on the right.
Since 14.0 if set to 2 it displays the edit box read only.
Input value
Width of the edit box in pixels.
If it is 0, the edit box resizes to accommodate its value.
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.
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.
Shows custom menu near the mouse cursor. Other settings see ShowMenu.
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.
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.
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.
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.
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.
If set to 1, the X, Y are relative to mouse pointer.
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"
Since 14.0 the Align can be set to "none" to not set the dialog position at all, for custom position routine.

Horizontal alignment

prev	outside attached to left side, can be automatically changed to "next" if dialog cannot fit to screen
next	outside attached to right side, can be automatically changed to "prev" if dialog cannot fit to screen
left	inside left aligned, minimal width is Width, can be automatically changed to "right" if dialog cannot fit to screen
right	inside right aligned, minimal width is Width, can be automatically changed to "left" if dialog cannot fit to screen
center	inside centered horizontally, can be automatically shifted horizontally if dialog cannot fit to screen

Vertical alignment

above	outside attached from top, can be automatically changed to "below" if dialog cannot fit to screen
below	outside attached from bottom, can be automatically changed to "above" if dialog cannot fit to screen
top	inside aligned to top, can be automatically changed to "bottom" if dialog cannot fit to screen
bottom	inside aligned to bottom, can be automatically changed to "top" if dialog cannot fit to screen
middle	inside centered vertically, can be shifted vertically if dialog cannot fit to screen

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
If set Move and Mouse and it automatically moves the dialog above the mouse to fit to screen and adds here the MoveMouse pixels.
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
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
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

Start and runtime position of key cursor - an item Name.
Places the key cursor to clickable item with this Value (or Name if missing).
If it is automatically closed after selecting clickable item or click button.
If set to 0, the menu must be closed manually Close method.
If it is automatically closed after click outside the menu. It is default 1 for menu and 0 for dialog.
Character that separates the individual item results when returns the value of Bool, Enum and Edit in OnSave
Character that separates Name from Value when returns the value of Bool, Enum and Edit in OnSave
Character that replaces Separator and NameSeparator when entered to Edit input
Base dialog class prefix, all classes in menu begins with this prefix.
Default value in TreeGrid menu is Cfg.Style+"Menu".
Custom dialog class prefix, if set, all classes in menu contain base class definition and the with this class prefix
Custom class to inherit for submenu, set to Class of all submenus
Custom class to inherit for Enum menus, set to Class of all enums.
Texts for menu buttons
If set, the menu loads and saves its results in this <input>.
Can be an id of the <input> tag or tag <input> itself.
Displays the dialog in right to left mode for Middle East languages.

Custom menu JavaScript events

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); } }"/>
Called on close dialog.
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.
Called on expand sub level
The Item is the menu sub level item to be expanded.
Can return false to suppress showing sub section.
Called after key cursor moves to new position. Item is the new cursor position.
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
Called when pressed tab key. dir is 0 for tab right, 1 for tab left. event is standard JavaScript key event.
Called after click on any bottom button, see Buttons.
button can be "Ok","Clear","All", "Cancel"
Can return false to suppress the action
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)"}
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.
Return new value to change the input.
Since 14.0 return null to ignore the event handler. 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.
Called after any change in item of type Bool, Enum or Edit, but before the change is applied.
Called after the Item OnChanged event, with the same behavior.

Custom menu JavaScript methods

Finds menu item by its Name attribute value.
Sets the Value to Item type Bool, Enum or Edit and shows changes in menu.
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.
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.
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.
Format string for editing time (e.g "hh:mm"). When set, the calendar will let a user to edit also time part of date.
Calendar class prefix, it must be set, otherwise calendar is not shown correctly. It is base class prefix, not custom one like in Menu.
Displays the calendar in right to left mode for Middle East languages.
To switch to Persian Hijri dates in custom calendar you need to set Formats.Hirji = 1.
The calendar shows all dates inactive and a user cannot change the selected date(s).
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)
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
How many full rows will be displayed from previous month above
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.
Texts for calendar buttons
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.
Top HTML - calendar caption, with close icon.
Bottom HTML - calendar footer, displayed under calendar
If it shows shadow under the dialog.
If it shows shadow under the header.
Displays close button on the right in the Head. Only if some Head is set.
Append dialog next to Header (if any) rather than to the place or to the TreeGrid cell.
If set to 1, disables all other controls at page when the dialog is shown.
If it is automatically closed when mouse moves outside the dialog and its header.
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.
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.
Closes the calendar manually. Usable especially for not Popup calendars. 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.
Called in multiselect (Range=1) for every change.
The date is range(s) of counts of milliseconds from 1/1/1970.
Called for every day shown in calendar to choose if it is selectable or not
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.
Called on close dialog.
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.
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});
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();
Closes the dialog manually. Usable especially for not Popup dialogs.
Basic HTML content of the dialog
If the dialog is automatically closed when mouse moves outside the place set by TPosition (used for hint).
If the dialog is automatically closed when mouse moves into the dialog (used for informational message). How long should be fulfilled the CloseOut, ClosePlace, CloseArea or CloseIn condition to close the dialog. If the dialog is automatically closed after click to dialog. If the dialog is automatically closed when mouse moves for given count of pixels (used for tooltip). If the dialog is automatically closed after given count of milliseconds. If the dialog can be moved by mouse dragging the Head. How much (in pixels) will be the dialog moved in align direction from the header (to overlay header and dialog). The width of shadow in pixels, it will be reserved to the edge right and bottom edge. If the dialog lets wrapping of texts, 0 - no, 1 - yes, null - default. Set it to 1 when it is already in div to not surround it by another. Tag that is focused after click to scroll, for null it is the main dialog tag.