React TreeList Events

This section describes events raised by this widget.

See Also

adaptiveDetailRowPreparing

Raised before an adaptive detail row is rendered.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

formOptions

Object

The options of the Form widget.

Main article: onAdaptiveDetailRowPreparing

See Also

cellClick

Raised when a cell is clicked or tapped.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

jQueryEvent

jQuery.Event

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

Object

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".
For plain data, the key value depends on the keyExpr option. For hierarchical data, the key is generated automatically or set in the underlying Store of the data source.

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".
Differs from the value field only when the cell belongs to the lookup column.

text

String

The cell's formatted value converted to a string. Available if the rowType is "data".

columnIndex

Number

The index of the column to which the cell belongs.

column

Object

This column's configuration.

rowIndex

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

rowType

String

The row's type.

cellElement

HTMLElement | jQuery

The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

row

TreeList Row

The row properties. Available if the rowType is "data", "detail" or "detailAdaptive".

Main article: onCellClick

See Also

cellHoverChanged

Raised when the pointer enters or leaves a cell.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

eventType

String

Indicates whether the pointer entered or left the cell. Can be either "mouseover" or "mouseout".

data

Object

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".
For plain data, the key value depends on the keyExpr option. For hierarchical data, the key is generated automatically or set in the underlying Store of the data source.

value any

The cell's raw value. Available if the rowType is "data".

text

String

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".
Differs from the value field only when the cell belongs to the lookup column.

columnIndex

Number

The index of the column to which the cell belongs.

rowIndex

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

column

TreeList Column

This column's configuration.

rowType

String

The row's type.

cellElement

HTMLElement | jQuery

The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

row

TreeList Row

The row properties. Available if the rowType is "data", "detail" or "detailAdaptive".

Main article: onCellHoverChanged

See Also

cellPrepared

Raised after a cell is created.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

data

Object

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".
For plain data, the key value depends on the keyExpr option. For hierarchical data, the key is generated automatically or set in the underlying Store of the data source.

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".
Differs from the value field only when the cell belongs to the lookup column.

text

String

The cell's formatted value converted to a string. Available if the rowType is "data".

columnIndex

Number

The index of the column to which the cell belongs.

column

TreeList Column

This column's configuration.

rowIndex

Number

The row's index. Refer to Column and Row Indexes for more information.

rowType

String

The row's type.

row

TreeList Row

The row properties. Available if the rowType is "data", "detail" or "detailAdaptive".

isSelected

Boolean

Indicates whether the row is selected. Available if rowType is "data" or "detail".

isExpanded

Boolean

Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "detail".

cellElement

HTMLElement | jQuery

The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

Main article: onCellPrepared

See Also

contentReady

Raised when the widget's content is ready.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only when using Knockout.

Main article: onContentReady.

See Also

contextMenuPreparing

Raised before the context menu is rendered.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

items

Array<Object>

Items to be displayed in the context menu. Their structure is described in the Default Item Template section.

target

String

The name of the element on which the context menu is invoked: "header", "content" or "footer". This field is read-only.

targetElement

HTMLElement | jQuery

This element's container. It is an HTML Element or a jQuery Element when you use jQuery.

columnIndex

Number

The index of the column on which the context menu is invoked.

column

TreeList Column

This column's configuration.

rowIndex

Number

The index of the row on which the context menu is invoked. Refer to Column and Row Indexes for more information.

row

TreeList Row

The row properties.

Main article: onContextMenuPreparing

See Also

dataErrorOccurred

Raised when an error occurs in the data source.

Type:

Event

Function parameters:
e:

Object

Information on the occurred error.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

error

JavaScript Error Object

The standard Error object that defines the error.

Main article: onDataErrorOccurred

See Also

disposing

Raised before the widget is disposed of.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

Main article: onDisposing

See Also

editingStart

Raised before a cell or row switches to the editing state.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if Knockout is used.

data

Object

The data of the row to be edited.

key any

The row's key.
The key of an added but not yet saved row is undefined.

cancel

Boolean

Allows you to cancel row editing.

column

Object

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

Raised after an editor is created.

Type:

Event

Function parameters:
options:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

parentType

String

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

Number

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

Number

The editor's width; equals null for all editors except for those whose parentType equals "searchPanel".

disabled

Boolean

Indicates whether the editor is disabled.

rtlEnabled

Boolean

Indicates whether the editor uses right-to-left representation.

editorElement

HTMLElement | jQuery

The editor's container. It is an HTML Element or a jQuery Element when you use jQuery.

readOnly

Boolean

Indicates whether the editor is read-only.

dataField

String

The name of the field that provides data for the column the editor belongs to.

row

TreeList Row

The properties of the row the editor belongs to.

Main article: onEditorPrepared

See Also

editorPreparing

Raised before an editor is created.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

parentType

String

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

Number

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

Number

The editor's width; equals null for all editors except for those whose parentType equals "searchPanel".

disabled

Boolean

Indicates whether the editor is disabled.

rtlEnabled

Boolean

Indicates whether the editor uses right-to-left representation.

cancel

Boolean

Allows you to cancel creating the editor.
Set it to true and implement a custom editor if your scenario requires it.

editorElement

HTMLElement | jQuery

The editor's container. It is an HTML Element or a jQuery Element when you use jQuery.

readOnly

Boolean

Indicates whether the editor is read-only.

editorName

String

Allows you to change the editor. Accepts names of DevExtreme widgets only, for example, "dxTextBox".
Import a new editor's module when using DevExtreme modules.

editorOptions

Object

Gets and sets the editor configuration.

dataField

String

The name of the field that provides data for the column the editor belongs to.

row

TreeList Row

The properties of the row the editor belongs to.

Main article: onEditorPreparing

See Also

initialized

Raised only once, after the widget is initialized.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Main article: onInitialized

See Also

initNewRow

Raised before a new row is added to the widget.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

data

Object

The data of the inserted row; initially empty.

Main article: onInitNewRow

See Also

keyDown

Raised when the widget is in focus and a key has been pressed down.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

jQueryEvent

jQuery.Event

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

Boolean

Indicates whether the widget has already handled this event.

Main article: onKeyDown

See Also

nodesInitialized

Raised after the loaded nodes are initialized.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

root

TreeList Node

The root node.

Main article: onNodesInitialized

See Also

optionChanged

Raised after a widget option is changed.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
name

String

The option's short name.

model

Object

The model data. Available only if you use Knockout.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

TreeList

The widget's instance.

fullName

String

The option's full name.

value any

The option's new value.

Main article: onOptionChanged

See Also

rowClick

Raised when a row is clicked or tapped.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

jQueryEvent

jQuery.Event

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

Object

The row's data.

key any

The row's key. Available if the rowType is "data", "detail" or "detailAdaptive".
For plain data, the key value depends on the keyExpr option. For hierarchical data, the key is generated automatically or set in the underlying Store of the data source.

values

Array<Object>

Values displayed in the row cells.

columns

Array<Object>

All column configurations.

rowIndex

Number

The row's index. Refer to Column and Row Indexes for more information.

rowType

String

The row's type.

isSelected

Boolean

Indicates whether the row is selected. Available if rowType is "data" or "detail".

isExpanded

Boolean

Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "detail".

rowElement

HTMLElement | jQuery

The row's container. It is an HTML Element or a jQuery Element when you use jQuery.

handled

Boolean

Indicates whether internal widget handlers have already handled the event.

Main article: onRowClick

See Also

rowCollapsed

Raised after a row is collapsed.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

key any

The key of the row.

Main article: onRowCollapsed

See Also

rowCollapsing

Raised before a row is collapsed.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

key any

The key of the row.

cancel

Boolean

Allows you to cancel row collapsing.

Main article: onRowCollapsing

See Also

rowExpanded

Raised after a row is expanded.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

key any

The key of the row.

Main article: onRowExpanded

See Also

rowExpanding

Raised before a row is expanded.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

key any

The key of the group or master row.

cancel

Boolean

Allows you to cancel row expansion.

Main article: onRowExpanding

See Also

rowInserted

Raised after a new row has been inserted into the data source.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

data

Object

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

JavaScript Error Object

The standard Error object defining an error that may occur during insertion.

Main article: onRowInserted

See Also

rowInserting

Raised before a new row is inserted into the data source.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

data

Object

The data of the row that should be inserted.

cancel

Boolean

|

Promise<void> (jQuery or native)

true, a Promise resolved with true, or a rejected Promise stops row insertion.
false or a Promise resolved with false or undefined continues row insertion.

Main article: onRowInserting

See Also

rowPrepared

Raised after a row is created.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

data

Object

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".
For plain data, the value of the key depends on the keyExpr option. For hierarchical data, the key is generated automatically or set in the underlying Store of the data source.

values

Array<Object>

Values displayed in the row cells.

columns

Array<TreeList Column>

All column configurations.

rowIndex

Number

The row's index. Refer to Column and Row Indexes for more information.

rowType

String

The row's type.

isSelected

Boolean

Indicates whether the row is selected. Available if rowType is "data" or "detail".

isExpanded

Boolean

Indicates whether the row is expanded or collapsed. Available if rowType is "data" or "detail".

rowElement

HTMLElement | jQuery

The row's container. It is an HTML Element or a jQuery Element when you use jQuery.

Main article: onRowPrepared

See Also

rowRemoved

Raised after a row has been removed from the data source.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

data

Object

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

JavaScript Error Object

The standard Error object defining an error that may occur during removal.

Main article: onRowRemoved

See Also

rowRemoving

Raised before a row is removed from the data source.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

data

Object

The data of the row that should be removed.

key any

The row's key.

cancel

Boolean

|

Promise<void> (jQuery or native)

true, a Promise resolved with true, or a rejected Promise stops row removal.
false or a Promise resolved with false or undefined continues row removal.

Main article: onRowRemoving

See Also

rowUpdated

Raised after a row has been updated in the data source.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

data

Object

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

JavaScript Error Object

The standard Error object defining an error that may occur during updating.

Main article: onRowUpdated

See Also

rowUpdating

Raised before a row is updated in the data source.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

oldData

Object

The row's old data.

newData

Object

The row's updated data.

key any

The row's key.

cancel

Boolean

|

Promise<void> (jQuery or native)

true, a Promise resolved with true, or a rejected Promise stops row updating.
false or a Promise resolved with false or undefined continues row updating.

Main article: onRowUpdating

See Also

rowValidating

Raised after cells in a row are validated against validation rules.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

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

Boolean

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

Object

The data of the validated row after changes.

oldData

Object

The data of the validated row before changes.

errorText

String

An error message to be displayed.

Main article: onRowValidating

See Also

selectionChanged

Raised after selecting a row or clearing its selection.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

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

Array<Object>

The data of all selected rows.
Does not include calculated values.

Main article: onSelectionChanged

See Also

toolbarPreparing

Raised before the toolbar is created.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

TreeList

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

toolbarOptions

Toolbar Configuration

The options of the toolbar.

Main article: onToolbarPreparing

See Also