Events

This section describes events fired 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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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

The jQuery event that caused the handler execution. Deprecated in favor of the event field.

event:

Event (jQuery or dxEvent)

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.

key: any

The row's key. If a field providing keys is not specified in the data source, the whole data object is considered the key.

value: any

The cell's raw value.

displayValue:

String

The cell's displayed value. Differs from the value field only when the column to which the clicked cell belongs uses lookup.

text:

String

The cell's formatted value converted to a string.

columnIndex:

Number

The index of the column to which the cell belongs. For details on indexes, see the Column and Row Indexes topic.

column:

Object

This column's configuration.

rowIndex:

Number

The visible index of the row to which the cell belongs. For details on indexes, see the Column and Row Indexes topic.

rowType:

String

The type of the row to which the clicked cell belongs. This field equals 'data' for data rows or 'group' for group rows. Use this field to distinguish rows by type.

cellElement:

Element (jQuery or HTML)

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

The row properties.

Main article: onCellClick

See Also

cellHoverChanged

Raised after the pointer enters or leaves a cell.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

key: any

The row's key. If a field providing keys is not specified in the data source, the whole data object is considered the key.

value: any

The cell's raw value.

text:

String

The cell's formatted value converted to a string.

displayValue:

String

The cell's displayed value. Differs from the value field only when the column to which the current cell belongs uses lookup.

columnIndex:

Number

The index of the column to which the cell belongs. For details on indexes, see the Column and Row Indexes topic.

rowIndex:

Number

The row's visible index. For details on indexes, see the Column and Row Indexes topic.

This column's configuration.

rowType:

String

The row's type. This field equals 'data' for data rows or 'group' for group rows.

cellElement:

Element (jQuery or HTML)

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

The row properties.

Main article: onCellHoverChanged

See Also

cellPrepared

Raised after a cell is created.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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. Unavailable if rowType is "header", "filter" or "totalFooter".

key: any

The row's key. Unavailable if rowType is "header", "filter" or "totalFooter".
If a field providing keys is not specified in the data source, the whole data object is considered the key.

value: any

The cell's raw value.

displayValue:

String

The cell's displayed value. Differs from the value field only when the column to which the prepared cell belongs uses lookup.

text:

String

The cell's formatted value converted to a string.

columnIndex:

Number

The index of the column to which the cell belongs. For details on indexes, see the Column and Row Indexes topic.

This column's configuration.

rowIndex:

Number

The row's visible index. For details on indexes, see the Column and Row Indexes topic.

rowType:

String

The row's type. Can have one of the following values: "data", "detail", "detailAdaptive", "group", "groupFooter", "header", "filter" or "totalFooter".

The row properties.

isSelected:

Boolean

Indicates whether the row is selected.

isExpanded:

Boolean

Indicates whether the row is expanded or collapsed. Unavailable if rowType is "header", "filter" or "totalFooter".

cellElement:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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 grid element on which the context menu is invoked: 'headerPanel', 'header', 'content' or 'footer'.

targetElement:

Element (jQuery or HTML)

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. For details on indexes, see the Column and Row Indexes topic.

This column's configuration.

rowIndex:

Number

The visible index of the row on which the context menu is invoked. For details on indexes, see the Column and Row Indexes topic.

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

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:
component:

Object

The widget instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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 a row to be edited.

key: any

The row's key. The key of an added but not yet saved row is undefined.
If a field providing keys is not specified in the data source, the whole data object is considered the key.

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 the '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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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'.
Options passed to the function depend on this value.

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 a right-to-left representation.

editorElement:

Element (jQuery or HTML)

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.

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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'.
Options passed to the function depend on this value.

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 a 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:

Element (jQuery or HTML)

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.

The properties of the row the editor belongs to.

Main article: onEditorPreparing

See Also

exported

Raised after data is exported.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

Main article: onExported

See Also

exporting

Raised before data is exported.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

fileName:

String

The name of the file to which grid data is about to be exported.

cancel:

Boolean

Allows you to cancel exporting.

Main article: onExporting

See Also

fileSaving

Raised before a file with exported data is saved to the user's local storage.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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

fileName:

String

The name of the file to be saved.

format:

String

The format of this file. Equals 'EXCEL' for an Excel file.

data:

BLOB

Exported data as a BLOB.

cancel:

Boolean

Allows you to cancel file saving.

Main article: onFileSaving

See Also

initialized

Raised only once, after the widget is initialized.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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

jQueryEvent:

jQuery.Event

The jQuery event that caused the handler execution. Deprecated in favor of the event field.

event:

Event (jQuery or dxEvent)

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

optionChanged

Raised after a widget option is changed.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

name:

String

The option's short name.

fullName:

String

The option's full name.

value: any

The option's new value.

element:

Element (jQuery or HTML)

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: onOptionChanged

See Also

rowClick

Raised when a row is clicked or tapped.

Type:

Event

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

jQueryEvent:

jQuery.Event

The jQuery event that caused the handler execution. Deprecated in favor of the event field.

event:

Event (jQuery or dxEvent)

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.

values:

Array<Object>

Values displayed in the row cells.

columns:

Array<Object>

All column configurations.

rowIndex:

Number

The row's visible index. For details on indexes, see the Column and Row Indexes topic.

rowType:

String

The row's type. Can be one of the following: 'data' for data rows, 'group' for group rows, 'detail' for detail sections, or "detailAdaptive" for adaptive detail rows.

isSelected:

Boolean

Indicates whether the row is selected.

isExpanded:

Boolean

Indicates whether or not the group row is expanded. Available if rowType is 'group'.

groupIndex:

Number

The row's group index. Available if rowType is 'group'.

rowElement:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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 to-be-inserted row.

cancel:

Boolean

|

Promise<void> (jQuery or native)

Allows you to cancel 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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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 row's raw data. Unavailable if rowType is "header", "filter" or "totalFooter".

key: any

The row's key.
If a field providing keys is not specified in the data source, the whole data object is considered the key.

values:

Array<Object>

Values displayed in the row cells.

All column configurations.

rowIndex:

Number

The row's visible index. For details on indexes, see the Column and Row Indexes topic.

rowType:

String

The row's type. Can have one of the following values: "data", "detail", "detailAdaptive", "group", "groupFooter", "header", "filter" or "totalFooter".

groupIndex:

Number

The row's group index. Available if rowType is 'group'.

isSelected:

Boolean

Indicates whether the prepared row is selected. Available only if rowType is "data".

isExpanded:

Boolean

Indicates whether the row is expanded or collapsed. Unavailable if rowType is "header", "filter", or "totalFooter".

rowElement:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

cancel:

Boolean

|

Promise<void> (jQuery or native)

Allows you to cancel 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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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 old data of the row.

newData:

Object

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:

Boolean

|

Promise<void> (jQuery or native)

Allows you to cancel 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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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.

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

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

Main article: onToolbarPreparing

See Also