Skip to content

DataGrid/TreeList: describe rowDragging options and types (#9195) #9199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vladaskorohodova merged 1 commit into from
Sep 25, 2026
+326 −278
Merged

DataGrid/TreeList: describe rowDragging options and types (#9195) #9199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onAdd.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,48 @@ type: function(e)
---
---
##### shortDescription
<!-- Description goes here -->
A function that is called when a new row is added.

##### param(e): ui/data_grid:RowDraggingAddEvent
<!-- Description goes here -->
Information about the event.

##### field(e.component): {WidgetName}
<!-- Description goes here -->
The UI component's instance.

##### field(e.dropInsideItem): Boolean
<!-- Description goes here -->
Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component.

##### field(e.element): DxElement
<!-- Description goes here -->
#include common-ref-elementparam with { element: "UI component" }

##### field(e.event): event
<!-- Description goes here -->
#include common-ref-eventparam

##### field(e.fromComponent): Sortable | Draggable
<!-- Description goes here -->
The row's source UI component instance.

##### field(e.fromData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component.

##### field(e.fromIndex): Number
<!-- Description goes here -->
The row's original position. If the row is dragged from another UI component, the value is **-1**.

##### field(e.itemData): any
<!-- Description goes here -->
The data object of the row being dragged.

##### field(e.itemElement): DxElement
<!-- Description goes here -->
#include draganddrop-ref-itemelementparam

##### field(e.toComponent): Sortable | Draggable
<!-- Description goes here -->
The instance of the row's target UI component.

##### field(e.toData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the target UI component.

##### field(e.toIndex): Number
<!-- Description goes here -->
The position where the row is placed. If the row is dragged away from the UI component, the value is -1. When [virtual scrolling](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) is enabled, the index is relative to the top visible row.

---
<!-- Description goes here -->
Set [group](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#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](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#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.
32 changes: 16 additions & 16 deletions ...ference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragChange.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,49 @@ type: function(e)
---
---
##### shortDescription
<!-- Description goes here -->
A function that is called when the dragged row's position is changed.

##### param(e): ui/data_grid:RowDraggingChangeEvent
<!-- Description goes here -->
Information about the event.

##### field(e.cancel): Boolean
<!-- Description goes here -->
Set this field to **true** to cancel the drag gesture.

##### field(e.component): {WidgetName}
<!-- Description goes here -->
The UI component's instance.

##### field(e.dropInsideItem): Boolean
<!-- Description goes here -->
Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component.

##### field(e.element): DxElement
<!-- Description goes here -->
#include common-ref-elementparam with { element: "UI component" }

##### field(e.event): event
<!-- Description goes here -->
#include common-ref-eventparam

##### field(e.fromComponent): Sortable | Draggable
<!-- Description goes here -->
The row's source UI component instance. Available only for drag-and-drop operations between components.

##### field(e.fromData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component. Available only for drag-and-drop operations between components.

##### field(e.fromIndex): Number
<!-- Description goes here -->
The row's original position. If the row is dragged from another UI component, the value is **-1**.

##### field(e.itemData): any
<!-- Description goes here -->
The data object of the row being dragged.

##### field(e.itemElement): DxElement
<!-- Description goes here -->
#include draganddrop-ref-itemelementparam

##### field(e.toComponent): Sortable | Draggable
<!-- Description goes here -->
The instance of the row's target UI component. Available only for drag-and-drop operations between components.

##### field(e.toData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the target UI component. Available only for drag-and-drop operations between components.

##### field(e.toIndex): Number
<!-- Description goes here -->
The position where the row is placed. If the row is dragged away from the UI component, the value is -1.

---
<!-- Description goes here -->
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.
32 changes: 16 additions & 16 deletions api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragEnd.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,49 @@ type: function(e)
---
---
##### shortDescription
<!-- Description goes here -->
A function that is called when the drag gesture is finished.

##### param(e): ui/data_grid:RowDraggingEndEvent
<!-- Description goes here -->
Information about the event.

##### field(e.cancel): Boolean
<!-- Description goes here -->
Set this field to **true** to cancel the drag gesture.

##### field(e.component): {WidgetName}
<!-- Description goes here -->
The UI component's instance.

##### field(e.dropInsideItem): Boolean
<!-- Description goes here -->
Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component.

##### field(e.element): DxElement
<!-- Description goes here -->
#include common-ref-elementparam with { element: "UI component" }

##### field(e.event): event
<!-- Description goes here -->
#include common-ref-eventparam

##### field(e.fromComponent): Sortable | Draggable
<!-- Description goes here -->
The row's source UI component instance. Available only for drag-and-drop operations between components.

##### field(e.fromData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component. Available only for drag-and-drop operations between components.

##### field(e.fromIndex): Number
<!-- Description goes here -->
The row's original position. If the row is dragged from another UI component, the value is **-1**.

##### field(e.itemData): any
<!-- Description goes here -->
The data object of the row being dragged.

##### field(e.itemElement): DxElement
<!-- Description goes here -->
#include draganddrop-ref-itemelementparam

##### field(e.toComponent): Sortable | Draggable
<!-- Description goes here -->
The instance of the row's target UI component. Available only for drag-and-drop operations between components.

##### field(e.toData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the target UI component. Available only for drag-and-drop operations between components.

##### field(e.toIndex): Number
<!-- Description goes here -->
The position where the row is placed. If the row is dragged away from the UI component, the value is -1.

---
<!-- Description goes here -->
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](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onReorder) for row reordering or use [onAdd](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onAdd) and [onRemove](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onRemove) for transfers between components.
32 changes: 16 additions & 16 deletions ...reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragMove.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,49 @@ type: function(e)
---
---
##### shortDescription
<!-- Description goes here -->
A function that is called every time a draggable row is moved.

##### param(e): ui/data_grid:RowDraggingMoveEvent
<!-- Description goes here -->
Information about the event.

##### field(e.cancel): Boolean
<!-- Description goes here -->
Set this field to **true** to cancel the drag gesture.

##### field(e.component): {WidgetName}
<!-- Description goes here -->
The UI component's instance.

##### field(e.dropInsideItem): Boolean
<!-- Description goes here -->
Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component.

##### field(e.element): DxElement
<!-- Description goes here -->
#include common-ref-elementparam with { element: "UI component" }

##### field(e.event): event
<!-- Description goes here -->
#include common-ref-eventparam

##### field(e.fromComponent): Sortable | Draggable
<!-- Description goes here -->
The row's source UI component instance. Available only for drag-and-drop operations between components.

##### field(e.fromData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component. Available only for drag-and-drop operations between components.

##### field(e.fromIndex): Number
<!-- Description goes here -->
The row's original position. If the row is dragged from another UI component, the value is **-1**.

##### field(e.itemData): any
<!-- Description goes here -->
The data object of the row being dragged.

##### field(e.itemElement): DxElement
<!-- Description goes here -->
#include draganddrop-ref-itemelementparam

##### field(e.toComponent): Sortable | Draggable
<!-- Description goes here -->
The instance of the row's target UI component. Available only for drag-and-drop operations between components.

##### field(e.toData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the target UI component. Available only for drag-and-drop operations between components.

##### field(e.toIndex): Number
<!-- Description goes here -->
The position where the row is placed. If the row is dragged away from the UI component, the value is -1.

---
<!-- Description goes here -->
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](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragChange).
22 changes: 11 additions & 11 deletions ...eference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragStart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,34 @@ type: function(e)
---
---
##### shortDescription
<!-- Description goes here -->
A function that is called when a drag gesture is initialized.

##### param(e): ui/data_grid:RowDraggingStartEvent
<!-- Description goes here -->
Information about the event.

##### field(e.cancel): Boolean
<!-- Description goes here -->
Set this field to **true** to cancel the drag gesture.

##### field(e.component): {WidgetName}
<!-- Description goes here -->
The UI component's instance.

##### field(e.element): DxElement
<!-- Description goes here -->
#include common-ref-elementparam with { element: "UI component" }

##### field(e.event): event
<!-- Description goes here -->
#include common-ref-eventparam

##### field(e.fromData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component. Available only for drag-and-drop operations between components.

##### field(e.fromIndex): Number
<!-- Description goes here -->
The row's original position. If the row is dragged from another UI component, the value is **-1**.

##### field(e.itemData): any
<!-- Description goes here -->
The data object of the row being dragged.

##### field(e.itemElement): DxElement
<!-- Description goes here -->
#include draganddrop-ref-itemelementparam

---
<!-- Description goes here -->
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.
30 changes: 16 additions & 14 deletions api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onRemove.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,45 @@ type: function(e)
---
---
##### shortDescription
<!-- Description goes here -->
A function that is called when a draggable row is removed.

##### param(e): ui/data_grid:RowDraggingRemoveEvent
<!-- Description goes here -->
Information about the event.

##### field(e.component): {WidgetName}
<!-- Description goes here -->
The UI component's instance.

##### field(e.element): DxElement
<!-- Description goes here -->
#include common-ref-elementparam with { element: "UI component" }

##### field(e.event): event
<!-- Description goes here -->
#include common-ref-eventparam

##### field(e.fromComponent): Sortable | Draggable
<!-- Description goes here -->
The row's source UI component instance.

##### field(e.fromData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component.

##### field(e.fromIndex): Number
<!-- Description goes here -->
The row's original position. If the row is dragged from another UI component, the value is **-1**.

##### field(e.itemData): any
<!-- Description goes here -->
The data object of the row being dragged.

##### field(e.itemElement): DxElement
<!-- Description goes here -->
#include draganddrop-ref-itemelementparam

##### field(e.toComponent): Sortable | Draggable
<!-- Description goes here -->
The instance of the row's target UI component.

##### field(e.toData): any
<!-- Description goes here -->
Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the target UI component.

##### field(e.toIndex): Number
<!-- Description goes here -->
The position where the row is placed. If the row is dragged away from the UI component, the value is -1.

---
<!-- Description goes here -->
Implement this handler to remove the dragged row from the source data source. Use [onAdd](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#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](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#group) value.

Use **e.itemData** to identify the row to remove.
Loading
Loading