new CV(oComboBox)
The CV class defines the ComboBox view of the control, which displays the label or content that the host wants to show within the drop-down panel. It serves as the base class for the control's views, providing default properties and methods and acting as a template for creating other views. The Host property of the view specifies the control's host, which is the HTML element that implements the drop-down panel.
All properties and methods of oCV member are automatically bound to the control, so they can be used within the control as if they were defined within the control itself. For instance, the following statements are equivalents:
oComboBox.oCV.GetAllowResize() {string}, gets whether the control's drop-down panel can be resized by the user
oComboBox.GetAllowResize() {string}, gets whether the control's drop-down panel can be resized by the user
oComboBox.AllowResize {string}, gets whether the control's drop-down panel can be resized by the user
Parameters:
| Name | Type | Description |
|---|---|---|
oComboBox |
ComboBox | Specifies an object of ComboBox type that defines the owner control of the view to be created. |
Methods
GetAlign() → {string}
The GetAlign() method gets the alignment of the drop-down panel relative to the control. The Align property is composed by two parts separated by comma that specifies a point/corner of the control to coincide with a point/corner of the control, of "corner-control,corner-dropdown" type, where:
- corner-control, corner-dropdown
can be any of the following:
- "TL", top-left corner
- "TC", top-center point
- "TR", top-right corner
- "ML", middle-left point
- "C", center of the object
- "MR", middle-right point
- "BL", bottom-left corner
- "BC", bottom-center point
- "BR", bottom-right corner
Returns:
Returns the alignment of the drop-down panel relative to the control.
- Type
- string
Example
"BR,TR" {string}, indicates that the bottom-right corner of the control coincides with the top-right corner of the drop-down panel (default)
"BL,TL" {string}, indicates that the bottom-left corner of the control coincides with the top-left corner of the drop-down panelGetAllowActions() → {string}
The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.
Returns:
Returns the actions the user can perform once the control is clicked or touched. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.
The format of the property is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."where
- "action", defines the action to perform (as defined below)
Action Description Flags "d2" Shows the control's drop-down list (panel) once the user clicks the control's drop-down button "drag-drop" Performs drag and drop of the control (the control can be dropped inside or outside). The ExDrop(event, data) method of the target HTML element is called once the user drops the control. The event parameter contains information about the mouse/touch event. The data parameter contains information about the source object that initiated the drag/drop operation as {object, source, client, shape} - "shortcut", defines the item's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
- "Shift", indicates that the SHIFT key is pressed
- "Ctrl" or "Control", indicates that the CTRL key is pressed
- "Alt" or "Menu", indicates that the ALT key is pressed
- "Meta" , indicates that the META key is pressed
- "LButton", specifies that the mouse's left-button is pressed
- "RButton", specifies that the mouse's right-button is pressed
- "MButton", specifies that the mouse's middle/wheel-button is pressed
- "Long", specifies that the action requires a "long" click or touch before it begins
- "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit")
- "+", indicates AND between values
- Type
- string
GetAllowDrop() → {boolean}
The GetAllowDrop() method indicates whether the user can drag and drop local files into the control. When enabled, users can drag files from their system and drop them onto the control, allowing the application to process or import the files directly. This feature enhances interactivity by providing a convenient way to add external data without requiring traditional file selection dialogs. The ondrop(event) method of the hosted control is automatically invoked when the user drops files onto the control. The method's event parameter provides information about the dropped files, including their names, sizes, and types.
Returns:
Returns true, if the user can drag and drop local files into the control.
- Type
- boolean
Example
The following statements are equivalent:
oComboBox.GetAllowDrop() {boolean}, indicates whether the user can drag and drop files into the control
oComboBox.AllowDrop {boolean}, indicates whether the user can drag and drop files into the control
where oComboBox is an instance of ComboBox controlGetAllowResize() → {string}
The GetAllowResize() method indicates whether the user is allowed to resize the control's drop-down panel. When enabled, the drop-down portion can be resized by dragging its edges or corners, giving the user flexibility to adjust its size. When disabled, the drop-down remains fixed in size. The width and height attributes of the canvas hosting the ComboBox's host define the size of the control's drop-down portion. You can set the drop-down size programmatically by adjusting the canvas's width and height. When hosting an Exontrol component, use the exontrol.CC.Resize(<canvas>, [width], [height]) method to properly resize and render the control; otherwise, the drop-down will appear empty.
Returns:
Returns a value that indicates one of the following:
- "", the drop-down section cannot be resized by the user (default)
- "both", the drop-down portion displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically
- "horizontal", the drop-down portion displays a mechanism for allowing the user to resize it in the horizontal direction
- "vertical", the drop-down portion displays a mechanism for allowing the user to resize it in the vertical direction
- Type
- string
Example
"" {string}, the drop-down section cannot be resized by the user (default)
"both" {string}, the drop-down portion displays a mechanism for allowing the user to resize it, which may be resized both horizontally and verticallyGetCursors() → {string}
The GetCursors() method retrieves the mouse cursors assigned to different parts of the control. These cursors determine the pointer appearance when the user hovers over specific areas, allowing you to provide visual feedback for interactive regions of the control.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control.
The format of the property is:
"cursor(part),cursor(part),..."where:
- "cursor", defines the CSS mouse cursor to display while cursor hovers the part
- "part", defines the name of the part the cursor is applied on (as defined below)
The "part" can be any of the following:
Cursor Description "alias" indicates a shortcut or alias will be created "all-scroll" indicates scrolling in any direction "auto" lets the browser decide the cursor based on context "cell" indicates a table cell "col-resize" indicates a column can be resized horizontally "context-menu" indicates a context menu is available "copy" indicates something will be copied "crosshair" a precise crosshair cursor "default" the default arrow cursor "e-resize" resize east (right edge) "ew-resize" resize horizontally "grab" indicates an item can be grabbed "grabbing" indicates an item is being grabbed "help" indicates help information is available "move" indicates something can be moved "n-resize" resize north (top edge) "ne-resize" resize northeast (top-right corner) "nesw-resize" resize along the northeast–southwest axis "no-drop" indicates dropping is not permitted "not-allowed" indicates the action is not allowed "ns-resize" resize vertically "nw-resize" resize northwest (top-left corner) "nwse-resize" resize along the northwest–southeast axis "pointer" the pointer cursor (a hand with a pointing finger) "progress" indicates background processing "row-resize" indicates a row can be resized vertically "s-resize" resize south (bottom edge) "se-resize" resize southeast (bottom-right corner) "sw-resize" resize southwest (bottom-left corner) "text" the text selection cursor (I-beam) "url(...)" uses a custom cursor image (with optional fallback) "vertical-text" the vertical text selection cursor "w-resize" resize west (left edge) "wait" indicates the program is busy "zoom-in" indicates zooming in "zoom-out" indicates zooming out
Part Description "anchor" (hyperlink) defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2) "button" defines the mouse-cursor when the mouse pointer hovers the drop-down button "clear" defines the mouse-cursor when the mouse pointer hovers the clear button (@since 1.9) "drag-drop" defines the cursor while the control is being dragged using the "drag-drop" action "long" specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
- Type
- string
GetDropDown() → {boolean}
The GetDropDown() method indicates whether the control's drop-down panel is visible or hidden. The DropDown property specifies whether the control's drop-down panel is visible or hidden. The GetDropDown() method returns true if the control's drop-down panel is visible, or false if it is hidden. You can use the SetDropDown() method to show or hide the control's drop-down panel programmatically.
Returns:
Returns true, if the control's drop-down panel is visible
- Type
- boolean
Example
The following statements are equivalent:
if ( oComboBox.GetDropDown() ) { ... }
if ( oComboBox.DropDown ) { ... }
where oComboBox is a ComboBox control.GetFormatText() → {exontrol.DrawTextFormatEnum}
The GetFormatText() method specifies the format to display the control's label. The format defines the alignment, wrapping, clipping, and other text display options for the control's label, allowing you to customize how the text is presented within the control. The Tfi property can be used to specify the text's foreground and background colors, font, and other text formatting options.
The exontrol.DrawTextFormatEnum type supports the following flags:
- exTextAlignTop (0x00), justifies the text to the top of the rectangle
- exTextAlignLeft (0x00), aligns text to the left
- exTextAlignCenter (0x01), centers text horizontally in the rectangle
- exTextAlignRight (0x02), aligns text to the right
- exTextAlignVCenter (0x04), centers text vertically
- exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
- exTextAlignMask (0x0F), specifies the mask for text's alignment.
- exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
- exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
- exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
- exPlainText (0x80), treats the text as plain text.
- exTextNoClip (0x0100), draws without clipping.
- exHTMLTextNoColors (0x0200), ignores the
and tags. - exTextCalcRect (0x0400), determines the width and height of the text.
- exHTMLTextNoTags (0x0800), ignores all HTML tags.
- exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
- exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
- exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
Returns:
Returns a value of exontrol.DrawTextFormatEnum type, that defines the format to display the control's label.
- Type
- exontrol.DrawTextFormatEnum
Example
The following statements are equivalent:
oComboBox.GetFormatText() {exontrol.DrawTextFormatEnum}, retrieves the current format for displaying the control's label
oComboBox.FormatText {exontrol.DrawTextFormatEnum}, retrieves the current format for displaying the control's label
where oComboBox is an instance of ComboBox control.GetHost() → {string|object|HTMLElement}
The GetHost() method defines the host(control) to shown within the control's drop-down panel. The Host can be any HTML element of the current document, or any exontrol canvas-type such as {exontrol.Calendar}, {exontrol.Tree}, ... The control's label is reset once a Host is assigned to be displayed in the control's drop-down panel, and the host becomes fully responsible for rendering any label content. The GetHost() method does not retrieve the selected item, date, or any value from the host; it only returns the host explicitly set for the control.
Returns:
Returns the control's host, as one of the following:
{string}, specifies the identifier to a HTML element, to display within the control's drop-down panel
{HTMLElement}, refers to any HTML element of the current document, to display within the control's drop-down panel
{object}, indicates a reference to any exontrol canvas-types, such as {exontrol.Calendar}, {exontrol.Tree}, ...
- Type
- string | object | HTMLElement
Example
The oCombobox.Host and oCombobox.GetHost() are equivalent, and both of them return the control's host, as in the following example:
oCombobox.Host.on("selchange", function(oEvent)
{
(oEvent.length && oEvent || [oEvent]).forEach(function(oItem)
{
console.log("Selected item: " + oItem.Value);
});
})
The sample code above uses an exontrol.Tree control as the ComboBox's host and retrieves the selected items when the selection changes.GetLabel() → {string}
The GetLabel() method specifies the ex-html caption displayed in the control's label. It supports formatted text and images, allowing rich and descriptive content that enhances the control's appearance and provides contextual information. The label is rendered by the host, so its visual appearance may vary depending on the host's implementation. When a Host is assigned to be displayed in the control's drop-down panel, the control's label is reset and the host becomes fully responsible for rendering any label content. The GetLabel() method does not retrieve the selected item, date, or any value from the host; it only returns the label explicitly set for the control when no host is specified.
Returns:
Returns the control's label
- Type
- string
Example
The following example uses an exontrol.Tree control as the ComboBox's host and retrieves the selected items when the selection changes:
oCombobox.Host.on("selchange", function(oEvent)
{
(oEvent.length && oEvent || [oEvent]).forEach(function(oItem)
{
console.log("Selected item: " + oItem.Value);
});
})
null {null} or "" {string}, displays nothing
"<b>item" {string}, displays "item" word in boldGetLocked() → {boolean}
The GetLocked() method specifies whether the control is locked(protected) or unlocked. The locked control is protected against user interaction, so the user can't click the control's drop down to select new items, but the control can be focused and its content can be copied. The locked field is useful when you want to prevent users from changing the control's value while still allowing them to interact with the control in other ways, such as copying its content or focusing on it for accessibility purposes. While locked the drop down button looks grayed out, and the user can't click it to open the drop down.
Returns:
Returns true, if the control is locked(protected) or unlocked
- Type
- boolean
Example
The following statements are equivalent:
oComboBox.GetLocked() {boolean}, returns true, if the control is locked(protected) or unlocked
oComboBox.Locked {boolean}, returns true, if the control is locked(protected) or unlocked
where oComboBox is an instance of ComboBox controlGetOptions() → {ComboBox.Options}
The GetOptions() method returns the control's current options, which represent a set of configurable settings that control the behavior, appearance, and functionality of the control. These options can be customized to modify how the control looks and works. You can assign options either by setting the Options property directly or by using the SetOptions() method, which allows you to programmatically update one or more options at runtime while preserving the existing configuration.
Every option of the ComboBox.Options type has associated a property of the control. For instance, the option:
allowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlis associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
Returns:
Returns an object of ComboBox.Options type that indicates the options to display the control.
- Type
- ComboBox.Options
Example
The following statement are equivalent:
oComboBox.GetOptions() {object}, gets the control's current options
oComboBox.Options {object}, gets the control's current options
where oComboBox is an instance of ComboBox type.GetPad() → {number|Array.<number>|string}
The GetPad() method specifies the space between control's content and its borders. The padding can be set to a specific value or can use the default padding of [2,2] pixels. Adjusting the padding allows you to control the spacing around the content within the control, enhancing its visual appearance and improving readability.
Returns:
Returns a value that could be:
- {number} a numeric value, to pad horizontal and vertical size with the same value
- {(string|number[])} a "x,y" or [x,y] type to specify the padding on horizontal and vertical side
- Type
- number | Array.<number> | string
Example
The following statements are equivalent:
oComboBox.GetPad() {number|string|array}, retrieves the current padding value of the control
oComboBox.Pad {number|string|array}, retrieves the current padding value of the control
where oComboBox is an instance of ComboBox control.GetReadOnly() → {string}
The GetReadOnly() method indicates whether the control is in read-only mode. When the control is read-only, the user can still click the drop-down button and open the drop-down panel, but the hosted control inside it does not allow selecting or modifying items. This option is useful when users need to view the drop-down content without making changes. In read-only mode, the drop-down button appears normal and remains clickable. In contrast, when the control is locked, the drop-down button is grayed out and cannot be clicked, so the drop-down cannot be opened.
Returns:
Returns true, if the control is read-only
- Type
- string
Example
The following statements are equivalent:
oComboBox.GetReadOnly() {boolean}, returns true, if the control is in read-only mode
oComboBox.ReadOnly {boolean}, returns true, if the control is in read-only mode
where oComboBox is an instance of ComboBox control
GetShapes() → {string}
The GetShapes() method retrieves the shapes assigned to each part of the control. These shapes define the visual appearance of the control's elements, such as borders, fills, and other graphical components. Using this method, you can inspect or modify how each part of the control is drawn, allowing for full customization of its look and feel.
Returns:
A string expression that defines the shapes each part of the control can display.
The format of the property is:
"shape(part),shape(part),..."where:
- "shape", defines the shape to apply on the UI part 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)
◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
◦ specifies the name of the field within the exontrol.Shapes.ComboBox object (while it starts with a lowercase letter, such as shitem which refers to exontrol.Shapes.ComboBox.shitem shape)
◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
- "part", defines the name of the part the shape is applied on (as defined below)
Part Description "button" defines the visual-appearance to show the drop-down button "clear" defines the visual-appearance to show the clear button (@since 1.9)
- Type
- string
Example
The following statements are equivalent:
oComboBox.GetShapes() {string}, returns a string expression that defines the shapes each part of the control can display
oComboBox.Shapes {string}, returns a string expression that defines the shapes each part of the control can display
where oComboBox is an instance of the ComboBox control.GetShowClearButton() → {number}
The GetShowClearButton() method specifies whether the control's clear-button is visible or hidden. The clear button clears the control's label and selection. The clear-button is displayed next to drop down button, and can be hidden, always visible or visible if required (for instance the drop down control has any selection).
- Since:
- 1.9
Returns:
Returns a value that indicates one of the following:
- 0, the clear-button is hidden (default)
- -1, the clear-button is always visible
- 1, the clear-button is visible only if the control's label/drop-down panel displays a non-empty value or contains any selection
- 2, the clear-button is visible only if the pointer hovers the control
- Type
- number
Example
0 {number}, the clear-button is hidden (default)
-1 {number}, the clear-button is always visible
3 {number}, the clear-button is visible only if required and the pointer hovers the controlGetTfi() → {string|object}
The GetTfi() method gets the font attributes to apply on captions of the control. The GetTfi() method returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. Correspondingly, the Tfi property defines the font attributes that are applied to the control's captions and can be set to customize their appearance.
Returns:
Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
The result as a {string} can include any of the following keywords separated by space characters:
- bold, displays the text in bold (equivalent of <b> tag)
- italic, displays the text in italics (equivalent of <i> tag)
- underline, underlines the text (equivalent of <u> tag)
- strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
- <fontName name>, specifies the font's family (equivalent of <font name> tag)
- <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
- <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
- <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
- <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
- <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
- <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)
Any other word within the string result that's not recognized as a keyword is interpreted as:
- name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
- size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)
The result as {object} can include any of the following fields:
- bold {boolean}, displays the text in bold (equivalent of <b> tag)
- italic {boolean}, displays the text in italics (equivalent of <i> tag)
- underline {boolean}, underlines the text (equivalent of <u> tag)
- strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
- fontName {string}, specifies the font's family (equivalent of <font name> tag)
- fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
- fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
- bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
- shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
- color {string}, defines the color of the text's shadow (CSScolor)
- width {number}, defines the size of the text's shadow
- offset {number}, defines the offset to show the text's shadow relative to the text
- outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
- graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
- color {string}, defines the gradient-color (CSScolor)
- mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
- blend {number}, defines the gradient blend as a value between 0 and 1
CSSColor or CSS legal color values can be specified by the following methods:
- 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. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
- Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
- 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. For example, rgb(0,0,255) defines the blue color.
- 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). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
- 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. For example, hsl(240, 100%, 50%) defines the blue color.
- 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). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
- Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
- Type
- string | object
Example
The following statements are equivalent:
oComboBox.GetTfi() {string}, returns the control's font attributes as a string such as "b monospace 16"
oComboBox.Tfi {string}, returns the control's font attributes as a string such as "b monospace 16"
where oComboBox is an instance of ComboBox controlGetToolTipDelay() → {number}
The GetToolTipDelay() method retrieves the time the mouse pointer must hover over an object before the tool tip appears. Setting it to 0 makes tool tips appear immediately, while a higher value (for example, 128) introduces a delay to prevent accidental pop-ups when moving the mouse quickly. The ToolTipPopDelay property determines how long the tool tip remains visible (in milliseconds) if the mouse pointer stays stationary, and the ToolTipWidth property sets the maximum width of the control's tool tip in pixels.
Returns:
Returns how long the mouse pointer must point to an object before the tool tip appears
- Type
- number
Example
The following statements are equivalent:
oComboBox.GetToolTipDelay() {number}, returns how long the mouse pointer must point to an object before the tool tip appears
oComboBox.ToolTipDelay {number}, returns how long the mouse pointer must point to an object before the tool tip appears
where oComboBox is an instance of the ComboBox control.GetToolTipPopDelay() → {number}
The GetToolTipPopDelay() method returns the duration, in milliseconds, that a tooltip remains visible when the mouse pointer is stationary over a control. The ToolTipPopDelay property is expressed in milliseconds. The ToolTipDelay property defines how long the mouse pointer must hover over an object before the tooltip appears. The ToolTipWidth property specifies the width of the tooltip window in pixels. By default, the tooltip remains visible for 5000 milliseconds.
Returns:
Returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
- Type
- number
Example
The following statements are equivalent:
oComboBox.GetToolTipPopDelay() {number}, returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
oComboBox.ToolTipPopDelay {number}, returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
where oComboBox is an instance of the ComboBox control.GetToolTipWidth() → {number}
The GetToolTipWidth() method returns the tooltip window's width in pixels. The ToolTipWidth property defines the tooltip window's width in pixels and accepts a numeric value; a value of -1 (default) displays the tooltip on a single line without any width restriction. The ToolTipDelay property specifies the time in milliseconds the mouse pointer must hover over an object before the tooltip appears. The ToolTipPopDelay property specifies how long, in milliseconds, the tooltip remains visible while the mouse pointer stays stationary within the control.
Returns:
Returns the width of the tooltip window, in pixels
- Type
- number
Example
The following statements are equivalent:
oComboBox.GetToolTipWidth() {number}, returns the width of the tooltip window, in pixels
oComboBox.ToolTipWidth {number}, returns the width of the tooltip window, in pixels
where oComboBox is an instance of the ComboBox control.GetZoom() → {number}
The GetZoom() method defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from. By default, the Zoom property is set to null, indicating a normal view (100% zoom).
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
- Type
- number
Example
null {null}, specifies normal-view (100%)
150 {number}, indicates that the control's label is magnfied to 150%GetZoomLevels() → {string}
The GetZoomLevels() method defines the zoom-levels the user can magnify the control's content, as a list of numbers separated by comma. The Zoom property defines the current zoom-factor of the control's content. By default, the ZoomLevels property includes the following levels: "50,65,75,80,90.100,110,125,150,175,200,250,300,400,500".
Returns:
Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom.
- Type
- string
Example
The following statements are equivalent:
oComboBox.SetZoomLevels("50,100,200,350");
oComboBox.ZoomLevels = "50,100,200,350");
where oComboBox is an instance of exontrol.ComboBox controlSetAlign(value)
The SetAlign() method sets the alignment of the drop-down panel relative to the control. The Align property is composed by two parts separated by comma that specifies a point/corner of the control to coincide with a point/corner of the control, of "corner-control,corner-dropdown" type, where:
- corner-control, corner-dropdown
can be any of the following:
- corner-control, corner-dropdown
can be any of the following:
- "TL", top-left corner
- "TC", top-center point
- "TR", top-right corner
- "ML", middle-left point
- "C", center of the object
- "MR", middle-right point
- "BL", bottom-left corner
- "BC", bottom-center point
- "BR", bottom-right corner
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string | Specifies the alignment of the drop-down panel relative to the control, as a string of "corner-control,corner-dropdown" type. |
Example
"BR,TR" {string}, indicates that the bottom-right corner of the control coincides with the top-right corner of the drop-down panel (default)
"BL,TL" {string}, indicates that the bottom-left corner of the control coincides with the top-left corner of the drop-down panelSetAllowActions(value)
The SetAllowActions() method customizes the actions the user can perform once the control is clicked or touched. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.
Parameters:
| Name | Type | Description | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
value |
string | Indicates the actions the user can perform once the control is clicked or touched.
The format of the property is: "action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."where
|
Example
null {null}, indicates the control's default allowActions value
"" {string}, specifies that no operation is allowed once the user clicks or touches the control
"scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the item's button or modifier-keys is pressed.SetAllowDrop(value)
The SetAllowDrop() method specifies whether the user can drag and drop local files into the control. When enabled, users can drag files from their system and drop them onto the control, allowing the application to process or import the files directly. This feature enhances interactivity by providing a convenient way to add external data without requiring traditional file selection dialogs. The ondrop(event) method of the hosted control is automatically invoked when the user drops files onto the control. The method's event parameter provides information about the dropped files, including their names, sizes, and types.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
boolean | Indicates whether the user can drag and drop local files into the control. |
Example
false {boolean}, no file can be drop into the control (default)
true {boolean}, the user can drag and drop files into the controlSetAllowResize(value)
The SetAllowResize() method specifies whether the user can resize the control's drop-down portion of the control. When enabled, the drop-down portion can be resized by dragging its edges or corners, giving the user flexibility to adjust its size. When disabled, the drop-down remains fixed in size. The width and height attributes of the canvas hosting the ComboBox's host define the size of the control's drop-down portion. You can set the drop-down size programmatically by adjusting the canvas's width and height. When hosting an Exontrol component, use the exontrol.CC.Resize(<canvas>, [width], [height]) method to properly resize and render the control; otherwise, the drop-down will appear empty.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string | The value can be one of the following values:
|
Example
"" {string}, the drop-down section cannot be resized by the user (default)
"both" {string}, the drop-down portion displays a mechanism for allowing the user to resize it, which may be resized both horizontally and verticallySetCursors(value)
The SetCursors() method assigns or changes the mouse cursors for different parts of the control. These cursors determine the pointer appearance when the user hovers over specific areas, allowing you to provide visual feedback and enhance interactivity for each part of the control.
Parameters:
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
value |
string | A string expression that defines the mouse cursor to display when pointing over different parts of the control.
The format of the property is: "cursor(part),cursor(part),..."where:
The "part" can be any of the following:
|
SetDropDown(value)
The SetDropDown() method shows or hides the control's drop-down panel. The DropDown property specifies whether the control's drop-down panel is visible or hidden. You can use the GetDropDown() method to determine whether the control's drop-down panel is visible or hidden. The SetDropDown() method accepts a boolean value to show or hide the control's drop-down panel programmatically.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
boolean | Specifies whether the control's drop-down panel should show or hide. |
Example
false {boolean}, the control's drop-down panel is hidden
true {boolean}, shows programmatically the control's drop-down panelSetFormatText(value)
The SetFormatText() method changes the format to display the control's label. The format defines the alignment, wrapping, clipping, and other text display options for the control's label, allowing you to customize how the text is presented within the control. The Tfi property can be used to specify the text's foreground and background colors, font, and other text formatting options.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
exontrol.DrawTextFormatEnum | Specifies a value of exontrol.DrawTextFormatEnum value that defines the format to show the control's label.
The exontrol.DrawTextFormatEnum type supports the following flags:
|
Example
null {null}, centers the caption
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-alignedSetHost(value)
The SetHost() method defines the host(control) to shown within the control's drop-down panel. The Host can be any HTML element of the current document, or any exontrol canvas-type such as {exontrol.Calendar}, {exontrol.Tree}, ... The control's label is reset once a Host is assigned to be displayed in the control's drop-down panel, and the host becomes fully responsible for rendering any label content. The SetHost() method does not set or change any selected item, date, or value within the host; it only sets the host explicitly for the control.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string | object | HTMLElement | Specifies the host(control) to shown within the control's drop-down panel as indicated:
|
Example
"id" {string} or id {HTMLElement}, refers to any HTML element of the current document, as an identifier (string) or as an HTMLElement type, to display within the control's drop-down panel
exobj {object}, where exobj can be any of exontrol canvas-types as listed:
{exontrol.Bezier}, The ExBezier/JS component displays Bézier curves. The Bézier curves are also used in the time domain, particularly in animation, user interface design and smoothing cursor trajectory in eye gaze controlled interfaces (requires "exontrol.bezier.js" library)
{exontrol.Calendar}, The ExCalendar/JS component provides calendar capabilities for your application. A calendar is a system of organizing days for social, religious, commercial or administrative purposes. This is done by giving names to periods of time, typically days, weeks, months and years. A date is the designation of a single, specific day within such a system (requires "exontrol.calendar.js" library)
{exontrol.Gantt}, The ExGantt/JS component is our approach to create timeline charts (also known as Gantt charts). Gantt chart is a time-phased graphic display of activity durations. Activities are listed with other tabular information on the left side with time intervals over the bars. Activity durations are shown in the form of horizontal bars (requires "exontrol.menu.js", "exontrol.tree.js", "exontrol.gantt.js" libraries)
{exontrol.Gauge}, The ExGauge/JS library provides graphics capabilities to visually display and edit the amount, level, or contents of something. The view can show one or more layers, where each layer can display one or more transparent pictures, HTML captions which can be clipped, moved, rotated or combination of them, by dragging the mouse, rolling the mouse wheel, or using the keyboard (requires "exontrol.gauge.js" library)
{exontrol.Graph}, The ExGraph/JS component provides charting and graphing capabilities for your web application. A chart or graph is a visual representation of data, in which "the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart". Charts are often used to make it easier to understand large quantities of data and the relationships between different parts of the data (requires "exontrol.graph.js" library)
{exontrol.Menu}, The ExMenu/JS component provides menu-functionaly which includes top-level menus, context, popup, drop down or shortcut menus. A menu presents a list of items, commands, attributes, or states from which a user can choose. An item within a menu is known as a menu item, and may be configured to initiate an action, toggle a state on or off, or display a submenu of additional menu items when it is selected. A context menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation (requires "exontrol.menu.js" library)
{exontrol.OrgChart}, The ExOrgChart/JS component permits the totally automatic generation of organigrams. An organigram generally provides a clear picture of the hierarchical position of the various actors. The control shows a hierarchical display of nodes, each one having an HTML caption, pictures and icons aligned to any side of the node. Each node can have child-nodes, assistant-nodes or group-nodes (requires "exontrol.orgchart.js" library)
{exontrol.Pivot}, The ExPivot/JS is our approach to provide data summarization, as a pivot table. A pivot-table can automatically sort, count, total or give the average of the data stored in one table or spreadsheet (requires "exontrol.menu.js", "exontrol.tree.js", "exontrol.pivot.js" libraries)
{exontrol.RadialMenu}, The ExRadialMenu/JS (radial or pie menu) component is similar to the Microsoft's OneNote radial menu with ability to customize the appearance and functionality. The component is designed using tree structure so an item can hold none or more children, and so any item can be browsed, and show its children around it (requires "exontrol.radialmenu.js" library)
{exontrol.Schedule}, The ExSchedule/JS library is our approach to provide scheduling of appointments into your web application. The ExSchedule/JS is a visual HTML5 component that shows a timeline view for multiple activities (event calendar). The time is displayed on the vertical (Y) axis and the activities are automatically arranged over a single or multiple dates (requires "exontrol.menu.js", "exontrol.calendar.js", "exontrol.icalendar.js", "exontrol.schedule.js" libraries)
{exontrol.ScrollBar}, The ExScollBar/JS components provides scroll-bar/slider/track functionality for your application. A vertical or horizontal bar commonly located on the far right or bottom of a window that allows you to move the window viewing area up, down, left, or right. A slider or track bar is a graphical control element with which a user may set a value by moving an indicator
{exontrol.Surface}, The ExSurface/JS lets you organize your objects to a surface. You can use the tool to generate organigrams, diagrams, graphs, flowcharts and so on (requires "exontrol.surface.js" library)
{exontrol.SwimLane}, The ExSwimlane/JS lets you draw swim lane diagrams. A swim lane (or swimlane diagram) is a visual element used in process flow diagrams, or flowcharts, that visually distinguishes job sharing and responsibilities for sub-processes of a business process. Swim lanes may be arranged either horizontally or vertically (requires "exontrol.surface.js", "exontrol.swimlane.js" libraries)
{exontrol.Tree}, The ExTree/JS component allows you to display and edit hierarchical-data. Features include: Multiple-Columns, Multiple-Views, Drag and Drop, Group-By, Filter-Prompt, Conditional-Format, Total Fields, and much more (requires "exontrol.menu.js", "exontrol.tree.js" libraries)SetLabel(value)
The SetLabel() method specifies the ex-html caption to display within the control's label. It supports formatted text and images, allowing you to create rich, descriptive labels that enhance the control's appearance and provide contextual information to the user. The label is rendered by the host, so its visual appearance may vary depending on the host's implementation. When a Host is assigned to be displayed in the control's drop-down panel, the control's label is reset and the host becomes fully responsible for rendering any label content. The SetLabel() method does not set or change any selected item, date, or value within the host; it only sets the label explicitly for the control when no host is specified.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string | A value that specifies the ex-html caption to display within the control's label. |
Example
null {null} or "" {string}, displays nothing
"<b>item" {string}, displays "item" word in boldSetLocked(value)
The SetLocked() method locks or unlocks the control. The locked control is protected against user interaction, so the user can't click the control's drop down to select new items, but the control can be focused and its content can be copied. The locked field is useful when you want to prevent users from changing the control's value while still allowing them to interact with the control in other ways, such as copying its content or focusing on it for accessibility purposes. While locked the drop down button looks grayed out, and the user can't click it to open the drop down.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
boolean | A boolean value that indicates whether the control is locked(protected) or unlocked. |
Example
false {boolean}, unlocks the control (the control's drop down is available)
true {boolean}, locks the control (the control's drop down is not available)SetOptions(nOptions, bIncludeAllopt) → {boolean}
The SetOptions() method applies new options to the control, which represent a set of configurable settings that control the behavior, appearance, and functionality of the control. These options can be customized to modify how the control looks and works. You can assign options either by setting the Options property directly or by using the SetOptions() method, which allows you to programmatically update one or more options at runtime while preserving the existing configuration.
Every option of the ComboBox.Options type has associated a property of the control. For instance, the option:
allowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlis associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the control
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
nOptions |
object | Specifies an object of ComboBox.Options type that indicates the new options to apply. | |
bIncludeAll |
boolean |
<optional> |
Indicates whether all fields of nOptions are included in the item's oOptions object. |
Returns:
Returns true, if there were options applied to the item
- Type
- boolean
Example
The following statement are equivalent:
oComboBox.SetOptions({readOnly: true}), changes the alignment and the size for all images within the control.
oComboBox.Options = {readOnly: true}, changes the alignment and the size for all images within the control.
where oComboBox is an instance of ComboBox type.SetPad(value)
The SetPad() method changes the item's padding or the space between item's content and its borders. The padding can be set to a specific value or can use the default padding of [2,2] pixels. Adjusting the padding allows you to control the spacing around the content within the control, enhancing its visual appearance and improving readability.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | Array.<number> | string | Specifies a value that could be:
|
Example
null {null}, indicates that the default-padding field is used ([2,2])
0 {number}, indicates no padding
"8,4" {string}, increases the item's width with 2 * 8-pixels and item's height with 2 * 4-pixels
[8,4] {array}, increases the item's width with 2 * 8-pixels and item's height with 2 * 4-pixelsSetReadOnly(value)
The SetReadOnly() method sets the control in read-only mode. When the control is read-only, the user can still click the drop-down button and open the drop-down panel, but the hosted control inside it does not allow selecting or modifying items. This option is useful when users need to view the drop-down content without making changes. In read-only mode, the drop-down button appears normal and remains clickable. In contrast, when the control is locked, the drop-down button is grayed out and cannot be clicked, so the drop-down cannot be opened.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
boolean | A boolean value that indicates whether the control is read-only. |
Example
false {boolean}, the control's drop down is available and the user can select new items
true {boolean}, the control's drop down is available but the user can't select itemsSetShapes(value)
The SetShapes() method sets or changes the shapes assigned to each part of the control. These shapes determine the visual appearance of the control's elements, such as borders, fills, and other graphical components. Using this method, you can fully customize how each part of the control is drawn and displayed.
Parameters:
| Name | Type | Description | ||||||
|---|---|---|---|---|---|---|---|---|
value |
string | A string expression that defines the shapes each part of the control can display.
The format of the property is: "shape(part),shape(part),..."where:
|
Example
null {null}, specifies the default visual appearance
"" {string}, no shape (no visual appearance is applied to any part of the control)
"red(itemAlt)", "#FF0000(itemAlt)", "rgb(255,0,0)(itemAlt)", "rgba(255,0,0,1)(itemAlt)" {string}, shows alternate-items in red
'{"hover":{"fillColor":"black","tfi":{"fgColor":"white"}}}(event)' {string}, shows the item in white on a black-background, while the cursor hovers it
"xxx(d),yyy(d,m),zzz(y)" {string}, specifies that the exontrol.Shapes.ComboBox.xxx combined with exontrol.Shapes.ComboBox.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.ComboBox.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.ComboBox.zzz object defines the visual appearance of "y" part of the controlSetShowClearButton(value)
The SetShowClearButton() method shows or hides the control's clear button. The clear button clears the control's label and selection. The clear-button is displayed next to drop down button, and can be hidden, always visible or visible if required (for instance the drop down control has any selection).
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | The value can be one of the following values:
|
- Since:
- 1.9
Example
0 {number}, the clear-button is hidden (default)
-1 {number}, the clear-button is always visible
3 {number}, the clear-button is visible only if required and the pointer hovers the controlSetTfi(value)
The SetTfi() method sets the font attributes for the control's captions, allowing precise customization of their appearance by specifying the text style (such as bold or italic), font family, and font size, either as a string (e.g., "b monospace 16") or as an object (e.g., {bold: true, italic: false, fontName: "monospace", fontSize: 16}), and immediately applies these settings to update the displayed captions.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string | object | Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
The value as {string} supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:
Any other word within the string value that's not recognized as a keyword is interpreted as:
The value as {object} supports any of the following fields:
CSSColor or CSS legal color values can be specified by the following methods:
|
Example
null {null}, the tfi field is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blueSetToolTipDelay(value)
The SetToolTipDelay() method sets the time the mouse pointer must hover over an object before the tool tip appears. Setting it to 0 makes tool tips appear immediately, while a higher value (for example, 128) introduces a delay to prevent accidental pop-ups when moving the mouse quickly across the control. The ToolTipPopDelay property determines how long the tool tip remains visible (in milliseconds) if the mouse pointer stays stationary, and the ToolTipWidth property sets the maximum width of the control's tool tip in pixels.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | A value that specifies how long the mouse pointer must point to an object before the tool tip appears. |
Example
0 {number}, the tooltip is shown "immediately"
128 {number}, the tooltip is displayed in 128 ms.SetToolTipPopDelay(value)
The SetToolTipPopDelay() method sets the duration, in milliseconds, that a tooltip remains visible when the mouse pointer is stationary over a control. The ToolTipPopDelay property is expressed in milliseconds. The ToolTipDelay property defines how long the mouse pointer must hover over an object before the tooltip appears. The ToolTipWidth property specifies the width of the tooltip window in pixels.
The property supports the following values:
- 0 {number}, no tooltip is shown for any object (disabled)
- -1 {number}, the tooltip stays indefinitely (negative)
- positive {number}, the tooltip is visible for the specified number of milliseconds (for example, 1000 means that the tooltip is visible for 1 second)
By default, the tooltip remains visible for 5000 milliseconds.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | A value that specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control. |
Example
0 {number}, no tooltip is shown for any object (disabled)
-1 {number}, the tooltip stays indefinitely (negative)
1000 {number}, the tooltip is visible for 1 secondSetToolTipWidth(value)
The SetToolTipWidth() method changes the width of the tooltip window, in pixels. The ToolTipWidth property gets or sets the width of the tooltip window, in pixels. The ToolTipWidth property accepts a number value that specifies the width of the tooltip window, in pixels. The ToolTipDelay property gets or sets how long the mouse pointer must point to an object before the tool tip appears. The ToolTipPopDelay property gets or sets the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | A value that specifies the width of the tooltip window, in pixels. |
Example
0 {number}, no tooltip is shown for any object (disabled)
-1 {number}, the tooltip's content is displayed on a single line (without limit the width of it)
300 {number}, the tooltip's max-width is 300 pixelsSetZoom(value)
The SetZoom() method defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | A numeric value between 10 and 1000 that specifies the zoom factor of the control's content. |
Example
null {null}, Specifies normal-view (100%)
150 {number}, Indicates that the control's label is magnfied to 150%SetZoomLevels(value)
The SetZoomLevels() method defines the zoomLevels factor of the control's content, as a list of numbers separated by comma. The Zoom property defines the current zoom-factor of the control's content. By default, the ZoomLevels property includes the following levels: "50,65,75,80,90.100,110,125,150,175,200,250,300,400,500".
Parameters:
| Name | Type | Description |
|---|---|---|
value |
string | specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom. |
Example
null {null}, Specifies that the control's zoom factor is always 100%
150 {number}, Specifies that the control's zoom factor is always 150%
"50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the levels of zoom-factor is 50% to 350%Events
onanchorclick
The onanchorclick() event occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element). The onclick event occurs when clicking the control itself, not its drop-down portion. To handle clicks on the drop-down portion, you must use the onclick event of the control's Host. The ond2() method occurs once the user clicks the control's drop down button, while the onanchorclick() method occurs once the user clicks an anchor element.
Parameters:
| Name | Type | Description | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
oEvent |
object | Holds information about anchor being clicked.
Properties
|
- Since:
- 2.2
Example
The following samples display information about the element being clicked:
oComboBox.Listeners.Add("onanchorclick", function (oEvent)
{
console.log(oEvent);
})
or
oComboBox.on("anchorclick", function (oEvent)
{
console.log(oEvent);
})
or
oComboBox.oCV.onanchorclick = function (oEvent)
{
console.log(oEvent);
}
where oComboBox is an object of ComboBox type, oCV is member of ComboBox type, of SV type.onclear
The onclear() method occurs once the user clicks the control's clear button. The showClearButton property specifies whether the control includes a clear button. The onclick event occurs when clicking the control itself, not its drop-down portion. To handle clicks on the drop-down portion, you must use the onclick event of the control's Host. The ond2() method occurs once the user clicks the control's drop down button, while the onclear() method occurs once the user clicks the control's clear button.
- Since:
- 1.9
Example
The following sample displays a message once the control's clear button is clicked:
oComboBox.Listeners.Add("onclear", function ()
{
console.log("clear-button clicked");
})
or
oComboBox.on("clear", function ()
{
console.log("clear-button clicked");
})
or
oComboBox.oCV.onclear = function ()
{
console.log("clear-button clicked");
}
where oComboBox is an object of ComboBox type. The oCV is member of ComboBox type, of CV type.onclick
The onclick event occurs once the user clicks or double-clicks the control. The onclick event occurs when clicking the control itself, not its drop-down portion. To handle clicks on the drop-down portion, you must use the onclick event of the control's Host. The ond2() method occurs once the user clicks the control's drop down button, while the onanchorclick() method occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element). The onclear() method occurs once the user clicks the control's clear button.
Parameters:
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
oEvent |
object | specifies an object of {dblClick,button,modifiers,view} type, that holds information about the object being clicked.
Properties
|
Example
The following samples display information about the object being clicked:
oComboBox.Listeners.Add("onclick", function (oEvent)
{
console.log(oEvent);
})
or
oComboBox.on("click", function (oEvent)
{
console.log(oEvent);
})
or
oComboBox.oCV.onclick = function (oEvent)
{
console.log(oEvent);
}
where oComboBox is an object of ComboBox type. The oCV is member of ComboBox type, of CV type.ond2
The ond2() method occurs once the user clicks the control's drop down button. The onclick event occurs when clicking the control itself, not its drop-down portion. To handle clicks on the drop-down portion, you must use the onclick event of the control's Host. The ond2() method occurs once the user clicks the control's drop down button, while the onanchorclick() method occurs once the user clicks an anchor element.
Example
The following sample displays a message once the control's drop-down button is clicked:
oComboBox.Listeners.Add("ond2", function ()
{
console.log("drop-down clicked");
})
or
oComboBox.on("d2", function ()
{
console.log("drop-down clicked");
})
or
oComboBox.oCV.ond2 = function ()
{
console.log("drop-down clicked");
}
where oComboBox is an object of ComboBox type. The oCV is member of ComboBox type, of CV type.