Library for TreeGrid v6.0
Menus
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 by 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.
{
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 menu/dialog attributes.
The TDialog is precedestor of TMenu class and all its attributes can be used also in menu
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
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.
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.
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.
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.
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
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.
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.
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.
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.
TMenuItem bool Disabled [0] new 6.1 .
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 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.
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.
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 .
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
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
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.
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.
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 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
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 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 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
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 grid cell use such code:
G.CloseDialog(); G.Dialog = ShowMenu("|A|B|C",{Tag:G.GetCell(row,col)});
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.
TPosition specifies position on screen of rectangle place for that is the dialog displayed – it 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.
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
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
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
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
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.
TDialog bool Rtl [0] new 6.2.
Displays the dialog in right to left mode for Middle East languages.
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.
In menus created for TreeGrid cell there are set these Menu properties: TGrid Grid; TRow row; string col.
TDialog event void OnClose ( ) .
Called on close dialog.
TMenu event TMenu OnSubmenu (TMenuItem Item, TMenu Submenu) .
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.
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
TMenuItem event bool OnClick new 6.4 .
Called after click to the menu item, before any its action.
Can return false to suppress the action
The item has set property TMenu Owner to access the owner 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.
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.
TCalendar type Date new 6.2 .
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.
TCalendar bool Range [0] new 6.2.
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.
TCalendar string TimeFormat new 6.2.
Format string for editing time (e.g ”hh:mm”). When set, the calendar will let a user to edit also time part of date.
TCalendar string Class [“GMPick”] new 6.2.
Calendar class prefix, it must be set, otherwise calendar is not shown correctly. It is base class prefix, not custom one like in Menu.
TCalendar bool Rtl [0] new 6.2.
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.
TCalendar bool ReadOnly [0] new 6.2.
The calendar shows all dates inactive and a user cannot change the selected date(s).
TCalendar int Buttons [0/7] new 6.2;upd 6.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)
TCalendar int RowsPrev [0] new 6.2.
How many full rows will be displayed from previous month above
TCalendar int RowsNext [0] new 6.2.
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.
TCalendar object Texts [ { Ok:"OK",Clear:"Clear",Cancel:"Cancel",Yesterday:”Yesterday” } ] new 6.2;upd 6.7.
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.
TreeGrid library contains global function to show a custom calendar.
global func. TCalendar ShowCalendar (TCalendar Calendar, TPosition Pos, function Func, type Date) new 6.2 .
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.
TCalendar method void Close ( ) new 6.2 .
Closes the calendar manually. Usable especially for not Popup calendars.
TCalendar event bool OnSave (type date) new 6.2 .
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.
TCalendar event bool OnChange (type date) new 6.2 .
Called in multiselect (Range=1) for every change.
The date is range(s) of counts of milliseconds from 1/1/1970.
TCalendar event bool OnCanEditDate (Date date) new 6.2 .
Called for every day shown in calendar to choose if it is selectable or not
TDialog event void OnClose ( ) .
Called on close dialog.
TCalendar event int OnButtonClick (int button) new 6.7 .
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
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 grid cell use such code:
G.CloseDialog(); G.Dialog = ShowDialog("HTML to show",{Tag:G.GetCell(row,col)});
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