React Common Types - grids - RowDragging
Configures row reordering using drag and drop gestures.
autoScroll
Enables automatic scrolling while dragging a row beyond the viewport.
container
Specifies a custom container in which the draggable row should be rendered.
dragTemplate
Specifies custom markup to be shown instead of the item being dragged.
Information about 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. |
A container in which the template should be rendered.
dropFeedbackMode
Specifies how to highlight the row's drop position.
group
Allows you to group several UI components so that users can drag and drop rows between them.
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 |
---|---|---|
component | grids |
The UI component's instance. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList 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. |
fromComponent | | |
The instance of the row's source UI component. |
fromData | any |
Custom data associated with the source UI component. |
fromIndex |
The row's original position. If the row is dragged from another UI component, 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 UI component. |
toData | any |
Custom data associated with the target UI component. |
toIndex |
The position in which the row is placed. If the row is dragged away from the UI component, 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. |
|
component | grids |
The UI component's instance. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList 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. |
fromComponent | | |
The instance of the row's source UI component. |
fromData | any |
Custom data associated with the source UI component. |
fromIndex |
The row's original position. If the row is dragged from another UI component, 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 UI component. |
toData | any |
Custom data associated with the target UI component. |
toIndex |
The position in which the row is placed. If the row is dragged away from the UI component, 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. |
|
component | grids |
The UI component's instance. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList 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. |
fromComponent | | |
The instance of the row's source UI component. |
fromData | any |
Custom data associated with the source UI component. |
fromIndex |
The row's original position. If the row is dragged from another UI component, 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 UI component. |
toData | any |
Custom data associated with the target UI component. |
toIndex |
The position in which a row is placed. If the row is dragged away from the UI component, 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. |
|
component | grids |
The UI component's instance. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. Available only for the TreeList 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. |
fromComponent | | |
The instance of the row's source UI component. |
fromData | any |
Custom data associated with the source UI component. |
fromIndex |
The row's original position. If the row is dragged from another UI component, 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 UI component. |
toData | any |
Custom data associated with the target UI component. |
toIndex |
The position in which the row is placed. If the row is dragged away from the UI component, 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. |
|
component | grids |
The UI component's instance. |
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. |
fromData | any |
Custom data associated with the source UI component. |
fromIndex |
The row's original position. If the row is dragged from another UI component, 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 |
---|---|---|
component | grids |
The UI component's instance. |
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. |
fromComponent | | |
The instance of the row's source UI component. |
fromData | any |
Custom data associated with the source UI component. |
fromIndex |
The row's original position. If the row is dragged from another UI component, 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 UI component. |
toData | any |
Custom data associated with the target UI component. |
toIndex |
The position in which a row is placed. If the row is dragged away from the UI component, 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 |
---|---|---|
component | grids |
The UI component's instance. |
dropInsideItem |
Indicates if the dragged row is dropped inside another row. |
|
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. |
fromComponent | | |
The instance of the row's source UI component. |
fromData | any |
Custom data associated with the source UI component. |
fromIndex |
The row's original position. If the row is dragged from another UI component, 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 UI component. |
toData | any |
Custom data associated with the target UI component. |
toIndex |
The position in which a row is placed. If the row is dragged away from the UI component, 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.
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.