JavaScript/jQuery TreeList - rowDragging

Element

jQuery

Default Value: undefined

This property 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.

Type:

Element

jQuery

Default Value: undefined

This property 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").

cursorOffset

Specifies the cursor offset from the dragged row.

Type:

data

A container for custom data.

Type: any

Default Value: undefined

dragComponent

An alias for the dragTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dragDirection

Specifies the directions in which a row can be dragged.

Type:

Default Value: 'both'

Accepted Values: 'both' | 'horizontal' | 'vertical'

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.

Type:

template

Template Data:

Name	Type	Description
itemData	any	The item's data.
itemElement	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.

Name

Type

Description

itemData

any

The item's data.

itemElement

HTMLElement | jQuery

The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.

Default Name: undefined

dropFeedbackMode

Specifies how to highlight the row's drop position.

Type:

Default Value: 'indicate'

Accepted Values: 'push' | 'indicate'

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.

filter

Specifies a CSS selector for draggable rows.

Type:

Default Value: '> *'

group

Allows you to group several UI components so that users can drag and drop rows between them.

Type:

Default Value: undefined

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.

View Demo

handle

Specifies a CSS selector (ID or class) for the element(s) that should act as the drag handle(s).

Type:

Default Value: ''

onAdd

A function that is called when a new row is added.

Type:

Function parameters:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
dropInsideItem	Boolean	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 a dxEvent or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the row's source UI component.
fromData	any	Custom data associated with the source UI component.
fromIndex	Number	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	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the row's target UI component.
toData	any	Custom data associated with the target UI component.
toIndex	Number	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.

Type:

Function parameters:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the gesture.
dropInsideItem	Boolean	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 a dxEvent or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the row's source UI component.
fromData	any	Custom data associated with the source UI component.
fromIndex	Number	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	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the row's target UI component.
toData	any	Custom data associated with the target UI component.
toIndex	Number	The position in which the row is placed. If the row is dragged away from the UI component, the value is -1.

View Demo

onDragEnd

A function that is called when the drag gesture is finished.

Type:

Function parameters:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the gesture.
dropInsideItem	Boolean	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 a dxEvent or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the row's source UI component.
fromData	any	Custom data associated with the source UI component.
fromIndex	Number	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	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the row's target UI component.
toData	any	Custom data associated with the target UI component.
toIndex	Number	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.

Type:

Function parameters:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the gesture.
dropInsideItem	Boolean	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 a dxEvent or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the row's source UI component.
fromData	any	Custom data associated with the source UI component.
fromIndex	Number	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	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the row's target UI component.
toData	any	Custom data associated with the target UI component.
toIndex	Number	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.

Type:

Function parameters:

Information about the event that caused the function's execution.

Object structure:

Name	Type	Description
cancel	Boolean	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 UI component.
fromIndex	Number	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	HTMLElement \| jQuery	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.

Type:

Function parameters:

Information about the event that caused the function's execution.

Object structure:

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	Sortable \| Draggable	The instance of the row's source UI component.
fromData	any	Custom data associated with the source UI component.
fromIndex	Number	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	HTMLElement \| jQuery	The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.
toComponent	Sortable \| Draggable	The instance of the row's target UI component.
toData	any	Custom data associated with the target UI component.
toIndex	Number	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.

Type:

Function parameters: