Angular List Events
This section describes events fired by this widget.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
contentReady
Raised when the widget's content is ready.
Event
Information about the 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
Information about the 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
Raised when a group element is rendered.
Event
Information about the 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
Raised only once, after the widget is initialized.
Event
Information about the 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
Raised when a collection item is clicked or tapped.
Event
Information about the 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
Raised when a collection item is right-clicked or pressed.
Event
Information about the 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
Raised after a list item is deleted from the data source.
Event
Information about the 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
Raised before a collection item is deleted from the data source.
Event
Information about the 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
Information about the 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
Raised after a collection item is rendered.
Event
Information about the 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
Raised after a list item is moved to another position.
Event
Information about the 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
Raised when a list item is swiped.
Event
Information about the 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
Raised after a widget option is changed.
Event
Information about the 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
Raised before the next page is loaded.
Event
Information about the 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
Raised when the "pull to refresh" gesture is performed.
Event
Information about the 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
Raised on each scroll gesture.
Event
Information about the 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
Raised when the "Select All" check box value is changed.
Event
Information about the 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
Raised when a collection item is selected or selection is canceled.
Event
Information about the 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.