Library for TreeGrid v6.0

Menus

TreeGrid documentation index

 

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.

 

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.

 

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.

 

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.

 

TMenuItem       bool                    Disabled [0]                                                                                                                   new 6.1 .

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                                                                                                                                                             .

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

 

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.

 

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

 

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

 

Custom menu position

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. 

 

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

 

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

 

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.

 

TDialog             bool                    Rtl     [0]                                                                                                                                              new 6.2.

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.

 

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.

 

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.

 

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.

 

Custom calendar and JavaScript events

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

 

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