Angular DataGrid Events
adaptiveDetailRowPreparing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
formOptions |
The options of the Form widget. |
Main article: onAdaptiveDetailRowPreparing
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
cellClick
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
data |
The data of the row to which the cell belongs. |
|
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 |
The cell's displayed value. Differs from the value field only when the column to which the clicked cell belongs uses lookup. |
|
text |
The cell's formatted value converted to a string. |
|
columnIndex |
The index of the column to which the cell belongs. For details on indexes, see the Column and Row Indexes topic. |
|
column |
This column's configuration. |
|
rowIndex |
The visible index of the row to which the cell belongs. For details on indexes, see the Column and Row Indexes topic. |
|
rowType |
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 |
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
row |
The row properties. |
Instead, you can use the onCellClick option to handle the 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 cell.
In addition, you can perform some actions when a user clicks a row. For this purpose, handle the rowClick event.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
cellHoverChanged
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
eventType |
Indicates whether the pointer entered or left the cell. Can be either 'mouseover' or 'mouseout'. |
|
data |
The data of the row to which the cell belongs. |
|
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 |
The cell's formatted value converted to a string. |
|
displayValue |
The cell's displayed value. Differs from the value field only when the column to which the current cell belongs uses lookup. |
|
columnIndex |
The index of the column to which the cell belongs. For details on indexes, see the Column and Row Indexes topic. |
|
rowIndex |
The row's visible index. For details on indexes, see the Column and Row Indexes topic. |
|
column |
This column's configuration. |
|
rowType |
The row's type. This field equals 'data' for data rows or 'group' for group rows. |
|
cellElement |
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
row |
The row properties. |
Instead, you can use the onCellHoverChanged option to handle the 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 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
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
cellPrepared
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row to which the cell belongs. Unavailable if rowType is "header", "filter" or "totalFooter". |
|
key | any |
The row's key. Unavailable if rowType is "header", "filter" or "totalFooter". |
value | any |
The cell's raw value. |
displayValue |
The cell's displayed value. Differs from the value field only when the column to which the prepared cell belongs uses lookup. |
|
text |
The cell's formatted value converted to a string. |
|
columnIndex |
The index of the column to which the cell belongs. For details on indexes, see the Column and Row Indexes topic. |
|
column |
This column's configuration. |
|
rowIndex |
The row's visible index. For details on indexes, see the Column and Row Indexes topic. |
|
rowType |
The row's type. Can have one of the following values: "data", "detail", "detailAdaptive", "group", "groupFooter", "header", "filter" or "totalFooter". |
|
row |
The row properties. |
|
isSelected |
Indicates whether the row is selected. |
|
isExpanded |
Indicates whether the row is expanded or collapsed. Unavailable if rowType is "header", "filter" or "totalFooter". |
|
cellElement |
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery. |
Instead, you can use the onCellPrepared option to handle the 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 prepared cell.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
contentReady
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only when using Knockout. |
Main article: onContentReady.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
contextMenuPreparing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
items |
Items to be displayed in the context menu. Their structure is described in the Default Item Template section. |
|
target |
The name of the grid element on which the context menu is invoked: 'headerPanel', 'header', 'content' or 'footer'. |
|
targetElement |
This element's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
columnIndex |
The index of the column on which the context menu is invoked. For details on indexes, see the Column and Row Indexes topic. |
|
column |
This column's configuration. |
|
rowIndex |
The visible index of the row on which the context menu is invoked. For details on indexes, see the Column and Row Indexes topic. |
|
row |
The row properties. |
Instead, you can use the onContextMenuPreparing option to handle the event.
Handle this event to change the set of items in a context menu before it is displayed.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
dataErrorOccurred
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
error |
The standard Error object that defines the error. |
Main article: onDataErrorOccurred
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
disposing
Raised when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.
Event
Name | Type | Description |
---|---|---|
component |
The widget instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
editingStart
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
data |
The data of a row to be edited. |
|
key | any |
The row's key. The key of an added but not yet saved row is undefined. |
cancel |
Allows you to cancel row editing. |
|
column |
The configuration of the column whose cell is switching to the editing state. Available in the 'batch' editing mode. |
Main article: onEditingStart
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
editorPrepared
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
parentType |
The editor's location. One of 'dataRow', 'filterRow', 'headerRow' or 'searchPanel'. |
|
value | any |
The editor's value. |
setValue(newValue, newText) | any |
A method that you should call to change the cell value and, optionally, the displayed value after the editor's value is changed. |
updateValueTimeout |
Gets and sets the delay between the moment a user stops typing a filter value and the moment it is applied. Available if parentType is 'filterRow' or 'searchPanel'. |
|
width |
The editor's width; equals null for all editors except for those whose parentType equals "searchPanel". |
|
disabled |
Indicates whether the editor is disabled. |
|
rtlEnabled |
Indicates whether the editor uses a right-to-left representation. |
|
editorElement |
The editor's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
readOnly |
Indicates whether the editor is read-only. |
|
dataField |
The name of the field that provides data for the column the editor belongs to. |
|
row |
The properties of the row the editor belongs to. |
Main article: onEditorPrepared
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
editorPreparing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
parentType |
The editor's location. One of 'dataRow', 'filterRow', 'headerRow' or 'searchPanel'. |
|
value | any |
The editor's value. |
setValue(newValue, newText) | any |
A method that you should call to change the cell value and, optionally, the displayed value after the editor's value is changed. |
updateValueTimeout |
Gets and sets the delay between the moment a user stops typing a filter value and the moment it is applied. Available if parentType is 'filterRow' or 'searchPanel'. |
|
width |
The editor's width; equals null for all editors except for those whose parentType equals "searchPanel". |
|
disabled |
Indicates whether the editor is disabled. |
|
rtlEnabled |
Indicates whether the editor uses a right-to-left representation. |
|
cancel |
Allows you to cancel creating the editor. |
|
editorElement |
The editor's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
readOnly |
Indicates whether the editor is read-only. |
|
editorName |
Allows you to change the editor. Accepts names of DevExtreme widgets only, for example, "dxTextBox". |
|
editorOptions |
Gets and sets the editor configuration. |
|
dataField |
The name of the field that provides data for the column the editor belongs to. |
|
row |
The properties of the row the editor belongs to. |
Main article: onEditorPreparing
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
exported
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
Main article: onExported
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
exporting
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
fileName |
The name of the file to which grid data is about to be exported. |
|
cancel |
Allows you to cancel exporting. |
Main article: onExporting
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
fileSaving
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
fileName |
The name of the file to be saved. |
|
format |
The format of this file. Equals 'EXCEL' for an Excel file. |
|
data |
Exported data as a BLOB. |
|
cancel |
Allows you to cancel file saving. |
Instead, you can use the onFileSaving option to handle the event.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
initialized
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
Main article: onInitialized
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
initNewRow
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the inserted row; initially empty. |
Main article: onInitNewRow
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
keyDown
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
handled |
Indicates whether the widget has already handled this event. |
optionChanged
Event
Name | Type | Description |
---|---|---|
name |
The option's short name. |
|
model |
The model data. Available only if you use Knockout. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
fullName |
The option's full name. |
|
value | any |
The option's new value. |
rowClick
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
data |
The row's data. |
|
key | any |
The row's key. |
values |
Values displayed in the row cells. |
|
columns |
All column configurations. |
|
rowIndex |
The row's visible index. For details on indexes, see the Column and Row Indexes topic. |
|
rowType |
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 |
Indicates whether the row is selected. |
|
isExpanded |
Indicates whether or not the group row is expanded. Available if rowType is 'group'. |
|
groupIndex |
The row's group index. Available if rowType is 'group'. |
|
rowElement |
The row's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
handled |
Indicates whether internal widget handlers have already handled the event. |
Instead, you can use the onRowClick option to handle the 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.
In addition, you can perform certain actions when a user clicks a cell. For this purpose, handle the cellClick event. Note that the cellClick fires before the rowClick.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowCollapsed
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
key | any |
The key of the row. |
Main article: onRowCollapsed
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowCollapsing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
key | any |
The key of the row. |
cancel |
Allows you to cancel row collapsing. |
Main article: onRowCollapsing
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowExpanded
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
key | any |
The key of the row. |
Main article: onRowExpanded
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowExpanding
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
key | any |
The key of the group or master row. |
cancel |
Allows you to cancel row expansion. |
Main article: onRowExpanding
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowInserted
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
error |
The standard Error object defining an error that may occur during insertion. |
Main article: onRowInserted
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowInserting
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the to-be-inserted row. |
|
cancel | | |
Allows you to cancel row insertion. |
Main article: onRowInserting
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowPrepared
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
data |
The row's raw data. Unavailable if rowType is "header", "filter" or "totalFooter". |
|
key | any |
The row's key. |
values |
Values displayed in the row cells. |
|
columns |
All column configurations. |
|
rowIndex |
The row's visible index. For details on indexes, see the Column and Row Indexes topic. |
|
rowType |
The row's type. Can have one of the following values: "data", "detail", "detailAdaptive", "group", "groupFooter", "header", "filter" or "totalFooter". |
|
groupIndex |
The row's group index. Available if rowType is 'group'. |
|
isSelected |
Indicates whether the prepared row is selected. Available only if rowType is "data". |
|
isExpanded |
Indicates whether the row is expanded or collapsed. Unavailable if rowType is "header", "filter", or "totalFooter". |
|
rowElement |
The row's container. It is an HTML Element or a jQuery Element when you use jQuery. |
Instead, you can use the onRowPrepared option to handle the 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 prepared row.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowRemoved
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
error |
The standard Error object defining an error that may occur during removal. |
Main article: onRowRemoved
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowRemoving
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The data of the row. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
cancel | | |
Allows you to cancel row removal. |
Main article: onRowRemoving
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowUpdated
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
data |
The updated data of the row; contains only those fields that have been updated. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
error |
The standard Error object defining an error that may occur during updating. |
Main article: onRowUpdated
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowUpdating
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
oldData |
The old data of the row. |
|
newData |
The updated data of the row. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
cancel | | |
Allows you to cancel row updating. |
Main article: onRowUpdating
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
rowValidating
Raised after cells in a row are validated against validation rules.
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
brokenRules |
An array of broken rules. The structure of rule objects is described in the Validation Rules section. |
|
isValid |
Indicates whether data in all cells of the row satisfies the validation rules. |
|
key | any |
The key of the row. If a field providing keys is not specified in the data source, the whole data object is considered the key. |
newData |
The data of the validated row after changes. |
|
oldData |
The data of the validated row before changes. |
|
errorText |
An error message to be displayed. |
Main article: onRowValidating
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
selectionChanged
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
currentSelectedRowKeys | Array<any> |
The keys of the rows that have been selected. |
currentDeselectedRowKeys | Array<any> |
The keys of the rows whose selection has been cleared. |
selectedRowKeys | Array<any> |
The keys of all selected rows. |
selectedRowsData |
The data of all selected rows. |
Main article: onSelectionChanged
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
toolbarPreparing
Event
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
|
toolbarOptions | dxToolbarOptions |
Main article: onToolbarPreparing
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
If you have technical questions, please create a support ticket in the DevExpress Support Center.