Vue TreeList Events
adaptiveDetailRowPreparing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
formOptions |
The options of the Form widget. |
Main article: onAdaptiveDetailRowPreparing
See Also
cellClick
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
data |
The data of the row to which the cell belongs. Available if the rowType is "data", "detail" or "detailAdaptive". |
|
key | any |
The row's key. Available if the rowType is "data", "detail" or "detailAdaptive". |
value | any |
The cell's raw value. Available if the rowType is "data". |
displayValue | any |
The cell's displayed value. Available if the rowType is "data". |
text |
The cell's formatted value converted to a string. Available if the rowType is "data". |
|
columnIndex |
The index of the column to which the cell belongs. |
|
column |
This column's configuration. |
|
rowIndex |
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information. |
|
rowType |
The row's type. |
|
cellElement |
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
row |
The row properties. Available if the rowType is "data", "detail" or "detailAdaptive". |
Main article: onCellClick
See Also
cellHoverChanged
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
eventType |
Indicates whether the pointer entered or left the cell. Can be either "mouseover" or "mouseout". |
|
data |
The data of the row to which the cell belongs. Available if the rowType is "data", "detail" or "detailAdaptive". |
|
key | any |
The row's key. Available if the rowType is "data", "detail" or "detailAdaptive". |
value | any |
The cell's raw value. Available if the rowType is "data". |
text |
The cell's formatted value converted to a string. Available if the rowType is "data". |
|
displayValue | any |
The cell's displayed value. Available if the rowType is "data". |
columnIndex |
The index of the column to which the cell belongs. |
|
rowIndex |
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information. |
|
column |
This column's configuration. |
|
rowType |
The row's type. |
|
cellElement |
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
row |
The row properties. Available if the rowType is "data", "detail" or "detailAdaptive". |
Main article: onCellHoverChanged
See Also
cellPrepared
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row to which the cell belongs. Available if the rowType is "data", "detail" or "detailAdaptive". |
|
key | any |
The row's key. Available if the rowType is "data", "detail" or "detailAdaptive". |
value | any |
The cell's raw value. Available if the rowType is "data". |
displayValue | any |
The cell's displayed value. Available if the rowType is "data". |
text |
The cell's formatted value converted to a string. Available if the rowType is "data". |
|
columnIndex |
The index of the column to which the cell belongs. |
|
column |
This column's configuration. |
|
rowIndex |
The row's index. Refer to Column and Row Indexes for more information. |
|
rowType |
The row's type. |
|
row |
The row properties. Available if the rowType is "data", "detail" or "detailAdaptive". |
|
isSelected |
Indicates whether the row is selected. Available if rowType is "data" or "detail". |
|
isExpanded |
Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "detail". |
|
cellElement |
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
watch |
Allows tracking a variable and performing actions when it changes. Applies when repaintChangesOnly is true.
|
|
oldValue | any |
The cell's previous raw value. |
Main article: onCellPrepared
See Also
contentReady
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only when using Knockout. |
Main article: onContentReady.
See Also
contextMenuPreparing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
items |
Items to be displayed in the context menu. Their structure is described in the Default Item Template section. |
|
target |
The name of the element on which the context menu is invoked: "header", "content" or "footer". This field is read-only. |
|
targetElement |
This element's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
columnIndex |
The index of the column on which the context menu is invoked. |
|
column |
This column's configuration. |
|
rowIndex |
The index of the row on which the context menu is invoked. Refer to Column and Row Indexes for more information. |
|
row |
The row properties. |
Main article: onContextMenuPreparing
See Also
dataErrorOccurred
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
error |
The standard Error object that defines the error. |
Main article: onDataErrorOccurred
See Also
disposing
Raised before the widget is disposed of.
Event
Name | Type | Description |
---|---|---|
component |
The widget instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
Main article: onDisposing
See Also
editingStart
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
data |
The data of the row to be edited. |
|
key | any |
The row's key. |
cancel |
Allows you to cancel row editing. |
|
column |
The configuration of the column whose cell is switching to the editing state. Available in "cell" or "batch" editing mode. |
Main article: onEditingStart
See Also
editorPrepared
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
parentType |
The editor's location. One of "dataRow", "filterRow", "headerRow" or "searchPanel". |
|
value | any |
The editor's value. |
setValue(newValue, newText) | any |
A method that you should call to change the cell value and, optionally, the displayed value after the editor's value is changed. |
updateValueTimeout |
Gets and sets the delay between the moment a user stops typing a filter value and the moment it is applied. Available if parentType is "filterRow" or "searchPanel". |
|
width |
The editor's width; equals null for all editors except for those whose parentType equals "searchPanel". |
|
disabled |
Indicates whether the editor is disabled. |
|
rtlEnabled |
Indicates whether the editor uses right-to-left representation. |
|
editorElement |
The editor's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
readOnly |
Indicates whether the editor is read-only. |
|
dataField |
The name of the field that provides data for the column the editor belongs to. |
|
row |
The properties of the row the editor belongs to. |
Main article: onEditorPrepared
See Also
editorPreparing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
parentType |
The editor's location. One of "dataRow", "filterRow", "headerRow" or "searchPanel". |
|
value | any |
The editor's value. |
setValue(newValue, newText) | any |
A method that you should call to change the cell value and, optionally, the displayed value after the editor's value is changed. |
updateValueTimeout |
Gets and sets the delay between the moment a user stops typing a filter value and the moment it is applied. Available if parentType is "filterRow" or "searchPanel". |
|
width |
The editor's width; equals null for all editors except for those whose parentType equals "searchPanel". |
|
disabled |
Indicates whether the editor is disabled. |
|
rtlEnabled |
Indicates whether the editor uses right-to-left representation. |
|
cancel |
Allows you to cancel creating the editor. |
|
editorElement |
The editor's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
readOnly |
Indicates whether the editor is read-only. |
|
editorName |
Allows you to change the editor. Accepts names of DevExtreme widgets only, for example, "dxTextBox". |
|
editorOptions |
Gets and sets the editor configuration. |
|
dataField |
The name of the field that provides data for the column the editor belongs to. |
|
row |
The properties of the row the editor belongs to. |
Main article: onEditorPreparing
See Also
focusedCellChanged
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
cellElement |
The focused cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
columnIndex |
The index of the cell's column. |
|
rowIndex |
The index of the cell's row. |
|
row |
The row's properties. |
|
column |
The column's properties. |
Main article: onFocusedCellChanged
See Also
focusedCellChanging
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
cellElement |
The container of the to-be-focused cell. It is an HTML Element or a jQuery Element when you use jQuery. |
|
prevColumnIndex |
The index of the previously focused cell's column. |
|
prevRowIndex |
The index of the previously focused cell's row. |
|
newColumnIndex |
The index of the column the cell that should be focused belongs to. |
|
newRowIndex |
The index of the row the cell that should be focused belongs to. |
|
event | Event (jQuery or EventObject) |
The event that caused the function execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
rows |
The visible rows' properties. |
|
columns |
The visible columns' properties. |
|
cancel |
Allows you to cancel focusing a new cell. |
|
isHighlighted |
true if the cell is highlighted; otherwise false, even if the cell's row is highlighted. |
Main article: onFocusedCellChanging
See Also
focusedRowChanged
Raised after the focused row changes. Applies only when focusedRowEnabled is true.
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
rowElement |
The focused row's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
rowIndex |
The row's index. |
|
row |
The row's properties. |
Main article: onFocusedRowChanged
See Also
focusedRowChanging
Raised before the focused row changes. Applies only when focusedRowEnabled is true.
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
rowElement |
The container of the row to be focused. It is an HTML Element or a jQuery Element when you use jQuery. |
|
prevRowIndex |
The index of the previously focused row. |
|
newRowIndex |
The index of the row to be focused. |
|
event | Event (jQuery or EventObject) |
The event that caused the function execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
rows |
The visible rows' properties. |
|
cancel |
Allows you to cancel focusing a new row. |
Main article: onFocusedRowChanging
See Also
initialized
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
Main article: onInitialized
See Also
initNewRow
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the inserted row; initially empty. |
Main article: onInitNewRow
See Also
keyDown
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the function's execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the function's execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
handled |
Indicates whether the widget has already handled this event. |
nodesInitialized
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
root |
The root node. |
Main article: onNodesInitialized
See Also
optionChanged
Event
Name | Type | Description |
---|---|---|
name |
The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into. |
|
model |
The model data. Available only if you use Knockout. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
fullName |
The path to the modified option that includes all parent options. |
|
value | any |
The modified option's new value. |
Main article: onOptionChanged
See Also
rowClick
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
data |
The row's data. |
|
key | any |
The row's key. Available if the rowType is "data", "detail" or "detailAdaptive". |
values |
Values displayed in the row cells. |
|
columns |
All column configurations. |
|
rowIndex |
The row's index. Refer to Column and Row Indexes for more information. |
|
rowType |
The row's type. |
|
isSelected |
Indicates whether the row is selected. Available if rowType is "data" or "detail". |
|
isExpanded |
Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "detail". |
|
rowElement |
The row's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
handled |
Indicates whether internal widget handlers have already handled the event. |
|
node |
The row's node. |
|
level |
The node's hierarchical level. |
Main article: onRowClick
See Also
rowCollapsed
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
key | any |
The key of the row. |
Main article: onRowCollapsed
See Also
rowCollapsing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
key | any |
The key of the row. |
cancel |
Allows you to cancel row collapsing. |
Main article: onRowCollapsing
See Also
rowExpanded
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
key | any |
The key of the row. |
Main article: onRowExpanded
See Also
rowExpanding
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
key | any |
The key of the group or master row. |
cancel |
Allows you to cancel row expansion. |
Main article: onRowExpanding
See Also
rowInserted
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
error |
The standard Error object defining an error that may occur during insertion. |
Main article: onRowInserted
See Also
rowInserting
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row that should be inserted. |
|
cancel | | |
true, a Promise resolved with true, or a rejected Promise stops row insertion. |
Main article: onRowInserting
See Also
rowPrepared
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The row's data. Available if the rowType is "data", "detail" or "detailAdaptive". |
|
key | any |
The row's key. Available if the rowType is "data", "detail" or "detailAdaptive". |
values |
Values displayed in the row cells. |
|
columns |
All column configurations. |
|
rowIndex |
The row's index. Refer to Column and Row Indexes for more information. |
|
rowType |
The row's type. |
|
isSelected |
Indicates whether the row is selected. Available if rowType is "data" or "detail". |
|
isExpanded |
Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "detail". |
|
rowElement |
The row's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
node |
The row's node. |
|
level |
The node's hierarchical level. |
Main article: onRowPrepared
See Also
rowRemoved
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
error |
The standard Error object defining an error that may occur during removal. |
Main article: onRowRemoved
See Also
rowRemoving
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row that should be removed. |
|
key | any |
The row's key. |
cancel | | |
true, a Promise resolved with true, or a rejected Promise stops row removal. |
Main article: onRowRemoving
See Also
rowUpdated
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The updated data of the row. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
error |
The standard Error object defining an error that may occur during updating. |
Main article: onRowUpdated
See Also
rowUpdating
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
oldData |
The row's old data. |
|
newData |
The row's updated data. |
|
key | any |
The row's key. |
cancel | | |
true, a Promise resolved with true, or a rejected Promise stops row updating. |
Main article: onRowUpdating
See Also
rowValidating
Raised after cells in a row are validated against validation rules.
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
brokenRules | Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule> |
An array of broken rules. The structure of rule objects is described in the Validation Rules section. |
isValid |
Indicates whether data in all cells of the row satisfies the validation rules. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
newData |
The data of the validated row after changes. |
|
oldData |
The data of the validated row before changes. |
|
errorText |
An error message to be displayed. |
Main article: onRowValidating
See Also
selectionChanged
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
currentSelectedRowKeys | Array<any> |
The keys of the rows that have been selected. |
currentDeselectedRowKeys | Array<any> |
The keys of the rows whose selection has been cleared. |
selectedRowKeys | Array<any> |
The keys of all selected rows. |
selectedRowsData |
The data of all selected rows. |
Main article: onSelectionChanged
See Also
toolbarPreparing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
toolbarOptions |
Main article: onToolbarPreparing
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.