React TreeList - rowDragging
allowReordering
This property 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.
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
Name | Type | Description |
---|---|---|
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData | any |
The item's data. |
dropFeedbackMode
This property 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.
group
Set this property to identical values for the UI components 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.
onAdd
Name | Type | Description |
---|---|---|
toIndex |
The position in which the row is placed. If the row is dragged away from the UI component, the value is -1. |
|
toData | any |
Custom data associated with the target UI component. |
toComponent | | |
The instance of the row's target UI component. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData | any |
The data object of the row being dragged. |
fromIndex |
The row's original position. If the row is dragged from another UI component, the value is -1. |
|
fromData | any |
Custom data associated with the source UI component. |
fromComponent | | |
The instance of the row's source UI component. |
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. |
|
component |
The UI component's instance. |
onDragChange
Name | Type | Description |
---|---|---|
toIndex |
The position in which the row is placed. If the row is dragged away from the UI component, the value is -1. |
|
toData | any |
Custom data associated with the target UI component. Works only for element drag and drop between components. |
toComponent | | |
The instance of the row's target UI component. Works only for element drag and drop between components. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData | any |
The row's data before the drag operation. |
fromIndex |
The row's original position. If the row is dragged from another UI component, the value is -1. |
|
fromData | any |
Custom data associated with the source UI component. Works only for element drag and drop between components. |
fromComponent | | |
The instance of the row's source UI component. Works only for element drag and drop between components. |
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. |
|
component |
The UI component's instance. |
|
cancel |
Allows you to cancel the gesture. |
onDragEnd
Name | Type | Description |
---|---|---|
toIndex |
The position in which a row is placed. If the row is dragged away from the UI component, the value is -1. |
|
toData | any |
Custom data associated with the target UI component. Works only for element drag and drop between components. |
toComponent | | |
The instance of the row's target UI component. Works only for element drag and drop between components. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData | any |
The row's data before the drag operation. |
fromIndex |
The row's original position. If the row is dragged from another UI component, the value is -1. |
|
fromData | any |
Custom data associated with the source UI component. Works only for element drag and drop between components. |
fromComponent | | |
The instance of the row's source UI component. Works only for element drag and drop between components. |
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. |
|
component |
The UI component's instance. |
|
cancel |
Allows you to cancel the gesture. |
onDragMove
Name | Type | Description |
---|---|---|
toIndex |
The position in which the row is placed. If the row is dragged away from the UI component, the value is -1. |
|
toData | any |
Custom data associated with the target UI component. Works only for element drag and drop between components. |
toComponent | | |
The instance of the row's target UI component. Works only for element drag and drop between components. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData | any |
The row's data before the drag operation. |
fromIndex |
The row's original position. If the row is dragged from another UI component, the value is -1. |
|
fromData | any |
Custom data associated with the source UI component. Works only for element drag and drop between components. |
fromComponent | | |
The instance of the row's source UI component. Works only for element drag and drop between components. |
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. |
|
component |
The UI component's instance. |
|
cancel |
Allows you to cancel the gesture. |
onDragStart
Name | Type | Description |
---|---|---|
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData | any |
The row's data before the drag operation. |
fromIndex |
The row's original position. If the row is dragged from another UI component, the value is -1. |
|
fromData | any |
Custom data associated with the source UI component. Works only for element drag and drop between components. |
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
component |
The UI component's instance. |
|
cancel |
Allows you to cancel the gesture. |
onRemove
Name | Type | Description |
---|---|---|
toIndex |
The position in which a row is placed. If the row is dragged away from the UI component, the value is -1. |
|
toData | any |
Custom data associated with the target UI component. |
toComponent | | |
The instance of the row's target UI component. |
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData | any |
The data object of the row being dragged. |
fromIndex |
The row's original position. If the row is dragged from another UI component, the value is -1. |
|
fromData | any |
Custom data associated with the source UI component. |
fromComponent | | |
The instance of the row's source UI component. |
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
component |
The UI component's instance. |
onReorder
Name | Type | Description |
---|---|---|
toIndex |
The position in which a row is placed. If the row is dragged away from the UI component, the value is -1. |
|
toData | any |
Custom data associated with the target UI component. |
toComponent | | |
The instance of the row's target UI component. |
promise |
Assign a Promise to this field to perform an asynchronous operation. |
|
itemElement |
The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData | any |
The data object of the row being dragged. |
fromIndex |
The row's original position. If the row is dragged from another UI component, the value is -1. |
|
fromData | any |
Custom data associated with the source UI component. |
fromComponent | | |
The instance of the row's source UI component. |
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. |
|
component |
The UI component's instance. |
scrollSensitivity
Specifies the distance in pixels from the edge of viewport at which scrolling should start. Applies only if autoScroll is true.
scrollSpeed
Specifies the scrolling speed when dragging a row beyond the viewport. Applies only if autoScroll is true.
If you have technical questions, please create a support ticket in the DevExpress Support Center.