rowDragging

Configures row reordering using drag and drop gestures.

Type:

Object

allowDropInsideItem

Allows dropping a row inside another row.

Type:

Boolean

Default Value: false

allowReordering

Allows row reordering using drag and drop gestures.

Type:

Boolean

Default Value: false

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

|

DOM Node

|

jQuery

Default Value: undefined

This option 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

|

DOM Node

|

jQuery

Default Value: undefined

This option 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

dragDirection

Specifies the directions in which a row can be dragged.

Type:

String

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

dragTemplate

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

Type:

template

Function parameters:
dragInfo:

Object

Information about the item being dragged.

Object structure:
Name Type Description
itemData any

The item's data.

itemElement

Element (jQuery or HTML)

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

containerElement:

Element (jQuery or HTML)

A container in which the template should be rendered.

Return Value:

String

|

DOM Node

|

jQuery

One of the following:

  • HTML markup as a string
  • A DOM node
  • A DOM node wrapped in a jQuery element
Default Value: undefined

dropFeedbackMode

Specifies how to highlight the row's drop position.

Type:

String

Default Value: 'indicate'
Accepted Values: 'push' | 'indicate'

This option accepts the following values:

  • "push"
    Rows move apart with animation, making free space for the dragged row to be placed.

  • "indicate"
    Rows do not animate, a blue square appears at the place where the dragged row is going to be placed.

filter

Specifies a CSS selector for draggable rows.

Type:

String

Default Value: '> *'

group

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

Type:

String

Default Value: undefined

Set this option to identical values for the widgets you want to collect in a single group.

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:

Object

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 widget.

event

Event (jQuery or dxEvent)

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 widget.

fromData any

Custom data associated with the source widget.

fromIndex

Number

The row's original position. If the row is dragged from another widget, the value is -1.

itemData any

The data object of the row being dragged.

itemElement

Element (jQuery or HTML)

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 widget.

toData any

Custom data associated with the target widget.

toIndex

Number

The position in which the row is placed. If the row is dragged away from the widget, the value is -1.

onDragChange

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

Type:

Function

Function parameters:
e:

Object

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 widget.

event

Event (jQuery or dxEvent)

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 widget.

fromData any

Custom data associated with the source widget.

fromIndex

Number

The row's original position. If the row is dragged from another widget, the value is -1.

itemData any

The dragged row's data.

itemElement

Element (jQuery or HTML)

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 widget.

toData any

Custom data associated with the target widget.

toIndex

Number

The position in which the row is placed. If the row is dragged away from the widget, the value is -1.

onDragEnd

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

Type:

Function

Function parameters:
e:

Object

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 widget.

event

Event (jQuery or dxEvent)

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 widget.

fromData any

Custom data associated with the source widget.

fromIndex

Number

The row's original position. If the row is dragged from another widget, the value is -1.

itemData any

The data object of the row being dragged.

itemElement

Element (jQuery or HTML)

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 widget.

toData any

Custom data associated with the target widget.

toIndex

Number

The position in which a row is placed. If the row is dragged away from the widget, the value is -1.

onDragMove

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

Type:

Function

Function parameters:
e:

Object

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 widget.

event

Event (jQuery or dxEvent)

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 widget.

fromData any

Custom data associated with the source widget.

fromIndex

Number

The row's original position. If the row is dragged from another widget, the value is -1.

itemData any

The data object of the row being dragged.

itemElement

Element (jQuery or HTML)

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 widget.

toData any

Custom data associated with the target widget.

toIndex

Number

The position in which the row is placed. If the row is dragged away from the widget, the value is -1.

onDragStart

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

Type:

Function

Function parameters:
e:

Object

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 dxEvent)

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 widget.

fromIndex

Number

The row's original position. If the row is dragged from another widget, the value is -1.

itemData any

The data object of the row being dragged.

itemElement

Element (jQuery or HTML)

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

Function parameters:
e:

Object

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

Object structure:
Name Type Description
event

Event (jQuery or dxEvent)

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 widget.

fromData any

Custom data associated with the source widget.

fromIndex

Number

The row's original position. If the row is dragged from another widget, the value is -1.

itemData any

The data object of the row being dragged.

itemElement

Element (jQuery or HTML)

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 widget.

toData any

Custom data associated with the target widget.

toIndex

Number

The position in which a row is placed. If the row is dragged away from the widget, the value is -1.

onReorder

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

Type:

Function

Function parameters:
e:

Object

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 widget.

event

Event (jQuery or dxEvent)

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 widget.

fromData any

Custom data associated with the source widget.

fromIndex

Number

The row's original position. If the row is dragged from another widget, the value is -1.

itemData any

The data object of the row being dragged.

itemElement

Element (jQuery or HTML)

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 widget.

toData any

Custom data associated with the target widget.

toIndex

Number

The position in which a row is placed. If the row is dragged away from the widget, 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.

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