This property also requires that you handle the change of hierarchy in code. If a row is dragged within a single component, use the onReorder handler. If the row is dragged from one component to another, use the onAdd and onRemove handlers.

View Demo

allowReordering

Allows row reordering using drag and drop gestures.

Type:

Boolean

Default Value: false

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.

View Demo

autoScroll

Enables automatic scrolling while dragging a row beyond the viewport.

Type:

Boolean

Default Value: true

boundary

Specifies a DOM element that limits the dragging area.

Type:

String

HTMLElement | 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:

String

HTMLElement | 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:

String

Object

data

A container for custom data.

Type: any

Default Value: undefined

View Demo

dragDirection

Specifies the directions in which a row can be dragged.

Type:

DragDirection

Default Value: 'both'

dragTemplate

Specifies custom markup to be shown instead of the item being dragged.

Type:

template

Template Data:

Name

Type

Description

itemElement

HTMLElement | jQuery

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.

Default Name: undefined

dropFeedbackMode

Specifies how to highlight the row's drop position.

Type:

DragHighlight

Default Value: '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.

View Demo

filter

Specifies a CSS selector for draggable rows.

Type:

String

Default Value: '> *'

group

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

Type:

String

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:

String

Default Value: ''

onAdd

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

Type:

Function

Function parameters:

Object

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

Object structure:

Name	Type	Description
toIndex	Number	The position in which the row is placed. If the row is dragged away from the UI component, the value is -1. If virtual scrolling is enabled, the toIndex parameter starts from the top visible row.
toData	any	Custom data associated with the target UI component.
toComponent	Sortable \| Draggable	The instance of the row's target UI component.
itemElement	HTMLElement \| jQuery	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	Number	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	Sortable \| Draggable	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	Boolean	Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component.
component	TreeList	The UI component's instance.

View Demo

Use a row key to identify the target row. Call the getKeyByRowIndex method to obtain the key:

const onAdd = (e) => {
    console.log(e.toComponent.getKeyByRowIndex(e.toIndex - 1));
    // ...
}

onDragChange

A function that is called when the dragged row's position is changed.

Type:

Function

Function parameters:

Object

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

Object structure:

Name	Type	Description
toIndex	Number	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	Sortable \| Draggable	The instance of the row's target UI component. Works only for element drag and drop between components.
itemElement	HTMLElement \| jQuery	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	Number	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	Sortable \| Draggable	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	Boolean	Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component.
component	TreeList	The UI component's instance.
cancel	Boolean	Allows you to cancel the gesture.

View Demo

onDragEnd

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

Type:

Function

Function parameters:

Object

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

Object structure:

Name	Type	Description
toIndex	Number	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	Sortable \| Draggable	The instance of the row's target UI component. Works only for element drag and drop between components.
itemElement	HTMLElement \| jQuery	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	Number	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	Sortable \| Draggable	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	Boolean	Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component.
component	TreeList	The UI component's instance.
cancel	Boolean	Allows you to cancel the gesture.

onDragMove

A function that is called every time a draggable row is moved.

Type:

Function

Function parameters:

Object

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

Object structure:

Name	Type	Description
toIndex	Number	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	Sortable \| Draggable	The instance of the row's target UI component. Works only for element drag and drop between components.
itemElement	HTMLElement \| jQuery	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	Number	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	Sortable \| Draggable	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	Boolean	Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component.
component	TreeList	The UI component's instance.
cancel	Boolean	Allows you to cancel the gesture.

onDragStart

A function that is called when a drag gesture is initialized.

Type:

Function

Function parameters:

Object

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

Object structure:

Name	Type	Description
itemElement	HTMLElement \| jQuery	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	Number	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	TreeList	The UI component's instance.
cancel	Boolean	Allows you to cancel the gesture.

onRemove

A function that is called when a draggable row is removed.

Type:

Function

Function parameters:

Object

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

Object structure:

Name	Type	Description
toIndex	Number	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	Sortable \| Draggable	The instance of the row's target UI component.
itemElement	HTMLElement \| jQuery	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	Number	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	Sortable \| Draggable	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	TreeList	The UI component's instance.

onReorder

A function that is called when the draggable rows are reordered.

Type:

Function

Function parameters:

Object

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

Object structure:

Name	Type	Description
toIndex	Number	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	Sortable \| Draggable	The instance of the row's target UI component.
promise	Promise<void> (jQuery or native)	Assign a Promise to this field to perform an asynchronous operation.
itemElement	HTMLElement \| jQuery	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	Number	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	Sortable \| Draggable	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	Boolean	Indicates if the dragged row is dropped inside another row.
component	TreeList	The UI component's instance.

View Demo

scrollSensitivity

Specifies the distance in pixels from the edge of viewport at which scrolling should start. Applies only if autoScroll is true.

Type:

Number

Default Value: 60

scrollSpeed

Specifies the scrolling speed when dragging a row beyond the viewport. Applies only if autoScroll is true.

Type:

Number

Default Value: 30

showDragIcons

Shows or hides row dragging icons.

Type:

Boolean

Default Value: true

View Demo

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery TreeList - rowDragging

allowDropInsideItem

See Also

allowReordering

autoScroll

See Also

boundary

container

cursorOffset

data

dragDirection

dragTemplate

dropFeedbackMode

filter

group

handle

onAdd

onDragChange

onDragEnd

onDragMove

onDragStart

onRemove

onReorder

scrollSensitivity

See Also

scrollSpeed

See Also

showDragIcons