React List Events
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
disposing
Raised before the widget is disposed of.
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. |
Main article: onDisposing
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
groupRendered
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. |
|
| groupData |
The current group's data. |
|
| groupElement |
The group's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| groupIndex |
The group's index. |
|
| model |
The model data. Available only if Knockout is used. |
Main article: onGroupRendered
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
itemClick
Event
| Name | Type | Description |
|---|---|---|
| model |
The model data. Available only if Knockout is used. |
|
| jQueryEvent |
Use 'event' instead. The jQuery event that caused the function's execution. Deprecated in favor of the event field. |
|
| itemIndex | | |
The clicked item's index. In a grouped list, the index represents an object defining group and item indexes: { group: 0, item: 0 }. |
| itemElement |
The clicked item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemData |
The clicked item's data object. |
|
| event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The widget's instance. |
Main article: onItemClick.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
itemContextMenu
Event
| Name | Type | Description |
|---|---|---|
| model |
The model data. Available only if Knockout is used. |
|
| jQueryEvent |
Use 'event' instead. The jQuery event that caused the function's execution. Deprecated in favor of the event field. |
|
| itemIndex | | |
The target item's index. In a grouped list, the index is specified as an object defining group and item indexes: { group: 0, item: 0 }. |
| itemElement |
The target item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemData |
The target item's data object. |
|
| event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The widget's instance. |
Main article: onItemContextMenu
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
itemDeleted
Event
| Name | Type | Description |
|---|---|---|
| model |
The model data. Available only if Knockout is used. |
|
| itemIndex | | |
The removed item's index. In a grouped list, the index represents an object defining the group and item indexes: { group: 0, item: 0 }. |
| itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemData |
The removed item's data. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The widget's instance. |
Main article: onItemDeleted
See Also
- List - Handle Deletion-Related Events
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
itemDeleting
Event
| Name | Type | Description |
|---|---|---|
| model |
The model data. Available only if you use Knockout. |
|
| itemIndex | | |
The item's index. In a grouped list, the index represents an object defining group and item indexes: { group: 0, item: 0 }. |
| itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemData |
The data of the item to be removed. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The widget's instance. |
|
| cancel | | |
Allows you to cancel the item deletion. |
Main article: onItemDeleting
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
itemHold
Raised when a collection item has been held for a specified period.
Event
| Name | Type | Description |
|---|---|---|
| jQueryEvent |
Use 'event' instead. The jQuery event that caused the function's execution. Deprecated in favor of the event field. |
|
| itemIndex | | |
The index of the item being held. In a grouped list, the index represents an object defining the group and item indexes: { group: 0, item: 0 }. |
| itemElement |
The container of the item being held. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemData |
The data object of the item being held. |
|
| event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The widget's instance. |
|
| model |
The model data. Available only if Knockout is used. |
Main article: onItemHold
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
itemRendered
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. |
|
| itemData |
The current item's data. |
|
| itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemIndex |
The current item's index. |
|
| model |
The model data. Available only if you use Knockout. |
Main article: onItemRendered
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
itemReordered
Event
| Name | Type | Description |
|---|---|---|
| toIndex |
The item's current index. In a grouped list, the index represents an object defining the group and item indexes: { group: 0, item: 0 }. |
|
| model |
The model data. Available only if Knockout is used. |
|
| itemIndex | | |
The item's index after reordering. This field holds the same value as toIndex. |
| itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemData |
The reordered item's data. |
|
| fromIndex |
The item's previous index. In a grouped list, the index represents an object defining the group and item indexes: { group: 0, item: 0 }. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The widget's instance. |
Main article: onItemReordered
See Also
- List - Handle Reordering-Related Events
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
itemSwipe
Event
| Name | Type | Description |
|---|---|---|
| component |
The widget's instance. |
|
| direction |
The direction in which the item is swiped. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
| itemData |
The swiped item's data. |
|
| itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| itemIndex | | |
The item's index. In a grouped list, the index represents an object defining the group and item indexes: { group: 0, item: 0 }. |
| jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
| model |
The model data. Available only if Knockout is used. |
Main article: onItemSwipe
See Also
- List - Touch-Screen Gestures
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
optionChanged
Event
| Name | Type | Description |
|---|---|---|
| model |
The model data. Available only if you use Knockout. |
|
| fullName |
The path to the modified option that includes all parent options. |
|
| element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
| component |
The widget's instance. |
|
| name |
The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into. |
|
| value | any |
The modified option's new value. |
Main article: onOptionChanged
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
pageLoading
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: onPageLoading
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
pullRefresh
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: onPullRefresh
See Also
- List - Touch-Screen Gestures
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
scroll
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. |
|
| event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
| jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
| model |
The model data. Available only if Knockout is used. |
|
| reachedBottom |
Indicates whether the container's bottom boundary is reached. |
|
| reachedLeft |
Indicates whether the container's left boundary is reached. |
|
| reachedRight |
Indicates whether the container's right boundary is reached. |
|
| reachedTop |
Indicates whether the container's top boundary is reached. |
|
| scrollOffset |
The current scroll offset in the following format { top: topOffset, left: leftOffset }. |
Main article: onScroll
See Also
- List - Handle Scrolling-Related Events
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
selectAllValueChanged
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. |
|
| value |
The "Select All" check box's state. |
Main article: onSelectAllValueChanged
See Also
- List - Handle Selection-Related Events
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
selectionChanged
Event
| Name | Type | Description |
|---|---|---|
| addedItems | Array<any> |
The data of the items that have been selected. |
| 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. |
|
| removedItems | Array<any> |
The data of the items whose selection has been canceled. |
Main article: onSelectionChanged
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.