Events

This section describes events fired by this widget.

See Also

change

Fires when a change within the widget's input element is committed by an end user.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

Instead, you can use the onChange option to handle the event.

See Also

closed

Fires after a drop-down list has been hidden.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Instead, you can use the onClosed option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery

contentReady

Raised when the widget's content is ready.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

If data displayed by the widget is specified using a DataSource instance, the contentReady event fires each time the load() method of the DataSource instance is called as well as when the widget content is ready. In this case, when you create the widget, the contentReady event is raised twice: when the widget's content is ready (at this moment, the widget does not display items) and when the DataSource is loaded (the widget displays the loaded items).

copy

Fires after the widget's input has been copied.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

Instead, you can use the onCopy option to handle the event.

See Also

customItemCreating

Raised when a user adds a custom item.

Event Handler Argument:
e: Object

Information about the event.

Object structure:
component: Object

The widget's instance.

element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

text: String

Text of the widget's text field.

Return Value: Object|jQuery.Promise

The item object or the jQuery Deferred object resolved when the item is created.

Main article: onCustomItemCreating

See Also

cut

Fires after the Cut DOM event has fired.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

Instead, you can use the onCut option to handle the event.

See Also

disposing

Raised when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Event Handler Argument:
e: Object

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Main article: onDisposing

See Also

enterKey

Fires after the Enter key has been pressed within the widget's input element.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

Instead, you can use the onEnterKey option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery

focusIn

Fires after the widget's input has been focused.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

Use the on() method to attach a handler for the focusIn event.

To unsubscribe from this event, use the off() method.

Note that you can handle the focusIn event within the widget's configuration object by assigning your handler to the onFocusIn option.

See Also
Show Example:
AngularJS
Knockout
jQuery

focusOut

Fires after the widget's input element has lost focus.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

Instead, you can use the onFocusOut option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery

initialized

Raised only once, after the widget is initialized.

Event Handler Argument:
e: Object

Information about the event.

Object structure:
component: Object

The widget's instance.

element: jQuery

The widget's container.

Main article: onInitialized

See Also

input

Fires when a value within the widget's input element is changed by an end user.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused the action execution.

Instead, you can use the onInput option to handle the event.

See Also

itemClick

Fires when a widget item is clicked.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

itemData: Object

The data that is bound to the clicked item.

itemElement: Object

An HTML element of the item.

itemIndex: Number|Object

The index of the clicked item. If the widget items are grouped, the index represents an object defining the group and item indexes: { group: 0, item: 0 }.

Instead, you can use the onItemClick option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery

keyDown

Fires when a key is pressed down within the widget's input element.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused the action execution.

Instead, you can use the onKeyDown option to handle the event.

See Also

keyPress

Fires when the keypress DOM event has been raised for the current input element.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused the action execution.

Instead, you can use the onKeyPress option to handle the event.

See Also

keyUp

Fires when a key is released within the widget's input element.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused the action execution.

Instead, you can use the onKeyUp option to handle the event.

See Also

opened

Fires when the drop-down editor is shown.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Instead, you can use the onOpened option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery

optionChanged

Raised after an option of the widget is changed.

Event Handler Argument:
e: Object

Information about the event.

Object structure:
component: Object

The widget's instance.

name: String

A short name of the option whose value has been changed.

fullName: String

A full name of the option whose value has been changed; contains a full hierarchy of the option.

value: any

A new value for the option.

element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Main article: onOptionChanged

See Also

paste

Fires after the widget's input has been pasted.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused the action execution.

Instead, you can use the onPaste option to handle the event.

See Also

selectAllValueChanged

Fires when the select all check box value changes.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

Provides access to the widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

value: Boolean

Specifies the select all check box state.

Instead, you can use the onSelectAllValueChanged option to handle the event.

NOTE
This event fires only if the showSelectionControls option is set to true.
See Also
Show Example:
AngularJS
Knockout
jQuery

selectionChanged

Fires when the selection changes.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

Provides access to the widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

addedItems: Array

Provides access to the newly added items.

removedItems: Array

Provides access to the newly unselected items.

Instead, you can use the onSelectionChanged option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery

valueChanged

Fires when the editor value changes.

Event Handler Argument:
e: Object

Provides function parameters.

Object structure:
component: Object

The widget's instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

value: Object

Returns the widget's new value.

previousValue: Object

Returns the widget's previous value.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused the action execution.

Instead, you can use the onValueChanged option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery