Global

Type Definitions

EditInnerStyleType

Defines the {background, color, font, border, padding} type for style field of EditInnerType object. The style field holds CSS properties to apply to the inner input element(of HTMLInputElement type). The style field can include any property of CSSStyleDeclaration type. The CSSStyleDeclaration interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties. For instance, even if the
outline (draws a line outside the element's border)
outlineOffset (sets the amount of space between an outline and the edge or border of an element.)
properties of CSSStyleDeclaration type, are not listed bellow, but you can still use it, as in the following sample:
exontrol.Tree.EditOptions.inner = {style: {outline: "2px solid", outlineOffset: "4px"}}
.
Type:
  • object
Properties:
Name Type Description
background string The background field sets the input's background color

Example:

"red" {string}, shows the input's background in red
"rgba(255,0,0,0.5)" {string}, shows the input's background in partial-red
color string The color field sets the input's foreground color

Example:

"blue" {string}, shows the input's foreground in blue
"rgba(0,0,255,0.5)" {string}, shows the input's foreground in partial-blue
font string The font field specifies the font to display text within the input element.

Example:

"italic bold 12px Georgia" {string}, defines a different font to display
border string The border field sets the style of the input's border

Example:

"1px solid blue" {string}, shows a blue solid-border color arround the input element
"2px inset" {string}, shows "inset" border arround the input element
padding string The padding field sets the space between input's content and its border

Example:

"2px" {string}, all four paddings are 2px
EditInnerStyleType

EditInnerType

Defines the {value, type, style} type for inner field of EditOptions object. The inner field specifies an object whose properties (recursively) are applied to the inner HTML-element (of HTMLInputElement type). In other words, the EditInnerType object can include any property of HTMLInputElement type. The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements. For instance, even if the
maxLength (sets the element's maxlength attribute, containing the maximum number of characters)
property of HTMLInputElement type, is not listed bellow, but you can still use it, as in the following sample:
exontrol.Tree.EditOptions.inner.maxLength = 2
limits the cell's caption to two characters, while editing.
Type:
  • object
Properties:
Name Type Description
value any The value field defines the default value of an <input> element. Defines the input's default value when the edit begins (if not specified, the cell's value is used instead)

Example:

"1234" {string}, displays "1234" as soon as edit starts
type string The type field specifies the style of the <input> element.

Example:

"number" {string}, defines a field for entering a number
"range" {string}, defines a control for entering a number whose exact value is not important (like a slider control)
"password" {string}, defines a field for entering a password
style EditInnerStyleType The style field holds CSS properties to apply to the inner input element(of HTMLInputElement type). The style field can include any property of CSSStyleDeclaration type. The CSSStyleDeclaration interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.
Example
exontrol.Tree.EditOptions.inner = {style: {border: "2px solid"}}, shows a 2-pixels wide border around the cell
 exontrol.Tree.EditOptions.inner = {style: {outline: "2px solid", outlineOffset: "2px"}}, shows a 2-pixels wide border around the cell
 exontrol.Tree.EditOptions.inner = {value: "", placeholder: "type your name"}, empties the cell's value and displays 'type your name' message on the background
 exontrol.Tree.EditOptions.inner = {type: "number"}, ensures that the user type only numbers
 exontrol.Tree.EditOptions.inner = {style: {border: "1px solid", background: "yellow"}}, edits the cell using a different background
EditInnerType