EditOptions class (Tree)

EditOptions()

new EditOptions()

The EditOptions type holds options to apply on the input element while editing the cell. The Edit() method edits the current cell.
Example
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.validate = function(value) { return value < 10; }, ensures that the value the user entered is always less than 10
EditOptions

Members

(static) change :boolean

The change field specifies whether the cell's value is updated as soon as user types into the <input> element. Defines whether the cell's value is updated as soon as user types into the <input> element. If the change field is missing/null/undefined/0/false the cell's value is updated as soon as user clicks outside of the <input> element, or presses Enter key.
Type:
  • boolean
Example
false {boolean}, the cell's value is updated as soon as user clicks outside of the &lt;input&gt; element, or presses Enter key (default)
 true {boolean}, the cell's value is updated (invalidates the view's conditional format, computed fields, and so on) as soon as user types into the &lt;input&gt; element (based on the ttc field)
change

(static) client :string

The client field specifies a collection of up to four expressions that can define a different client area to show the editor. A string expression of "[expression,expression,expression,expression]" type, that determines the x, y, width and height of the new editor. The client field must starts with "[" and ends with "]", else it has no effect.
Each expression supports the following keywords:
  • x {number}, defines the editor's default-left position
  • y {number}, defines the editor's default-top position
  • width {number}, indicates the default-width of the editor
  • height {number}, indicates the default-width of the editor
.
Type:
  • string
Since:
  • 2.4
Example
null {null}, the client field is ignored
  "[x+64,y-32]" {string}, displays the editor at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis)
  "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4]
  "[x+(width-16)/2,y+(height-16)/2,16,16]" {string}, centers a 16x16 rectangle inside the client
client

(static) create :callback

The create field defines a function of callback(oHE) type that's invoked once the editor of the cell is being created. By default, the oHE parameter is of HTMLInputElement or HTMLSelectElement type. The thisArg field defines the value of this keyword during the validate, create callback.
Type:
  • callback
Since:
  • 2.4
Example
function(oHE) {oHE.onclick = function(event) {console.log(event)}} {callback}, assigns a handler for editor's onclick event
 function(oHE) {oHE.value = "Desk"} {console.log(event)}} {callback}, initializes the editor's value
create

(static) inner :EditInnerType

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.
Type:
inner

(static) selectAll :boolean

The selectAll field selects all the text into the <input> element, as soon as the cell gets edited.
Type:
  • boolean
Since:
  • 1.1
Example
false {boolean}, no text gets selected once the cell gets edited
 true {boolean}, selects all the text into the &lt;input&gt; element, as soon as the cell gets edited.
selectAll

(static) thisArg :any

The thisArg field indicates the value of "this" keyword during the validate, create callback (if not specified the thisArg refers to the current cell as an object of Cell type).
Type:
  • any
thisArg

(static) ttc :number

The ttc field indicates the time in ms to wait until cell's value is changed once the user alters the text within the <input> element. Defines the time in ms to wait until cell's value is changed once the user alters the text within the <input> element (has effect only if change field is specified/true).
Type:
  • number
Example
0 {number}, the cell's value is updated (invalidates the view's conditional format, computed fields, and so on) as soon as user types into the &lt;input&gt; element
 1000 {number}, the cell's value is updated (invalidates the view's conditional format, computed fields, and so on) as soon as user types into the &lt;input&gt; element, after 1 second
ttc

(static) validate :callback

The validate field defines a function of callback(value) {boolean} type that validates the newly value. The new value is validated if the function returns true, else the value is not validated and so no change occurs within the cell's value. The thisArg field defines the value of this keyword during the validate, create callback.
Type:
  • callback
Example
function(value) { return value < 10; } {callback} validates only values less than 10 (in other words the cell's value is changed only if the value is less than 10)
 function(value) { return this.SetValue(getMin(10, value)) || true; } {callback}, validates any value, but always ensures that's not greater than 10
validate

(static) view :TV

The view field specifies the view where the <input> element should be displayed. The view field has no effect, if the control displays a single view. Use the AddTreeView() method to add a new view to the control. You can use the onclick event's "view" field to specify the view where the edit is displayed.
Type:
view