Angular TreeList - rowDragging
Configures row reordering using drag and drop gestures.
allowDropInsideItem
Allows users to drop a row inside another row.
allowReordering
Allows row reordering using drag and drop gestures.
This option limits row reordering to the UI and does not affect the data source. You should also handle the effects of the drag and drop to the data source in code. If users reorder rows inside a single component, implement the onReorder handler.
For information on drag and drop between components, refer to the group topic.
autoScroll
Enables automatic scrolling while dragging a row beyond the viewport.
See Also
boundary
Specifies a DOM element that limits the dragging area.
This option accepts the following value types:
- String
A CSS selector. For example:"#elementId"
. - DOM Node
An HTML DOM element. For example:document.getElementById("elementId")
. - jQuery
A CSS selector wrapped in a jQuery element. For example:$("#elementId")
.
container
Specifies a custom container in which the draggable row should be rendered.
This option accepts the following value types:
- String
A CSS selector. For example:"#elementId"
. - DOM Node
An HTML DOM element. For example:document.getElementById("elementId")
. - jQuery
A CSS selector wrapped in a jQuery element. For example:$("#elementId")
.
dragComponent
An alias for the dragTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
dragRender
An alias for the dragTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
dragTemplate
Specifies custom markup to be shown instead of the item being dragged.
Name | Type | Description |
---|---|---|
itemData | any |
The item's data. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
dropFeedbackMode
Specifies how to highlight the row's drop position.
This option accepts the following values:
"indicate"
Rows do not animate, a blue square appears at the place where the dragged row is going to be placed."push"
Rows move apart with animation, allowing room for the dragged row to be placed. To use this mode, ensure that allowDropInsideItem is disabled and the scrolling.mode differs from "virtual".
group
Allows you to group several widgets so that users can drag and drop rows between them.
Set this option to identical values for the widgets you want to collect into a single group. This allows users to drag and drop rows between components, but only in the UI. To handle drag and drop in code, implement the onAdd and onRemove handlers. Both these handlers are executed simultaneously when a row is dropped to the target component, but onAdd is executed in the target component, while onRemove is executed in the source component.
handle
Specifies a CSS selector (ID or class) for the element(s) that should act as the drag handle(s).
onAdd
A function that is called when a new row is added.
Information about the event that caused the function's execution.
Name | Type | Description |
---|---|---|
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList widget. |
|
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. |
fromComponent | | |
The instance of the row's source widget. |
fromData | any |
Custom data associated with the source widget. |
fromIndex |
The row's original position. If the row is dragged from another widget, the value is -1. |
|
itemData | any |
The data object of the row being dragged. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
toComponent | | |
The instance of the row's target widget. |
toData | any |
Custom data associated with the target widget. |
toIndex |
The position in which the row is placed. If the row is dragged away from the widget, the value is -1. |
onDragChange
A function that is called when the dragged row's position is changed.
Information about the event that caused the function's execution.
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the gesture. |
|
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList widget. |
|
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. |
fromComponent | | |
The instance of the row's source widget. |
fromData | any |
Custom data associated with the source widget. |
fromIndex |
The row's original position. If the row is dragged from another widget, the value is -1. |
|
itemData | any |
The dragged row's data. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
toComponent | | |
The instance of the row's target widget. |
toData | any |
Custom data associated with the target widget. |
toIndex |
The position in which the row is placed. If the row is dragged away from the widget, the value is -1. |
onDragEnd
A function that is called when the drag gesture is finished.
Information about the event that caused the function's execution.
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the gesture. |
|
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList widget. |
|
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. |
fromComponent | | |
The instance of the row's source widget. |
fromData | any |
Custom data associated with the source widget. |
fromIndex |
The row's original position. If the row is dragged from another widget, the value is -1. |
|
itemData | any |
The data object of the row being dragged. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
toComponent | | |
The instance of the row's target widget. |
toData | any |
Custom data associated with the target widget. |
toIndex |
The position in which a row is placed. If the row is dragged away from the widget, the value is -1. |
onDragMove
A function that is called every time a draggable row is moved.
Information about the event that caused the function's execution.
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the gesture. |
|
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList widget. |
|
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. |
fromComponent | | |
The instance of the row's source widget. |
fromData | any |
Custom data associated with the source widget. |
fromIndex |
The row's original position. If the row is dragged from another widget, the value is -1. |
|
itemData | any |
The data object of the row being dragged. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
toComponent | | |
The instance of the row's target widget. |
toData | any |
Custom data associated with the target widget. |
toIndex |
The position in which the row is placed. If the row is dragged away from the widget, the value is -1. |
onDragStart
A function that is called when the drag gesture is initialized.
Information about the event that caused the function's execution.
Name | Type | Description |
---|---|---|
cancel |
Allows you to cancel the gesture. |
|
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. |
fromData | any |
Custom data associated with the source widget. |
fromIndex |
The row's original position. If the row is dragged from another widget, the value is -1. |
|
itemData | any |
The data object of the row being dragged. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
onRemove
A function that is called when a draggable row is removed.
Information about the event that caused the function's execution.
Name | Type | Description |
---|---|---|
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. |
fromComponent | | |
The instance of the row's source widget. |
fromData | any |
Custom data associated with the source widget. |
fromIndex |
The row's original position. If the row is dragged from another widget, the value is -1. |
|
itemData | any |
The data object of the row being dragged. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
toComponent | | |
The instance of the row's target widget. |
toData | any |
Custom data associated with the target widget. |
toIndex |
The position in which a row is placed. If the row is dragged away from the widget, the value is -1. |
onReorder
A function that is called when the draggable rows are reordered.
Information about the event that caused the function's execution.
Name | Type | Description |
---|---|---|
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList widget. |
|
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. |
fromComponent | | |
The instance of the row's source widget. |
fromData | any |
Custom data associated with the source widget. |
fromIndex |
The row's original position. If the row is dragged from another widget, the value is -1. |
|
itemData | any |
The data object of the row being dragged. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
promise |
Assign a Promise to this field to perform an asynchronous operation. |
|
toComponent | | |
The instance of the row's target widget. |
toData | any |
Custom data associated with the target widget. |
toIndex |
The position in which a row is placed. If the row is dragged away from the widget, the value is -1. |
scrollSensitivity
Specifies the distance in pixels from the edge of viewport at which scrolling should start. Applies only if autoScroll is true.
See Also
scrollSpeed
Specifies the scrolling speed when dragging a row beyond the viewport. Applies only if autoScroll is true.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.