jQuery/JS 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.
| 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.
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.