Angular TreeList - rowDragging

Configures row reordering using drag and drop gestures.

Type: ui/tree_list:RowDragging

Set allowReordering to true to allow users to reorder rows. Implement onReorder to apply the new order to the data source.

Assign the same group value to the components to allow drag and drop between them. Implement onAdd and onRemove to update their data sources.

Enable allowDropInsideItem to allow drops inside rows. Use dropInsideItem in the drop handler to determine whether to update the row's parent.

View Demo

allowDropInsideItem

Allows users to drop a row inside another row.

Type:

Boolean

Default Value: false

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

See Also

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
See Also

boundary

Specifies a DOM element that limits the dragging area.

Type:

String

|

HTMLElement | jQuery

| undefined
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

| undefined
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 | undefined
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 the component displays the drop position of dragged rows.

Type:

DragHighlight

Default Value: 'indicate'

This property accepts the following values:

  • "indicate"
    The component displays the drop position as a highlighted line between rows.

  • "push"
    TreeList shifts rows and displays the drop position as empty space between rows. To integrate this mode, ensure that allowDropInsideItem is disabled.

View Demo

filter Deprecated

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

| undefined
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:
e:

RowDraggingAddEvent

Information about the event.

Object structure:
Name Type Description
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 row's source UI component 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.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element 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.
toIndex

Number

The position where the row is placed. If the row is dragged away from the UI component, the value is -1. When virtual scrolling is enabled, the index is relative to the top visible row.

Set group to the same value in the source and target components to allow users to drag rows between them. Implement this handler to add the dragged row's data to the target data source. Use onRemove in the source component to remove the original row.

Use e.itemData to access the dragged row's data and e.toIndex to determine its target position.

Enable allowDropInsideItem to allow drops inside rows. Use e.dropInsideItem in the drop handler to determine whether to update the row's parent.

onDragChange

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

Type:

Function

Function parameters:
e:

RowDraggingChangeEvent

Information about the event.

Object structure:
Name Type Description
toData any

Custom data associated with the target UI component. Available only for drag-and-drop operations between components.
toComponent Sortable | Draggable

The instance of the row's target UI component. Available only for drag-and-drop operations 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 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. Available only for drag-and-drop operations between components.
fromComponent Sortable | Draggable

The row's source UI component instance. Available only for drag-and-drop operations 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.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element 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

Set this field to true to cancel the drag gesture.
toIndex

Number

The position where the row is placed. If the row is dragged away from the UI component, the value is -1.

Use this handler to check whether the dragged row can occupy the target position indicated by e.toIndex. Set e.cancel to true to cancel the gesture.

For example, check the target row's ancestors to prevent a row from becoming a child of itself.

View Demo

onDragEnd

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

Type:

Function

Function parameters:
e:

RowDraggingEndEvent

Information about the event.

Object structure:
Name Type Description
toData any

Custom data associated with the target UI component. Available only for drag-and-drop operations between components.
toComponent Sortable | Draggable

The instance of the row's target UI component. Available only for drag-and-drop operations 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 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. Available only for drag-and-drop operations between components.
fromComponent Sortable | Draggable

The row's source UI component instance. Available only for drag-and-drop operations 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.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element 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

Set this field to true to cancel the drag gesture.
toIndex

Number

The position where the row is placed. If the row is dragged away from the UI component, the value is -1.

Check the result of a drag gesture in this handler. Set e.cancel to true to cancel the gesture. To update the data source after a drop, implement onReorder for row reordering or use onAdd and onRemove for transfers between components.

onDragMove

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

Type:

Function

Function parameters:
e:

RowDraggingMoveEvent

Information about the event.

Object structure:
Name Type Description
toData any

Custom data associated with the target UI component. Available only for drag-and-drop operations between components.
toComponent Sortable | Draggable

The instance of the row's target UI component. Available only for drag-and-drop operations 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 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. Available only for drag-and-drop operations between components.
fromComponent Sortable | Draggable

The row's source UI component instance. Available only for drag-and-drop operations 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.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element 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

Set this field to true to cancel the drag gesture.
toIndex

Number

The position where the row is placed. If the row is dragged away from the UI component, the value is -1.

Use this handler to respond as the user moves a row during a drag gesture. Set e.cancel to true to cancel the gesture. To handle changes to the target row position, use onDragChange.

onDragStart

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

Type:

Function

Function parameters:
e:

RowDraggingStartEvent

Information about the event.

Object structure:
Name Type Description
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. Available only for drag-and-drop operations 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.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component

TreeList

The UI component's instance.
cancel

Boolean

Set this field to true to cancel the drag gesture.
itemElement

HTMLElement | jQuery

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

Use this handler to check whether users can drag a row. Set e.cancel to true to prevent drag operations. Use e.itemData to check the row's data.

onRemove

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

Type:

Function

Function parameters:
e:

RowDraggingRemoveEvent

Information about the event.

Object structure:
Name Type Description
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 row's source UI component 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.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component

TreeList

The UI component's instance.
toIndex

Number

The position where the row is placed. If the row is dragged away from the UI component, the value is -1.

Implement this handler to remove the dragged row from the source data source. Use onAdd in the target component to insert the row into its data source. Both handlers execute when a user drops a row between components with the same group value.

Use e.itemData to identify the row to remove.

onReorder

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

Type:

Function

Function parameters:
e:

RowDraggingReorderEvent

Information about the event.

Object structure:
Name Type Description
toData any

Custom data associated with the target UI component.
toComponent Sortable | Draggable

The instance of the row's target UI component.
promise

PromiseLike object (jQuery, native, etc)

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 (when paging is enabled, the row's original position in the active page). If the row is dragged from another UI component, this value is -1.
fromData any

Custom data associated with the source UI component.
fromComponent Sortable | Draggable

The row's source UI component 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.
element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
dropInsideItem

Boolean

Indicates if the dragged row is dropped inside another row.
component

TreeList

The UI component's instance.
toIndex

Number

The row's dropped position (when paging is enabled, the row's dropped position in the active page). If the row is dragged into another UI component, this value is -1.

Implement this handler to update the data source after a user reorders rows. The allowReordering property enables reordering in the UI but does not update the data source. Use e.itemData, e.fromIndex, and e.toIndex to identify the row and its new position.

Assign a Promise to e.promise if the data update is asynchronous.

Enable allowDropInsideItem to allow drops inside rows. Use e.dropInsideItem in the drop handler to determine whether to update the row's parent.

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
See Also

scrollSpeed

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

Type:

Number

Default Value: 30
See Also

showDragIcons

Shows or hides row dragging icons.

Type:

Boolean

Default Value: true

View Demo