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:

DragHighlight

Default Value: 'indicate'

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

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
component	grids	The UI component's instance.
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 an EventObject 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

Function parameters:

Object

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

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the gesture.
component	grids	The UI component's instance.
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 an EventObject 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.

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
cancel	Boolean	Allows you to cancel the gesture.
component	grids	The UI component's instance.
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 an EventObject 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

Function parameters:

Object

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

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel the gesture.
component	grids	The UI component's instance.
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 an EventObject 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

Function parameters:

Object

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

Object structure:

Name	Type	Description
cancel	Boolean	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	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

Function parameters:

Object

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

Object structure:

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

Function parameters:

Object

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

Object structure:

Name	Type	Description
component	grids	The UI component's instance.
dropInsideItem	Boolean	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	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.
promise	Promise<void> (jQuery or native)	Assign a Promise to this field to perform an asynchronous operation.
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.

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

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

jQuery/JS Common Types - grids - RowDragging

allowDropInsideItem

allowReordering

autoScroll

boundary

container

data

dragDirection

dragTemplate

dropFeedbackMode

filter

group

handle

onAdd

onDragChange

onDragEnd

onDragMove

onDragStart

onRemove

onReorder

scrollSensitivity

scrollSpeed

showDragIcons