Item class (RadialMenu)

Item(oParent)

new Item(oParent)

The Item object holds all information about an item within the RadialMenu object

Every option of the RadialMenu.ItemOptions type has associated a property of the Item object. For instance, the option:

caption {string}, defines the item's caption
is associated with the property:
Caption {string}, defines the item's caption
which means that the following statements are equivalent:
oItem.Options = {caption: "font"}
oItem.SetOptions({caption: "font"})
oItem.Caption = "font"
oItem.SetCaption("font")
where oItem is an object of Item type
Parameters:
Name Type Description
oParent Item Indicates an object of Item type that specifies the parent of the item.

Members

Caption :string

The Caption property defines the item's caption in ex-HTML format. The caption is shown on the "items" portion of the control. The SubCaption property defines the item's caption (ex-HTML format, shown under the "sub-items" portion only). You can include pictures in the caption using the tag. For instance, the caption "<img>logo</img>" displays the "logo" image within the item's caption. The "logo" image can be added using the exontrol.HTMLPicture.Add method. The Image property specifies the image to be displayed on the "items" portion of the control, while the Caption property specifies the caption (ex-HTML format) to be displayed on the "items" portion of the control.
Type:
  • string
Example
null {null}, indicates no caption
"caption" {string}, declares a plain-caption
"&lt;b&gt;text&lt;/b&gt;" {string}, displays the text in bold
"&lt;img&gt;logo&lt;/img&gt;" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add method
Caption

Color :string

The Color property defines the item's background color to be shown within the "items" portion of the control. The SubColor property specifies the item's background color in the "sub-items" portion. The Shapes property defines the shapes used by each part of the control, allowing customization of its appearance. By default, items are displayed as pie shapes, while on the sub-items layer they appear as ring arcs. No color is applied by default, so the item's background is transparent.

The Color property accepts any CSS color value, such as one of the following:

  • any of 140 color names any browser supports (such as red, blue, green, ...)
  • hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  • hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
Type:
  • string
Example
null {null}, indicates no color
"red" {string}, defines a red-pie
"rgb(255,0,0)" {string}, defines a red-pie
"rgba(255,0,0,0.5)" {string}, defines a 50% red-pie
Color

Disabled :boolean

The Disabled property disables or enables the item (including the root item). Setting the Disabled property to true disables the item and all its descendant items, while setting it to false enables the item (if its parent is enabled) and all its descendant items. The AllowToggleExpand property defines whether the user can expand or collapse the item while it is disabled. By default, the Enabled property is set to true, which means that all items are enabled by default.
Type:
  • boolean
Example
false {boolean}, enables the item (including all its descendent items)
true {boolean}, disables the item
Disabled

Enabled :boolean

The Enabled property enables or disables the item (including the root item). Setting the Enabled property to false disables the item and all its descendant items, while setting it to true enables the item (if its parent is enabled) and all its descendant items. The AllowToggleExpand property defines whether the user can expand or collapse the item while it is disabled. By default, the Enabled property is set to true, which means that all items are enabled by default.
Type:
  • boolean
Example
false {boolean}, disables the item (including all its descendent items)
true {boolean}, enables the item
Enabled

Image :string

The Image property defines the name of the image or picture the item displays (the "items" section only). The image can be added using the exontrol.HTMLPicture.Add method. You can also display a picture in the Caption property using the <img> ex-HTML tag. The DisplayParentType.imageAlign field specifies the alignment of the image relative to the caption (valid for the content only). The DisplayParentType.imageSize field specifies the aspect ratio used to display the image.
Type:
  • string
Example
null {null}, indicates no image
"logo" {string}, displays the "logo" image
Image

(readonly) Index :number

The Index property returns the item's index (0-based). This index is relative only to the item's siblings collection, meaning it reflects the item's order among its siblings. As a result, different items can share the same index if they belong to different sibling collections. The index indicates the order in which items are added, while the position determines the order in which they are displayed. For example, if three items are added as item1, item2, and item3, their indexes are 0, 1, and 2. If item3 has its position set to 0, the display order becomes item3, item1, item2, but their indexes remain unchanged (0, 1, and 2). The Position property gets or sets the display order of the item, while the Index property retrieves its original insertion order.
Type:
  • number
Example
The following statements are equivalent:

 oItem.GetIndex() {number}, returns the index of the item (0-based)
 oItem.Index {number}, returns the index of the item (0-based)

where oItem is an object of Item type
Index

Key :string

The Key property defines the key for the item. If no key is provided, the item's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor>, and so on. For instance, the caption "<fgcolor red>logo</fgcolor>" has the plain-caption "logo". The Key property can be used to request an item using the Root.Item(key) method.
Type:
  • string
Example
"logo" {string}, defines the item with the giving key (logo). You can use the Root.Item("logo") method to request the item giving its key.
Key

Options :RadialMenu.ItemOptions

The Options property defines the options of the item as an object of RadialMenu.ItemOptions type. Each field within the options object corresponds to a property of the item. For instance, the caption field of the RadialMenu.ItemOptions object corresponds to the Item.Caption property, which means that the following statements are equivalent:
oItem.SetOptions({caption: "font"})
oItem.Options = {caption: "font"}
oItem.Caption = "font"
oItem.SetCaption("font")
where oItem is an object of Item type.
Type:
Example
The following statements are equivalent:
 
 oItem.SetOptions({visible: false})
 oItem.Options = {visible: false}
 oItem.Visible = false
 oItem.SetVisible(false)

where oItem is an object of Item type
Options

Parent :Item

The Parent property retrieves the parent of the item. Use the Item.Parent property to get the parent of an item. The parent of the root item is null, while the parent of any other item is an object of Item type. The Parent property is read-only. You can use the Item.Add() method to add a child item to an item, which automatically sets the parent of the child item to that item. The GoBack() method of the control allows you to browse back to the parent of the currently browsed item, while the Item() method allows you to request an item by its key or caption.
Type:
Since:
  • 2.4
Example
The following statements are equivalent:

 oItem.GetParent() {Item}, gets the parent of the item
 oItem.Parent {Item}, gets the parent of the item

where oItem is an object of Item type
Parent

Position :number

The Position property defines the item's position (0-based). This position is relative only to the item's siblings collection, meaning it reflects the item's order among its siblings. As a result, different items can share the same position if they belong to different sibling collections. The index indicates the order in which items are added, while the position determines the order in which they are displayed. For example, if three items are added as item1, item2, and item3, their indexes are 0, 1, and 2. If item3 has its position set to 0, the display order becomes item3, item1, item2, but their indexes remain unchanged (0, 1, and 2). The Position property gets or sets the display order of the item, while the Index property retrieves its original insertion order.
Type:
  • number
Example
0 {number}, indicates that the item should be displayed first
2 {number}, indicates that the item should be displayed third
Position

SubCaption :string

The SubCaption property defines the item's caption (ex-HTML format, shown under the "sub-items" portion only). The Caption property is shown on the "items" portion of the control. You can include pictures in the SubCaption using the tag. For instance, the SubCaption "logo" displays the "logo" image within the item's sub-caption. The "logo" image can be added using the exontrol.HTMLPicture.Add method. The SubImage property specifies the image to be displayed on the "sub-items" portion of the control, while the SubCaption property specifies the caption (ex-HTML format) to be displayed on the "sub-items" portion of the control.
Type:
  • string
Example
null {null}, indicates no caption
"caption" {string}, declares a plain-caption
"&lt;b&gt;text&lt;/b&gt;" {string}, displays the text in bold
"&lt;img&gt;logo&lt;/img&gt;" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add method
SubCaption

SubColor :string

The SetSubColor() method sets the item's background color to be shown within the "sub-items" portion of the control. The Color property defines the item's background color in the "items" portion. The Shapes property defines the shapes used by each part of the control, allowing customization of its appearance. By default, items are displayed as pie shapes, while on the sub-items layer they appear as ring arcs. No color is applied by default, so the item's background is transparent.
Type:
  • string
Example
null {null}, indicates no color
"red" {string}, defines a red-pie
"rgb(255,0,0)" {string}, defines a red-pie
"rgba(255,0,0,0.5)" {string}, defines a 50% red-pie
SubColor

SubImage :string

The SubImage property defines the name of the image or picture the item displays in the "sub-items" section only. The image can be added using the exontrol.HTMLPicture.Add method. You can also display a picture in the SubCaption property using the <img> ex-HTML tag. The DisplayParentType.imageAlign field specifies the alignment of the sub-image relative to the sub-caption (valid for the content only). The DisplayParentType.imageSize field specifies the aspect ratio used to display the sub-image.
Type:
  • string
Example
null {null}, indicates no image
"logo" {string}, displays the "logo" image
SubImage

Visible :boolean

The Visible property shows or hides the item. Setting the Visible property to false hides the item and all its descendant items, while setting it to true shows the item (if its parent is visible) and all its descendant items. The method has no effect on the root item, which is always visible. The Root property gets the root-item of the item. By default, the item is visible (the Visible property is true).
Type:
  • boolean
Example
false {boolean}, hides the item (including all its descendent items)
true {boolean}, shows the item
Visible

Methods

Add(oOpts) → {Item}

The Add() method adds a child item. You can define the items of the control using the items field with a string representation such as "File(New,Open),Exit", or by using the Add() method. The Add() method inserts a child item into the item, meaning it appends the child item to the end of the current item's children collection. The Position property specifies the item's position among its siblings; however, the Add() method always adds the child item to the end of the current item's children collection. The Remove method removes the item from its parent's children collection, meaning it removes the item from its siblings collection. The Clear() method clears only the item's descendants, meaning it removes all children of the item and their descendants, but not the item itself.
Parameters:
Name Type Description
oOpts RadialMenu.ItemOptions Specifies an object of RadialMenu.ItemOptions type that holds information about the item, such as caption, image and so on. If the oOpts parameter is not-of object type it indicates the item's ex-HTML caption instead.
Returns:
Returns the child-item as an object of Item type
Type
Item
Example
oRadialMenu.Root.Add("File"), adds a child-item with caption "File" to the root-item of the control
oRadialMenu.Root.Add({caption: "File", image: "fileIcon", key: "file"}), adds a child-item with caption "File" image "fileIcon" and key "file" to the root-item of the control
Add

Clear()

The Clear() method clears the item's descendants only. The Remove method removes the item from its parent's children collection, meaning it removes the item from its siblings collection. The Clear() method clears only the item's descendants, meaning it removes all children of the item and their descendants, but not the item itself. The Visible property specifies whether the item is visible or hidden, while the Enabled property specifies whether the item is enabled or disabled. The Root.Remove() is equivalent with Root.Clear() as it clears all items of the control.
Example
oItem.Clear(), clears the item's descendants only
oRadialMenu.Root.Clear(), clears all items of the control as it clears the root-item's descendants
Clear

Item(key) → {Item}

The Item() method searches for an item giving its key or plain caption. The key can be defined using the [key] flag within the Load() method, or by using the Key property of the item. If no key is provided, the item's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor> and so on. For instance, the caption "<fgcolor red>logo</fgcolor>" has the plain-caption "logo". The Item() method searches for an item with a matching key or plain-caption within the current item's descendants and returns it. The Root.Item() method searches for an item with a matching key or plain-caption within all items of the control and returns it.
Parameters:
Name Type Description
key any The key parameter can be any of the following:
  • key {object}, Indicates an object of Item that specifies the item itself
  • key {string}, Specifies the item's key or plain-caption
Returns:
Returns null or an object of Item type with specified key / caption that descends from the item.
Type
Item
Example
oItem.Item("logo"), searches for an item with key or plain-caption "logo" within the current item's descendants and returns it
oRadialMenu.Root.Item("logo"), searches for an item with key or plain-caption "logo" within all items of the control and returns it
Item

Load(value) → {Item}

The Load() method loads the item with a string representation. The Load() method is used by the Root.Load() method to load the control with a string representation. The Load() method can also be used to load an item with a string representation, which allows you to define the item's children and their options in a single statement. The string-representation supports the following flags: [key], [vis]/[hid], [dis], [img], [color], [scap], [simg] and [scolor]. For instance, the string "File[img=fileIcon](New,Open),Exit" defines an item with caption "File", image "fileIcon" and two sub-items with captions "New" and "Open", and another item with caption "Exit". The image "fileIcon" can be added using the exontrol.HTMLPicture.Add method.

The following statements are equivalent:

oRadialMenu.Root.Load("File[img=fileIcon](New,Open),Exit")
oRadialMenu.Items = "File[img=fileIcon](New,Open),Exit"
Parameters:
Name Type Description
value string Indicates a string expression that defines the items of the control from a string-representation.

The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags):

"item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])"
or shortly:
item[flag=value][...](sub-item[flag=value][...], ...), ...

where item1, sub-item1, sub-itemn, ... indicate the caption of the item and its sub-items, and flag=value indicates one or more flags that can be applied on the item or sub-item.

The string-representation supports the following flags:

Flag Description Sample
"[scap]"Indicates the caption to be displayed on the "sub-items" portion of the control for this item, equivalent of Item.SubCaption property, which specifies the caption to be displayed on the "sub-items" portion of the control for this item. If the sub-caption is not specified, no caption is displayed for the item on the "sub-items" portion of the control[scap=<b>Exit]
"[key]"Specifies the item's key, equivalent of Item.Key property, which is used to identify the item and retrieve it later (for instance, via RadialMenu.Item(key) method). The key is a string value that should be unique among sibling items. If the key is missing, the plain caption is used as key. The key is used to identify the item and retrieve it later (for instance, via RadialMenu.Item(key) method). The key is a string value that should be unique among sibling items.[key=color]
"[img]"Sets the item's image, equivalent of Item.Image property, which specifies the image to be displayed on the item, in the "items" ring. The image can be specified as a string that represents the name of an image in the control's image collection, previously added using the exontrol.HTMLPicture.Add method. If the image is not specified, no image is displayed for the item[img=logo]
"[color]"Sets the item's background color (applied on "items" ring), equivalent of Item.Color property, which specifies the background color of the item. The color can be specified as a string that represents a color name (such as "red", "blue", "green", etc.), a hexadecimal color code (such as "#FF0000" for red), or an RGB/RGBA/HSL/HSLA color function (such as "rgb(255,0,0)" for red)[color=red]
"[simg]"Indicates the image to be displayed on the "sub-items" portion of the control for this item, equivalent of Item.SubImage property, which specifies the image to be displayed on the "sub-items" portion of the control for this item. The image can be specified as a string that represents the name of an image in the control's image collection, previously added using the exontrol.HTMLPicture.Add method. If the sub-image is not specified, no image is displayed for the item on the "sub-items" portion of the control[simg=logo]
"[scolor]"Defines the item's background color on the "sub-items" portion of the control, equivalent of Item.SubColor property, which specifies the background color of the item on the "sub-items" portion of the control. The color can be specified as a string that represents a color name (such as "red", "blue", "green", etc.), a hexadecimal color code (such as "#FF0000" for red), or an RGB/RGBA/HSL/HSLA color function (such as "rgb(255,0,0)" for red)[scolor=red]
"[vis]/[hid]"Shows or hides the item, equivalent of Item.Visible property, which indicates whether the item is visible or hidden. A hidden item is not shown on the control, but it still exists in the items collection and can be retrieved and shown later[vis=0]
"[dis]"Enables or disables the item, equivalent of Item.Enabled property, which indicates whether the item is enabled or disabled. A disabled item is shown on the control but appears grayed out and does not respond to user interaction, while an enabled item is fully interactive and responds to user actions such as clicks[dis=0]
"[pos]"Sets the item's 0-based position, equivalent of Item.Position property, which determines the order of the item among its siblings. The position is a non-negative integer value, where 0 represents the first position. If the position is not specified, the item is added at the end of the items collection[pos=0]
Returns:
Returns the item itself.
Type
Item
Example
Load("1,2,3"), adds three child-items.
Load

Remove()

The Remove() method removes the item (including all its descendants). The Remove method removes the item from its parent's children collection, meaning it removes the item from its siblings collection. The Clear() method clears only the item's descendants, meaning it removes all children of the item and their descendants, but not the item itself. The Visible property specifies whether the item is visible or hidden, while the Enabled property specifies whether the item is enabled or disabled. The Root.Remove() is equivalent with Root.Clear() as it clears all items of the control.
Example
oItem.Remove(), removes the item from its parent's children collection
Remove

Save() → {string}

The Save() method returns the string-representation of the item, and all its descendent-items. You can use the Save method to get the string-representation of the items of the control, which can be later loaded using the Load() method. The Load() method replaces the current item, which means it removes the item, and replaces with a new content. For instance, Load("") removes the element! The Item.Save() method returns the string-representation of the item and all its descendants, while the Root.Save() method returns the string-representation of all items of the control.
Returns:
Returns the string representation of the item, and all its descendent-items.

The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags):

"item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])"
or shortly:
item[flag=value][...](sub-item[flag=value][...], ...), ...

where item1, sub-item1, sub-itemn, ... indicate the caption of the item and its sub-items, and flag=value indicates one or more flags that can be applied on the item or sub-item.

The string-representation supports the following flags:

Flag Description Sample
"[scap]"Indicates the caption to be displayed on the "sub-items" portion of the control for this item, equivalent of Item.SubCaption property, which specifies the caption to be displayed on the "sub-items" portion of the control for this item. If the sub-caption is not specified, no caption is displayed for the item on the "sub-items" portion of the control[scap=<b>Exit]
"[key]"Specifies the item's key, equivalent of Item.Key property, which is used to identify the item and retrieve it later (for instance, via RadialMenu.Item(key) method). The key is a string value that should be unique among sibling items. If the key is missing, the plain caption is used as key. The key is used to identify the item and retrieve it later (for instance, via RadialMenu.Item(key) method). The key is a string value that should be unique among sibling items.[key=color]
"[img]"Sets the item's image, equivalent of Item.Image property, which specifies the image to be displayed on the item, in the "items" ring. The image can be specified as a string that represents the name of an image in the control's image collection, previously added using the exontrol.HTMLPicture.Add method. If the image is not specified, no image is displayed for the item[img=logo]
"[color]"Sets the item's background color (applied on "items" ring), equivalent of Item.Color property, which specifies the background color of the item. The color can be specified as a string that represents a color name (such as "red", "blue", "green", etc.), a hexadecimal color code (such as "#FF0000" for red), or an RGB/RGBA/HSL/HSLA color function (such as "rgb(255,0,0)" for red)[color=red]
"[simg]"Indicates the image to be displayed on the "sub-items" portion of the control for this item, equivalent of Item.SubImage property, which specifies the image to be displayed on the "sub-items" portion of the control for this item. The image can be specified as a string that represents the name of an image in the control's image collection, previously added using the exontrol.HTMLPicture.Add method. If the sub-image is not specified, no image is displayed for the item on the "sub-items" portion of the control[simg=logo]
"[scolor]"Defines the item's background color on the "sub-items" portion of the control, equivalent of Item.SubColor property, which specifies the background color of the item on the "sub-items" portion of the control. The color can be specified as a string that represents a color name (such as "red", "blue", "green", etc.), a hexadecimal color code (such as "#FF0000" for red), or an RGB/RGBA/HSL/HSLA color function (such as "rgb(255,0,0)" for red)[scolor=red]
"[vis]/[hid]"Shows or hides the item, equivalent of Item.Visible property, which indicates whether the item is visible or hidden. A hidden item is not shown on the control, but it still exists in the items collection and can be retrieved and shown later[vis=0]
"[dis]"Enables or disables the item, equivalent of Item.Enabled property, which indicates whether the item is enabled or disabled. A disabled item is shown on the control but appears grayed out and does not respond to user interaction, while an enabled item is fully interactive and responds to user actions such as clicks[dis=0]
"[pos]"Sets the item's 0-based position, equivalent of Item.Position property, which determines the order of the item among its siblings. The position is a non-negative integer value, where 0 represents the first position. If the position is not specified, the item is added at the end of the items collection[pos=0]
Type
string
Example
oRadialMenu.Root.Save(), returns the string-representation of all items of the control as it returns the string-representation of the root-item and all its descendants
Save

forEach(callBack, thisArg)

The forEach() method enumerates recursively the children items (not including the item itself). The Root property gets the root-item of the item. The Root.forEach() method enumerates all root-items and their descendants, while the Item.forEach() method enumerates the current item's children and their descendants.
Parameters:
Name Type Description
callBack callBack Specifies the function to perform for each child item. The callback supports one parameter as explained:
  • item {Item}, specifies the item as an object of Item type
thisArg any Indicates the value of this keyword during the callback. If not specified, this indicates the current item.