Events

This section describes events fired by this widget.

cellClick

Fires when a user clicks a grid cell.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

jQueryEvent: jQuery.Event

The jQuery event.

data: Object

The object of the data source represented by the row to which the clicked cell belongs.

key: any

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

value: any

The value of the clicked cell as it is specified in a data source.

displayValue: String

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

text: String

The value of the clicked cell in a string format. Use this field to get the value with applied format and precision.

columnIndex: Number

The current index of the column to which the clicked cell belongs. For more information on how this index is calculated, refer to the Calculating the Column Index topic.

column: Object

The settings of the column to which the clicked cell belongs.

rowIndex: Number

The index of the row to which the clicked cell belongs. When you have several pages in a grid, grid rows are indexed beginning with 0 on each page. Note that group cells are also counted as rows and, thus, have row indexes. For further information about row indexes, see the Grid Rows topic.

rowType: String

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

cellElement: jQuery

The element of the clicked cell.

The settings of the row to which the clicked cell belongs.

When implementing a handling function for this event, use the object passed to this function as its parameter. Among the fields of this object, you can find data relating to the clicked cell.

In addition, you can perform some actions when a user clicks a row. For this purpose, handle the rowClick event.

NOTE
cellClick fires before rowClick.
See Also

cellHoverChanged

Fires when the hover state of a cell is changed.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

eventType: String

Identifies whether the cell has been hovered over or hovered out. This field equals either "mouseover" or "mouseout".

data: Object

The object of the data source presented by the row to which the current cell belongs.

key: any

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

value: any

The value of the current cell as it is specified in the data source.

text: String

The value of the current cell in a string format. Use this field to get the value with an applied format and precision.

displayValue: String

The value displayed by the current cell. 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 current cell belongs. For more information on how this index is calculated, refer to the Calculating the Column Index topic.

rowIndex: Number

The index of the row to which the current cell belongs. When you have several pages in a grid, grid rows are indexed beginning with 0 on each page. Note that group cells are also counted as rows and, thus, have row indexes. For further information about row indexes, see the Grid Rows topic.

column: Object

The settings of the column to which the current cell belongs.

rowType: String

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

cellElement: jQuery

The element of the hovered cell.

The settings of the row to which the cell belongs.

When implementing a handling function for this event, use the object passed to this function as its parameter. Among the fields of this object, you can find data relating to the cell whose hover state has been changed. For example, to identify whether a cell has been hovered over or hovered out, check the value of the eventType field.

See Also

cellPrepared

Fires after a cell has been rendered.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

The object of a data source represented by the row to which the prepared cell belongs.

key: any

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

value: any

The value of the prepared cell as it is specified in the data source.

displayValue: String

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

text: String

The value of the prepared cell in a string format. Use this field to get the value with applied format and precision.

columnIndex: Number

The index of the column to which the prepared cell belongs. For more information on how this index is calculated, refer to the Calculating the Column Index topic.

column: Object

The settings of the column to which the prepared cell belongs.

rowIndex: Number

The index of the row to which the prepared cell belongs. When you have several pages in a grid, grid rows are indexed beginning with 0 on each page. Note that group cells are also counted as rows and thus have row indexes. For further information about row indexes, see the Grid Rows topic.

rowType: String

The type of the row to which the prepared cell belongs. This field can be set to one of the following values: "data", "detail", "group", "groupFooter", "header", "filter" or "totalFooter". Use this field to distinguish rows by type.

The settings of the row to which the cell belongs.

isSelected: Boolean

Indicates whether or not the current row is selected.

isExpanded: Boolean

Indicates whether or not the group cell is expanded. This field is useful if the rowType field is 'group'.

cellElement: jQuery

The element of the prepared cell.

When implementing a handling function for this event, use the object passed to this function as its parameter. Among the fields of this object, you can find data relating to the prepared cell.

See Also

contentReady

Fires when widget content is ready.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

contextMenuPreparing

Fires before displaying a context menu that is invoked on one of the grid's header or row cells.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

items: Array

An array of items to be displayed by the context menu. The item objects must have the fields that are used by the dxContextMenu default item template.

target: String

The name of the grid element on which the context menu is invoked: 'header', 'content' or 'footer'.

targetElement: jQuery

The cell that has been clicked to invoke the context menu.

columnIndex: Number

The current index of the column to which the clicked cell belongs. For more information on how this index is calculated, refer to the Calculating the Column Index topic.

column: Object

The settings of the column to which the clicked cell belongs.

rowIndex: Number

The visible index of the row to which the clicked cell belongs. When you have several pages in a grid, grid rows are indexed beginning with 0 on each page. Note that group cells are also counted as rows and, thus, have row indexes. For further information about row indexes, see the Grid Rows topic.

The settings of the row to which the clicked cell belongs.

Handle this event to change the set of items in a context menu before it is displayed.

See Also

dataErrorOccurred

Fires when an error occurs in the data source.

Event Handler Argument:

Information on the occurred error.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

The standard Error object that defines the occurred error.

To handle errors that might occur in the data source, implement a handling function and attach it to the dataErrorOccurred event. To obtain a human-readable representation of the occurred error, use the message field of the error object passed to the handling function as the parameter's field.

See Also

disposing

Fires when the widget is being removed.

Event Handler Argument:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget instance.

element: jQuery

An HTML element of the widget.

model: Object

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

NOTE
This event fires only if the widget is removed using the remove(), empty(), or html() jQuery methods.
See Also

editingStart

Fires before a row (in row edit mode) or a cell (in batch edit mode) switches into the editing state.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

The data object of the row.

key: any

The key of the row. If a field providing keys is not specified in a data source, the whole data object is considered the key. If a row has not been transmitted to the data source yet, its key is undefined.

cancel: Boolean

A flag allowing you to prevent the row from switching into the editing state.

column: Object

The options of the column whose cell is switching into the editing state; useful in the batch edit mode.

When implementing a handling function for this event, use the object passed to this function as its argument. Among the fields of this object, you can find parameters of the about-to-be-edited row.

If you need to prevent a specific row or cell from switching into the editing state, assign true to the cancel field of the object passed to the handler as the argument.

You can also distinguish rows that exist in the data source from rows that have not yet been transmitted to the data source. For this purpose, use the key field of the object with the row parameters. Not-yet-transmitted rows have this field undefined.

See Also

editorPrepared

Fires after an editor is created.

Event Handler Argument:
options: Object

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

parentType: String

Identifies the type of the editor's parent element. Equals 'dataRow', 'filterRow', 'headerRow' or 'searchPanel'. Depending on the value of this field, different options are passed to the editorPrepared handler.

value: any

The current value of the editor.

setValue(newValue): any

A method that should be called to change the cell value when the editor value is changed.

updateValueTimeout: Number

Specifies the delay between the moment a user stops entering a filter value in the filter row or search panel and the moment this value is applied.

width: Number

The width of the editor; equals null for editors of all parent types except for the 'searchPanel'.

disabled: Boolean

Identifies whether or not the editor is disabled.

rtlEnabled: Boolean

Identifies whether or not the editor uses a right-to-left representation.

editorElement: jQuery
readOnly: Boolean

Identifies whether or not the editor responds to user actions.

dataField: String

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

The properties of the row that the editor belongs to.

Many grid elements are constructed on editors. For example, the search panel is constructed on a text box, the selection column is built on check boxes in full, etc. Obviously, editors are also used to edit cells or rows in a grid. When default editors provided by dxDataGrid do not meet your requirements, you can customize them by changing their settings within the editorPrepared event handler. This handler will be called after an editor is created.

When implementing the handler, use the object passed to it as its argument. Among the fields of this object, you can find the options of the created editor. These options differ depending on the parent element of the editor. To identify the parent element, check the parentType field of the handler's argument.

When the parentType is 'dataRow' or 'headerRow', you can use the options described in the column's reference section.

NOTE
If you have specified the editCellTemplate option, the editorPrepared event will not fire when a row or a cell switches into the editing state.
See Also

editorPreparing

Fires before an editor is created.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

parentType: String

Identifies the type of the editor's parent element. Equals 'dataRow', 'filterRow', 'headerRow' or 'searchPanel'. Depending on the value of this field, different options are passed to the editorPreparing handler.

value: any

The current value of the editor.

setValue(newValue): any

A method that should be called to change the cell value when the editor value is changed.

updateValueTimeout: Number

Specifies the delay between the moment a user stops entering a filter value in the filter row or search panel and the moment this value applies.

width: Number

The width of the editor; equals null for editors of all parent types except for the 'searchPanel'.

disabled: Boolean

Identifies whether or not the editor is disabled.

rtlEnabled: Boolean

Identifies whether or not the editor uses a right-to-left representation.

cancel: Boolean

A flag allowing you to cancel the creation of the editor. Set it to true and implement a custom editor if your scenario requires it.

editorElement: jQuery
readOnly: Boolean

Identifies whether or not the editor responds to user actions.

editorName: String

The name of the editor widget.

editorOptions: Object

An object with configuration options for the editor widget.

dataField: String

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

The properties of the row that the editor belongs to.

Many grid elements are constructed on editors. For example, the search panel is constructed on a text box, the selection column is built on check boxes in full, etc. Obviously, editors are also used to edit a cell or a row in a grid. When default editors provided by dxDataGrid do not meet your requirements, implement a custom editor. For this purpose, attach a handling function to the editorPreparing event. This function accepts an object as the parameter. Assign true to the cancel field of this object. After that, implement your editor using the other fields of this object.

You can distinguish editors by their parent element. Also, the parent element defines data passed to the editorPreparing handler. To identify the parent element, check the parentType field of the handler's argument.

When the parentType is 'dataRow' or 'headerRow', you can use the options described in the columns reference section.

NOTE
If you have specified the editCellTemplate option, the editorPrepared event will not fire when a row or a cell switches into the editing state.
See Also

exported

Fires after the exporting of grid data is completed.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

exporting

Fires before exporting grid's data.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

fileName: String

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

cancel: Boolean

Indicates whether or not to cancel exporting.

fileSaving

Fires before the grid saves an Excel file with exported data on the user's local storage.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

fileName: String

The name of the file to be saved.

format: String

The format of the file to be saved. Equals to 'EXCEL' for an Excel file.

data: BLOB

Exported data as a BLOB.

cancel: Boolean

To cancel file saving, assign true to this parameter.

initialized

Fires when the widget is initialized.

Event Handler Argument:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget instance.

element: jQuery

An HTML element of the widget.

initNewRow

Fires on row insertion.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

Data of the inserted row; initially empty.

By default, a row inserted into a grid contains no data. If you need this row to contain some data, e.g., default values of row cells, implement a function handling the initNewRow event. Use the data field of the object passed to this function as the argument to access the data object of the new row. Initially, this data object is empty. Populate this object with data in such a manner that its fields correspond to the fields of a data source object.

NOTE
Populating all fields of the data object is not necessary. Populate only those of them that must initialize specific cells of a new row.
See Also

keyDown

Fires when a key is pressed down when the widget is focused.

Event Handler Argument:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget instance.

element: jQuery

An HTML element of the widget.

jQueryEvent: jQuery.Event

Specifies the jQuery event that caused action execution.

handled: Boolean

Indicates if the grid has already handled the key down event.

optionChanged

Fires after an option of the component is changed.

Event Handler Argument:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget instance.

name: String

Specifies the name of the option whose value is changed.

fullName: String

Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.

value: any

Specifies a new value for the option.

element: jQuery

An HTML element of the widget.

model: Object

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

rowClick

Fires when a user clicks a grid row.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

jQueryEvent: jQuery.Event

The jQuery event.

data: Object

The object of the data source represented by the clicked row.

key: any

The key value of the clicked row.

values: Array

Values of the clicked row as they exist in the data source.

columns: Array

Grid columns. Each column in this array is represented by an object with column settings. The order of columns in this array and columns in the columns array coincides.

rowIndex: Number

The visible index of the clicked row. When you have several pages in a grid, grid rows are indexed beginning with 0 on each page. Note that group rows are also counted and, thus, have row indexes. For further information about row indexes, see the Grid Rows topic.

rowType: String

The type of the clicked row. This field equals 'data' for ordinary rows, 'group' for group rows or 'detail' for detail sections. Use this field to distinguish rows by type.

isSelected: Boolean

Indicates whether the clicked row is selected.

isExpanded: Boolean

Indicates whether or not the group row is expanded. This field is useful if the rowType field is 'group'.

groupIndex: Number

The group index of the clicked row. This field is useful if the rowType field is 'group'.

rowElement: jQuery

The clicked row; provides access to element-related jQuery operations.

handled: Boolean

Indicates if the grid has already handled the row click event.

When implementing a handling function for this event, use the object passed to this function as its parameter. Among the fields of this object, you can find data relating to the clicked row.

NOTE
If there are any internal grid handlers for the row click, the rowClick event fires only after these handlers are executed. In this case, the handled field of the handler parameter is set to true.

In addition, you can perform some actions when a user clicks a cell. For this purpose, handle the cellClick event. Note that cellClick fires before rowClick.

NOTE
When the clicked row is in the editing state, or switches to the editing state, the rowClick event will not fire. Instead, you can use cellClick.
See Also

rowCollapsed

Fires after a master or group row is collapsed in the grid.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

key: any

The key of the collapsed group or master row.

rowCollapsing

Fires before a master or group row is collapsed in the grid.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

key: any

The key of the group or master row.

cancel: Boolean

Indicates whether to cancel collapsing the row.

Handle this event to prevent collapsing of a specific row.

See Also

rowExpanded

Fires after a master or group row is expanded in the grid.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

key: any

The key of the expanded group or master row.

rowExpanding

Fires before a master or group row is expanded in the grid.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

key: any

The key of the group or master row.

cancel: Boolean

Indicates whether to cancel expanding the row.

Handle this event to prevent expanding of a specific row.

See Also

rowInserted

Fires after a row has been inserted into the data source.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

Data of the row.

key: any

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

The standard Error object that defines the occurred error.

When implementing a handling function for this event, use the object passed to this function as its argument. Among the fields of this object, you can find the key and data of the inserted row.

NOTE
In batch edit mode, when several rows have been inserted, the rowInserted event will fire for each row individually.
See Also

rowInserting

Fires before a grid row is transmitted to the data source.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

Row data.

A flag allowing you to prevent the row from being inserted into the data source.

When implementing a handling function for this event, use the object passed to this function as its argument. This object contains information about the event. Among the fields of this object, you can find the cancel flag that allows you to prevent the row from being transmitted to the data source. In order to accomplish that, set this flag to true. The behavior of rejected rows depends on the edit mode. In row mode, a rejected row does not switch back to the normal state. In batch mode, rejected rows stay buffered. If you need to perform an asynchronous action before saving the newly added row, assign a jQuery.Promise object to the cancel field. The row will be inserted when the jQuery.Promise object is resolved.

NOTE
In batch edit mode, when several rows are to be inserted, the rowInserting event will fire for each row individually.
See Also

rowPrepared

Fires after a row has been rendered.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

The object of a data source represented by the prepared row.

key: any

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

values: any

Values of the current row as they exist in the data source.

columns: Array

Grid columns. Each column in this array is represented by an object with column settings. The order of columns in this array and columns in the columns array coincides.

rowIndex: Number

The visible index of the prepared row. When you have several pages in a grid, grid rows are indexed beginning with 0 on each page. Note that group cells are also counted as rows and, thus, have row indexes. For further information about row indexes, see the Grid Rows topic.

rowType: String

The type of the prepared row. This field can be set to one of the following values: "data", "detail", "group", "groupFooter", "header", "filter" or "totalFooter". Use this field to distinguish rows by type.

groupIndex: Number

The group index of the current row. This field is useful if the rowType field is 'group'.

isSelected: Boolean

Indicates whether the prepared row is selected.

isExpanded: Boolean

Indicates whether the prepared row is expanded.

rowElement: jQuery

The element of the hovered row.

When implementing a handling function for this event, use the object passed to this function as its parameter. Among the fields of this object, you can find data relating to the prepared row.

See Also

rowRemoved

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

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

Data of the row.

key: any

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

The standard Error object that defines the occurred error.

When implementing a handling function for this event, use the object passed to this function as its argument. Among the fields of this object, you can find the data and key of the removed row.

NOTE
In batch edit mode, when several rows have been removed, the rowRemoved event will fire for each row individually.
See Also

rowRemoving

Fires before a row is removed from a data source.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

Row data.

key: any

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

A flag allowing you to prevent the row from being removed from the data source.

When implementing a handling function for this event, use the object passed to this function as its argument. This object contains information about the event. Among the fields of this object, you can find the cancel flag that allows you to prevent the row from being removed from the data source. In order to accomplish that, set this flag to true. The behavior of the rows, whose removal was canceled, depends on the edit mode. In row mode, such a row is preserved. In batch mode, such rows are displayed as recoverable. If you need to perform an asynchronous action before deleting the row, assign a jQuery.Promise object to the cancel field. The row will be actually deleted when the jQuery.Promise object is resolved.

NOTE
In batch edit mode, when several rows are to be removed, the rowRemoving event will fire for each row individually.
See Also

rowUpdated

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

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

data: Object

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 a data source, the whole data object is considered the key.

The standard Error object that defines the occurred error.

When implementing a handling function for this event, use the object passed to this function as its parameter. Among the fields of this object, you can find the data object and the key value of the updated row. Note that the data object contains only those fields of a row that have been updated.

NOTE
In batch edit mode, when several rows have been updated, the rowUpdated event will fire for each row individually.
See Also

rowUpdating

Fires before a row is updated in a data source.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

oldData: Object

Row's old data.

newData: Object

Row's updated data.

key: any

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

A flag allowing you to prevent the row from being updated.

When implementing a handling function for this event, use the object passed to this function as its argument. This object contains information about the event. Among the fields of this object, you can find the cancel flag that allows you to prevent the row from being updated. In order to accomplish that, set this flag to true. The behavior of the rows, whose updating was canceled, depends on the edit mode. In row mode, such a row does not switch back to the normal state. In batch mode, changes in such rows stay buffered. If you need to perform an asynchronous action before saving the updated row, assign a jQuery.Promise object to the cancel field. The row will be actually updated when the jQuery.Promise object is resolved.

NOTE
In batch edit mode, when several rows are to be updated, the onRowUpdating function will be executed for each row individually.
See Also

rowValidating

Fires when a cell(s) in a row is validated.

Event Handler Argument:

Provides function parameters.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

brokenRules: Array

An array of broken rules. The structure of rule objects is described in the Validation Rules section.

isValid: Boolean

Indicates whether all the rules checked for the cells in the current row are satisfied.

key: any

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

newData: Object

Data of the validated row after user changes.

oldData: Object

Data of the validated row as it was before user changes.

errorText: String

The error message to be displayed in the grid's error row.

When data in a cell or in several cells is changed, the validation rules specified for these cells are checked. Before the validation result (messages on the broken rules) is displayed in the grid, you can interfere by handling the rowValidating event. For instance, you can provide a common text for all the cells where validation rules are not satisfied. This text will be displayed under the validated row in a specially added error row. To provide a common text for a row, specify the errorText field of the event handler's parameter. In addition, you can change the validation result before it is displayed by performing an additional check and setting the result to the isValid field of the event handler's parameter.

In batch mode, when several row updates are committed simultaneously, the rowValidating error fires for each row that has changes.

See Also

selectionChanged

Fires when a grid record has been selected/deselected.

Event Handler Argument:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

currentSelectedRowKeys: Array

The keys of the rows that have been selected currently.

currentDeselectedRowKeys: Array

The keys of the rows that have been deselected currently.

selectedRowKeys: Array

The keys of all selected rows.

selectedRowsData: Array

The data of all selected rows.

When implementing a function that handles this event, you can use arrays of keys of those grid records that have been currently selected or deselected. These arrays can be accessed through the fields of the object passed as the function's parameter. Arrays of all selected records and their data are also accessible through the same object.

If a field providing key values is not specified in a data source, the whole data object is considered the key for a grid record. In this case, all arrays passed to the selectionChanged event handler contain data objects instead of keys.

To retrieve data by a key, use the byKey(key) method.

See Also