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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 |
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 visible index of the row to which the cell belongs. |
|
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 |
The cell's displayed value. Available if the rowType is 'data'. |
|
columnIndex |
The index of the column to which the cell belongs. |
|
rowIndex |
The visible index of the row to which the cell belongs. |
|
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 |
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 visible index. |
|
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. |
Main article: onCellPrepared
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 visible index of the row on which the context menu is invoked. |
|
row |
The row properties. |
Main article: onContextMenuPreparing
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
disposing
Raised when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.
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. |
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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. |
|
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. |
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
optionChanged
Event
Name | Type | Description |
---|---|---|
name |
The option's short name. |
|
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 option's full name. |
|
value | any |
The option's new value. |
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 visible index. |
|
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. |
Main article: onRowClick
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 to-be-inserted row. |
|
cancel | | |
Allows you to cancel row insertion. |
Main article: onRowInserting
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 visible index. |
|
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. |
Main article: onRowPrepared
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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. |
|
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. |
cancel | | |
Allows you to cancel row removal. |
Main article: onRowRemoving
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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; contains only those fields that have been updated. |
|
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 old data of the row. |
|
newData |
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. |
cancel | | |
Allows you to cancel row updating. |
Main article: onRowUpdating
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 |
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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 | dxToolbarOptions |
Main article: onToolbarPreparing
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
If you have technical questions, please create a support ticket in the DevExpress Support Center.