new EditOptions()
The EditOptions type holds options to apply on the input element while editing the cell. The Edit() method edits the current cell. The EditOptions object can be used to specify options to apply on the input element while editing the cell. For instance, you can specify a different background for the input element, or you can specify a validate function to validate the new value the user entered, and so on. Also, you can specify the type of the input element, so you can ensure that the user types only numbers, or a date, or a color, and so on.
Example
exontrol.Pivot.EditOptions.inner = {style: {outline: "2px solid", outlineOffset: "2px"}}, shows a 2-pixels wide border around the cell
exontrol.Pivot.EditOptions.inner = {value: "", placeholder: "type your name"}, empties the cell's value and displays 'type your name' message on the background
exontrol.Pivot.EditOptions.validate = function(value) { return value < 10; }, ensures that the value the user entered is always less than 10
Members
(static) change :object
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:
- object
Example
false {boolean}, the cell's value is updated as soon as user clicks outside of the <input> 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 <input> element (based on the ttc field)
change
(static) client :object
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:
Each expression supports the following keywords:
Type:
- object
- 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 :object
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:
- object
- 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 :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.
Type:
- object
(static) selectAll :object
The selectAll field selects all the text into the <input> element, as soon as the cell gets edited. The selectAll field defines whether all the text is selected into the <input> element, as soon as the cell gets edited. If the selectAll field is missing/null/undefined/0/false no text gets selected once the cell gets edited, while if the selectAll field is true, all the text is selected into the <input> element, as soon as the cell gets edited.
Type:
- object
- Since:
- 1.1
Example
false {boolean}, no text gets selected once the cell gets edited
true {boolean}, selects all the text into the <input> element, as soon as the cell gets edited.
selectAll
(static) thisArg :object
The thisArg field defines the value of this keyword during the validate, create callback. If the thisArg field is missing/null/undefined, the this keyword refers to the current cell as an object of Cell type, within validate and create callbacks. However, if the thisArg field is specified, the this keyword refers to the value of thisArg field within validate and create callbacks. For instance, if you want to refer to the current view within validate or create callback, you can specify the thisArg field with "this" value.
Type:
- object
(static) ttc :object
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:
- object
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 <input> 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 <input> element, after 1 second
ttc
(static) validate :object
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:
- object
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 :object
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:
- object