From 99d6e16647dab977df4308f00bf5067925629a25 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 25 Sep 2026 12:17:24 +0400 Subject: [PATCH] DataGrid/TreeList: describe rowDragging options and types (#9195) * DataGrid/TreeList: describe rowDragging options and types * Apply suggestions from validation review * Update following feedback --- .../1 Configuration/rowDragging/onAdd.md | 32 ++++++++------- .../rowDragging/onDragChange.md | 32 +++++++-------- .../1 Configuration/rowDragging/onDragEnd.md | 32 +++++++-------- .../1 Configuration/rowDragging/onDragMove.md | 32 +++++++-------- .../rowDragging/onDragStart.md | 22 +++++----- .../1 Configuration/rowDragging/onRemove.md | 30 +++++++------- .../1 Configuration/rowDragging/onReorder.md | 38 ++++++++++-------- .../rowDragging/rowDragging.md | 10 ++++- .../RowDraggingAddEvent.md | 4 +- .../RowDraggingChangeEvent.md | 4 +- .../RowDraggingEndEvent.md | 4 +- .../RowDraggingMoveEvent.md | 4 +- .../RowDraggingRemoveEvent.md | 4 +- .../RowDraggingReorderEvent.md | 4 +- .../RowDraggingStartEvent.md | 4 +- .../1 Configuration/rowDragging/onAdd.md | 34 +++++++++------- .../rowDragging/onDragChange.md | 38 ++++++++++-------- .../1 Configuration/rowDragging/onDragEnd.md | 32 +++++++-------- .../1 Configuration/rowDragging/onDragMove.md | 32 +++++++-------- .../rowDragging/onDragStart.md | 22 +++++----- .../1 Configuration/rowDragging/onRemove.md | 30 +++++++------- .../1 Configuration/rowDragging/onReorder.md | 40 +++++++++++-------- .../rowDragging/rowDragging.md | 12 +++++- .../RowDraggingAddEvent.md | 4 +- .../RowDraggingChangeEvent.md | 4 +- .../RowDraggingEndEvent.md | 4 +- .../RowDraggingMoveEvent.md | 4 +- .../RowDraggingRemoveEvent.md | 4 +- .../RowDraggingReorderEvent.md | 4 +- .../RowDraggingStartEvent.md | 4 +- .../15 grids/DragDropInfo/DragDropInfo.md | 4 +- .../15 grids/DragDropInfo/dropInsideItem.md | 4 +- .../DragReorderInfo/DragReorderInfo.md | 4 +- .../DragReorderInfo/dropInsideItem.md | 4 +- .../15 grids/DragReorderInfo/promise.md | 8 +++- .../DragStartEventInfo/DragStartEventInfo.md | 4 +- .../15 grids/DragStartEventInfo/fromData.md | 4 +- .../15 grids/DragStartEventInfo/fromIndex.md | 4 +- .../15 grids/DragStartEventInfo/itemData.md | 4 +- .../DragStartEventInfo/itemElement.md | 4 +- .../RowDraggingEventInfo.md | 4 +- .../RowDraggingEventInfo/fromComponent.md | 4 +- .../15 grids/RowDraggingEventInfo/fromData.md | 4 +- .../RowDraggingEventInfo/fromIndex.md | 4 +- .../15 grids/RowDraggingEventInfo/itemData.md | 4 +- .../RowDraggingEventInfo/itemElement.md | 4 +- .../RowDraggingEventInfo/toComponent.md | 4 +- .../15 grids/RowDraggingEventInfo/toData.md | 4 +- .../15 grids/RowDraggingEventInfo/toIndex.md | 4 +- 49 files changed, 326 insertions(+), 278 deletions(-) diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onAdd.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onAdd.md index 185e1cbe77..10af2949e4 100644 --- a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onAdd.md +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onAdd.md @@ -4,46 +4,48 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when a new row is added. ##### param(e): ui/data_grid:RowDraggingAddEvent - +Information about the event. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component. ##### field(e.fromIndex): Number - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the target UI component. ##### field(e.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](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) is enabled, the index is relative to the top visible row. --- - \ No newline at end of file +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. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragChange.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragChange.md index 6f986ddf68..860c0dd294 100644 --- a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragChange.md +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragChange.md @@ -4,49 +4,49 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when the dragged row's position is changed. ##### param(e): ui/data_grid:RowDraggingChangeEvent - +Information about the event. ##### field(e.cancel): Boolean - +Set this field to **true** to cancel the drag gesture. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. Available only for drag-and-drop operations between components. ##### field(e.fromData): any - +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 - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. Available only for drag-and-drop operations between components. ##### field(e.toData): any - +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 - +The position where the row is placed. If the row is dragged away from the UI component, the value is -1. --- - \ No newline at end of file +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. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragEnd.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragEnd.md index 3853cbd3cc..bc5442fde7 100644 --- a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragEnd.md +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragEnd.md @@ -4,49 +4,49 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when the drag gesture is finished. ##### param(e): ui/data_grid:RowDraggingEndEvent - +Information about the event. ##### field(e.cancel): Boolean - +Set this field to **true** to cancel the drag gesture. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. Available only for drag-and-drop operations between components. ##### field(e.fromData): any - +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 - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. Available only for drag-and-drop operations between components. ##### field(e.toData): any - +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 - +The position where the row is placed. If the row is dragged away from the UI component, the value is -1. --- - \ No newline at end of file +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. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragMove.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragMove.md index 5d4ce665e6..58ec5e6305 100644 --- a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragMove.md +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragMove.md @@ -4,49 +4,49 @@ type: function(e) --- --- ##### shortDescription - +A function that is called every time a draggable row is moved. ##### param(e): ui/data_grid:RowDraggingMoveEvent - +Information about the event. ##### field(e.cancel): Boolean - +Set this field to **true** to cancel the drag gesture. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. Available only for drag-and-drop operations between components. ##### field(e.fromData): any - +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 - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. Available only for drag-and-drop operations between components. ##### field(e.toData): any - +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 - +The position where the row is placed. If the row is dragged away from the UI component, the value is -1. --- - \ No newline at end of file +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). \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragStart.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragStart.md index e9e5bfd89b..f10034b008 100644 --- a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragStart.md +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onDragStart.md @@ -4,34 +4,34 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when a drag gesture is initialized. ##### param(e): ui/data_grid:RowDraggingStartEvent - +Information about the event. ##### field(e.cancel): Boolean - +Set this field to **true** to cancel the drag gesture. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromData): any - +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 - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam --- - \ No newline at end of file +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. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onRemove.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onRemove.md index 099100da31..2f6d8b5610 100644 --- a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onRemove.md +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onRemove.md @@ -4,43 +4,45 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when a draggable row is removed. ##### param(e): ui/data_grid:RowDraggingRemoveEvent - +Information about the event. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component. ##### field(e.fromIndex): Number - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the target UI component. ##### field(e.toIndex): Number - +The position where the row is placed. If the row is dragged away from the UI component, the value is -1. --- - \ No newline at end of file +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. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onReorder.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onReorder.md index 290cf8a579..c77b03d631 100644 --- a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onReorder.md +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/onReorder.md @@ -4,49 +4,55 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when the draggable rows are reordered. ##### param(e): ui/data_grid:RowDraggingReorderEvent - +Information about the event. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the source UI component. ##### field(e.fromIndex): Number - +The row's original position (when [paging](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/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**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.promise): Promise - +Assign a Promise to this field to perform an asynchronous operation. ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) associated with the target UI component. ##### field(e.toIndex): Number - +The row's dropped position (when [paging](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/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**. --- - \ No newline at end of file +Implement this handler to update the data source after a user reorders rows. The [allowReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#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. + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/LocalReordering/" +} \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/rowDragging.md b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/rowDragging.md index 397373d90e..3331aa9b20 100644 --- a/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/rowDragging.md +++ b/api-reference/10 UI Components/dxDataGrid/1 Configuration/rowDragging/rowDragging.md @@ -4,7 +4,13 @@ type: ui/data_grid:RowDragging --- --- ##### shortDescription - +Configures row reordering using drag and drop gestures. --- - \ No newline at end of file +Set [allowReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#allowReordering) to **true** to allow users to reorder rows. Implement [onReorder](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onReorder) to apply the new order to the data source. + +Assign the same [group](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#group) value to the components to allow drag and drop between them. Implement [onAdd](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onAdd) and [onRemove](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onRemove) to update their data sources. + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/LocalReordering/" +} \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingAddEvent/RowDraggingAddEvent.md b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingAddEvent/RowDraggingAddEvent.md index 03131af41c..674c98e809 100644 --- a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingAddEvent/RowDraggingAddEvent.md +++ b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingAddEvent/RowDraggingAddEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onAdd]({basewidgetpath}/Configuration/rowDragging/#onAdd) event handler's argument. +The type of the **rowDragging**.[onAdd](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onAdd) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onAdd](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onAdd) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingChangeEvent/RowDraggingChangeEvent.md b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingChangeEvent/RowDraggingChangeEvent.md index 1f4ce66946..4d941d3ce2 100644 --- a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingChangeEvent/RowDraggingChangeEvent.md +++ b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingChangeEvent/RowDraggingChangeEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onDragChange]({basewidgetpath}/Configuration/rowDragging/#onDragChange) event handler's argument. +The type of the **rowDragging**.[onDragChange](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragChange) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onDragChange](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragChange) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingEndEvent/RowDraggingEndEvent.md b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingEndEvent/RowDraggingEndEvent.md index 0913e627c9..4531f6eebc 100644 --- a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingEndEvent/RowDraggingEndEvent.md +++ b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingEndEvent/RowDraggingEndEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onDragEnd]({basewidgetpath}/Configuration/rowDragging/#onDragEnd) event handler's argument. +The type of the **rowDragging**.[onDragEnd](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragEnd) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onDragEnd](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragEnd) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingMoveEvent/RowDraggingMoveEvent.md b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingMoveEvent/RowDraggingMoveEvent.md index a862000171..12e6483fe8 100644 --- a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingMoveEvent/RowDraggingMoveEvent.md +++ b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingMoveEvent/RowDraggingMoveEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onDragMove]({basewidgetpath}/Configuration/rowDragging/#onDragMove) event handler's argument. +The type of the **rowDragging**.[onDragMove](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragMove) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onDragMove](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragMove) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingRemoveEvent/RowDraggingRemoveEvent.md b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingRemoveEvent/RowDraggingRemoveEvent.md index 7048af5501..8c4c5de3b0 100644 --- a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingRemoveEvent/RowDraggingRemoveEvent.md +++ b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingRemoveEvent/RowDraggingRemoveEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onRemove]({basewidgetpath}/Configuration/rowDragging/#onRemove) event handler's argument. +The type of the **rowDragging**.[onRemove](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onRemove) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onRemove](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onRemove) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingReorderEvent/RowDraggingReorderEvent.md b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingReorderEvent/RowDraggingReorderEvent.md index d5bf2629a4..5d62e863c1 100644 --- a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingReorderEvent/RowDraggingReorderEvent.md +++ b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingReorderEvent/RowDraggingReorderEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onReorder]({basewidgetpath}/Configuration/rowDragging/#onReorder) event handler's argument. +The type of the **rowDragging**.[onReorder](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onReorder) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onReorder](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onReorder) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingStartEvent/RowDraggingStartEvent.md b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingStartEvent/RowDraggingStartEvent.md index ee6743892d..bf8b0e513e 100644 --- a/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingStartEvent/RowDraggingStartEvent.md +++ b/api-reference/10 UI Components/dxDataGrid/9 Types/RowDraggingStartEvent/RowDraggingStartEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onDragStart]({basewidgetpath}/Configuration/rowDragging/#onDragStart) event handler's argument. +The type of the **rowDragging**.[onDragStart](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragStart) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onDragStart](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onDragStart) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onAdd.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onAdd.md index dbc2499531..9b4d041397 100644 --- a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onAdd.md +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onAdd.md @@ -4,46 +4,50 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when a new row is added. ##### param(e): ui/tree_list:RowDraggingAddEvent - +Information about the event. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the source UI component. ##### field(e.fromIndex): Number - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the target UI component. ##### field(e.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](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/scrolling/#mode) is enabled, the index is relative to the top visible row. --- - \ No newline at end of file +Set [group](/Documentation/ApiReference/UI_Components/dxTreeList/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/dxTreeList/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. + +Enable [allowDropInsideItem](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#allowDropInsideItem) to allow drops inside rows. Use **e.dropInsideItem** in the drop handler to determine whether to update the row's parent. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragChange.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragChange.md index 5ecc3a407a..7f0a497f71 100644 --- a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragChange.md +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragChange.md @@ -4,49 +4,55 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when the dragged row's position is changed. ##### param(e): ui/tree_list:RowDraggingChangeEvent - +Information about the event. ##### field(e.cancel): Boolean - +Set this field to **true** to cancel the drag gesture. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. Available only for drag-and-drop operations between components. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the source UI component. Available only for drag-and-drop operations between components. ##### field(e.fromIndex): Number - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. Available only for drag-and-drop operations between components. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the target UI component. Available only for drag-and-drop operations between components. ##### field(e.toIndex): Number - +The position where the row is placed. If the row is dragged away from the UI component, the value is -1. --- - \ No newline at end of file +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. + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/LocalReordering/" +} \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragEnd.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragEnd.md index 2d0026f724..c782e987af 100644 --- a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragEnd.md +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragEnd.md @@ -4,49 +4,49 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when the drag gesture is finished. ##### param(e): ui/tree_list:RowDraggingEndEvent - +Information about the event. ##### field(e.cancel): Boolean - +Set this field to **true** to cancel the drag gesture. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. Available only for drag-and-drop operations between components. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the source UI component. Available only for drag-and-drop operations between components. ##### field(e.fromIndex): Number - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. Available only for drag-and-drop operations between components. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the target UI component. Available only for drag-and-drop operations between components. ##### field(e.toIndex): Number - +The position where the row is placed. If the row is dragged away from the UI component, the value is -1. --- - \ No newline at end of file +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/dxTreeList/Configuration/rowDragging/#onReorder) for row reordering or use [onAdd](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onAdd) and [onRemove](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onRemove) for transfers between components. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragMove.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragMove.md index 84c232ca5f..9eeed24df0 100644 --- a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragMove.md +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragMove.md @@ -4,49 +4,49 @@ type: function(e) --- --- ##### shortDescription - +A function that is called every time a draggable row is moved. ##### param(e): ui/tree_list:RowDraggingMoveEvent - +Information about the event. ##### field(e.cancel): Boolean - +Set this field to **true** to cancel the drag gesture. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. Available only for the TreeList UI component. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. Available only for drag-and-drop operations between components. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the source UI component. Available only for drag-and-drop operations between components. ##### field(e.fromIndex): Number - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. Available only for drag-and-drop operations between components. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the target UI component. Available only for drag-and-drop operations between components. ##### field(e.toIndex): Number - +The position where the row is placed. If the row is dragged away from the UI component, the value is -1. --- - \ No newline at end of file +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/dxTreeList/Configuration/rowDragging/#onDragChange). \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragStart.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragStart.md index 01d9350226..882d10c41e 100644 --- a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragStart.md +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onDragStart.md @@ -4,34 +4,34 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when a drag gesture is initialized. ##### param(e): ui/tree_list:RowDraggingStartEvent - +Information about the event. ##### field(e.cancel): Boolean - +Set this field to **true** to cancel the drag gesture. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the source UI component. Available only for drag-and-drop operations between components. ##### field(e.fromIndex): Number - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam --- - \ No newline at end of file +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. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onRemove.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onRemove.md index ae3f7c7ad5..b54c9f9ca3 100644 --- a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onRemove.md +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onRemove.md @@ -4,43 +4,45 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when a draggable row is removed. ##### param(e): ui/tree_list:RowDraggingRemoveEvent - +Information about the event. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the source UI component. ##### field(e.fromIndex): Number - +The row's original position. If the row is dragged from another UI component, the value is **-1**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the target UI component. ##### field(e.toIndex): Number - +The position where the row is placed. If the row is dragged away from the UI component, the value is -1. --- - \ No newline at end of file +Implement this handler to remove the dragged row from the source data source. Use [onAdd](/Documentation/ApiReference/UI_Components/dxTreeList/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/dxTreeList/Configuration/rowDragging/#group) value. + +Use **e.itemData** to identify the row to remove. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onReorder.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onReorder.md index 9aafb32bbd..2e033789c0 100644 --- a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onReorder.md +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/onReorder.md @@ -4,49 +4,57 @@ type: function(e) --- --- ##### shortDescription - +A function that is called when the draggable rows are reordered. ##### param(e): ui/tree_list:RowDraggingReorderEvent - +Information about the event. ##### field(e.component): {WidgetName} - +The UI component's instance. ##### field(e.dropInsideItem): Boolean - +Indicates if the dragged row is dropped inside another row. ##### field(e.element): DxElement - +#include common-ref-elementparam with { element: "UI component" } ##### field(e.event): event - +#include common-ref-eventparam ##### field(e.fromComponent): Sortable | Draggable - +The row's source UI component instance. ##### field(e.fromData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the source UI component. ##### field(e.fromIndex): Number - +The row's original position (when [paging](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/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**. ##### field(e.itemData): any - +The data object of the row being dragged. ##### field(e.itemElement): DxElement - +#include draganddrop-ref-itemelementparam ##### field(e.promise): Promise - +Assign a Promise to this field to perform an asynchronous operation. ##### field(e.toComponent): Sortable | Draggable - +The instance of the row's target UI component. ##### field(e.toData): any - +Custom [data](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#data) associated with the target UI component. ##### field(e.toIndex): Number - +The row's dropped position (when [paging](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/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**. --- - \ No newline at end of file +Implement this handler to update the data source after a user reorders rows. The [allowReordering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#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](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#allowDropInsideItem) to allow drops inside rows. Use **e.dropInsideItem** in the drop handler to determine whether to update the row's parent. + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/LocalReordering/" +} \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/rowDragging.md b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/rowDragging.md index 14312ed1ad..36fa29e29c 100644 --- a/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/rowDragging.md +++ b/api-reference/10 UI Components/dxTreeList/1 Configuration/rowDragging/rowDragging.md @@ -4,7 +4,15 @@ type: ui/tree_list:RowDragging --- --- ##### shortDescription - +Configures row reordering using drag and drop gestures. --- - \ No newline at end of file +Set [allowReordering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#allowReordering) to **true** to allow users to reorder rows. Implement [onReorder](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onReorder) to apply the new order to the data source. + +Assign the same [group](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#group) value to the components to allow drag and drop between them. Implement [onAdd](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onAdd) and [onRemove](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onRemove) to update their data sources. + +Enable [allowDropInsideItem](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#allowDropInsideItem) to allow drops inside rows. Use **dropInsideItem** in the drop handler to determine whether to update the row's parent. + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/LocalReordering/" +} \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingAddEvent/RowDraggingAddEvent.md b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingAddEvent/RowDraggingAddEvent.md index 2a9b00451f..6e53243918 100644 --- a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingAddEvent/RowDraggingAddEvent.md +++ b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingAddEvent/RowDraggingAddEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onAdd]({basewidgetpath}/Configuration/rowDragging/#onAdd) event handler's argument. +The type of the **rowDragging**.[onAdd](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onAdd) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onAdd](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onAdd) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingChangeEvent/RowDraggingChangeEvent.md b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingChangeEvent/RowDraggingChangeEvent.md index ccc022b83d..87f71000ca 100644 --- a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingChangeEvent/RowDraggingChangeEvent.md +++ b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingChangeEvent/RowDraggingChangeEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onDragChange]({basewidgetpath}/Configuration/rowDragging/#onDragChange) event handler's argument. +The type of the **rowDragging**.[onDragChange](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onDragChange) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onDragChange](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onDragChange) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingEndEvent/RowDraggingEndEvent.md b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingEndEvent/RowDraggingEndEvent.md index 828ef99665..b5a7ff26fa 100644 --- a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingEndEvent/RowDraggingEndEvent.md +++ b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingEndEvent/RowDraggingEndEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onDragEnd]({basewidgetpath}/Configuration/rowDragging/#onDragEnd) event handler's argument. +The type of the **rowDragging**.[onDragEnd](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onDragEnd) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onDragEnd](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onDragEnd) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingMoveEvent/RowDraggingMoveEvent.md b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingMoveEvent/RowDraggingMoveEvent.md index 10c41ffe45..72b004e95e 100644 --- a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingMoveEvent/RowDraggingMoveEvent.md +++ b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingMoveEvent/RowDraggingMoveEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onDragMove]({basewidgetpath}/Configuration/rowDragging/#onDragMove) event handler's argument. +The type of the **rowDragging**.[onDragMove](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onDragMove) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onDragMove](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onDragMove) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingRemoveEvent/RowDraggingRemoveEvent.md b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingRemoveEvent/RowDraggingRemoveEvent.md index 00c0658f39..75ded72bd3 100644 --- a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingRemoveEvent/RowDraggingRemoveEvent.md +++ b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingRemoveEvent/RowDraggingRemoveEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onRemove]({basewidgetpath}/Configuration/rowDragging/#onRemove) event handler's argument. +The type of the **rowDragging**.[onRemove](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onRemove) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onRemove](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onRemove) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingReorderEvent/RowDraggingReorderEvent.md b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingReorderEvent/RowDraggingReorderEvent.md index ed639aa420..3ddb22540a 100644 --- a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingReorderEvent/RowDraggingReorderEvent.md +++ b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingReorderEvent/RowDraggingReorderEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onReorder]({basewidgetpath}/Configuration/rowDragging/#onReorder) event handler's argument. +The type of the **rowDragging**.[onReorder](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onReorder) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onReorder](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onReorder) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingStartEvent/RowDraggingStartEvent.md b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingStartEvent/RowDraggingStartEvent.md index ad27694f9e..64e8949e3a 100644 --- a/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingStartEvent/RowDraggingStartEvent.md +++ b/api-reference/10 UI Components/dxTreeList/9 Types/RowDraggingStartEvent/RowDraggingStartEvent.md @@ -9,7 +9,7 @@ generateTypeLink: --- --- ##### shortDescription -The type of the **rowDragging**.[onDragStart]({basewidgetpath}/Configuration/rowDragging/#onDragStart) event handler's argument. +The type of the **rowDragging**.[onDragStart](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onDragStart) event handler's argument. --- - \ No newline at end of file +Use this type to annotate the argument of an [onDragStart](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#onDragStart) handler. Refer to the handler's description for details about the event argument. The **TRowData** and **TKey** type parameters specify the row data and key types. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragDropInfo/DragDropInfo.md b/api-reference/40 Common Types/15 grids/DragDropInfo/DragDropInfo.md index edbafa533d..67acafe344 100644 --- a/api-reference/40 Common Types/15 grids/DragDropInfo/DragDropInfo.md +++ b/api-reference/40 Common Types/15 grids/DragDropInfo/DragDropInfo.md @@ -7,7 +7,7 @@ generateTypeLink: --- --- ##### shortDescription - +Describes whether a dragged row is dropped inside another row. --- - \ No newline at end of file +This type supplies the **dropInsideItem** field for DataGrid and TreeList row-dragging events. Use this field in TreeList handlers to distinguish a drop inside a row from a drop between rows. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragDropInfo/dropInsideItem.md b/api-reference/40 Common Types/15 grids/DragDropInfo/dropInsideItem.md index 74a25df099..272391961a 100644 --- a/api-reference/40 Common Types/15 grids/DragDropInfo/dropInsideItem.md +++ b/api-reference/40 Common Types/15 grids/DragDropInfo/dropInsideItem.md @@ -4,7 +4,7 @@ type: Boolean --- --- ##### shortDescription - +Indicates whether the dragged row is dropped inside another row. --- - \ No newline at end of file +Use this field in TreeList row-dragging handlers to determine whether to update the row's parent. A value of **true** indicates a drop inside the target row. A value of **false** indicates a drop between rows. To allow drops inside rows, enable [allowDropInsideItem](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#allowDropInsideItem). This field applies only to TreeList. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragReorderInfo/DragReorderInfo.md b/api-reference/40 Common Types/15 grids/DragReorderInfo/DragReorderInfo.md index 831e2f5ed4..165544ac8a 100644 --- a/api-reference/40 Common Types/15 grids/DragReorderInfo/DragReorderInfo.md +++ b/api-reference/40 Common Types/15 grids/DragReorderInfo/DragReorderInfo.md @@ -7,7 +7,7 @@ generateTypeLink: --- --- ##### shortDescription - +Describes the drop location and asynchronous completion of a row reorder operation. --- - \ No newline at end of file +This type supplies the **dropInsideItem** and **promise** fields for DataGrid and TreeList **RowDraggingReorderEvent** arguments. Use these fields to update the TreeList hierarchy or wait for an asynchronous data source update. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragReorderInfo/dropInsideItem.md b/api-reference/40 Common Types/15 grids/DragReorderInfo/dropInsideItem.md index 89d095d8a8..564f851146 100644 --- a/api-reference/40 Common Types/15 grids/DragReorderInfo/dropInsideItem.md +++ b/api-reference/40 Common Types/15 grids/DragReorderInfo/dropInsideItem.md @@ -4,7 +4,7 @@ type: Boolean --- --- ##### shortDescription - +Indicates whether the dragged row is dropped inside another row. --- - \ No newline at end of file +Use this field in TreeList row-dragging handlers to determine whether to update the row's parent. A value of **true** indicates a drop inside the target row. A value of **false** indicates a drop between rows. To allow drops inside rows, enable [allowDropInsideItem](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/rowDragging/#allowDropInsideItem). This field applies only to TreeList. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragReorderInfo/promise.md b/api-reference/40 Common Types/15 grids/DragReorderInfo/promise.md index a9b2a469cf..27110f5055 100644 --- a/api-reference/40 Common Types/15 grids/DragReorderInfo/promise.md +++ b/api-reference/40 Common Types/15 grids/DragReorderInfo/promise.md @@ -4,7 +4,11 @@ type: Promise --- --- ##### shortDescription - +Assign a Promise to this field to complete a row reorder operation asynchronously. --- - \ No newline at end of file +Assign the Promise returned by your data source update to **e.promise** in the **onReorder** handler. The Promise should resolve after the update completes. + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RemoteReordering/" +} \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragStartEventInfo/DragStartEventInfo.md b/api-reference/40 Common Types/15 grids/DragStartEventInfo/DragStartEventInfo.md index 275dfe1e27..df19ced257 100644 --- a/api-reference/40 Common Types/15 grids/DragStartEventInfo/DragStartEventInfo.md +++ b/api-reference/40 Common Types/15 grids/DragStartEventInfo/DragStartEventInfo.md @@ -6,7 +6,7 @@ generateTypeLink: --- --- ##### shortDescription - +Describes a row at the start of a drag gesture. --- - \ No newline at end of file +This type supplies row data, the row element, the source index, and custom source data for DataGrid and TreeList **RowDraggingStartEvent** arguments. The **TRowData** type parameter specifies the type of **itemData**. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragStartEventInfo/fromData.md b/api-reference/40 Common Types/15 grids/DragStartEventInfo/fromData.md index e522238837..f9faf35a51 100644 --- a/api-reference/40 Common Types/15 grids/DragStartEventInfo/fromData.md +++ b/api-reference/40 Common Types/15 grids/DragStartEventInfo/fromData.md @@ -4,7 +4,7 @@ type: any --- --- ##### shortDescription - +Custom data associated with the source UI component. --- - \ No newline at end of file +Set the source component's [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) property to pass application-specific information to row-dragging handlers. Use **fromData** to identify or access this information during a transfer between components. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragStartEventInfo/fromIndex.md b/api-reference/40 Common Types/15 grids/DragStartEventInfo/fromIndex.md index 331b2a0728..1ef9c5c062 100644 --- a/api-reference/40 Common Types/15 grids/DragStartEventInfo/fromIndex.md +++ b/api-reference/40 Common Types/15 grids/DragStartEventInfo/fromIndex.md @@ -4,7 +4,7 @@ type: Number --- --- ##### shortDescription - +The row's original position. --- - \ No newline at end of file +Use this field to locate the dragged row in the source component. The value is **-1** if the row comes from another UI component. When paging is enabled, the index is relative to the active page. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragStartEventInfo/itemData.md b/api-reference/40 Common Types/15 grids/DragStartEventInfo/itemData.md index f87f7f833a..570d487362 100644 --- a/api-reference/40 Common Types/15 grids/DragStartEventInfo/itemData.md +++ b/api-reference/40 Common Types/15 grids/DragStartEventInfo/itemData.md @@ -4,7 +4,7 @@ type: any --- --- ##### shortDescription - +The data object of the row being dragged. --- - \ No newline at end of file +Use this field to identify the row in your data source. Access a key field in the data object instead of treating a visible row index as an index in the underlying data source. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/DragStartEventInfo/itemElement.md b/api-reference/40 Common Types/15 grids/DragStartEventInfo/itemElement.md index ab3ad7e538..bcfbfeba67 100644 --- a/api-reference/40 Common Types/15 grids/DragStartEventInfo/itemElement.md +++ b/api-reference/40 Common Types/15 grids/DragStartEventInfo/itemElement.md @@ -4,7 +4,7 @@ type: DxElement --- --- ##### shortDescription - +#include draganddrop-ref-itemelementparam --- - \ No newline at end of file +Use this field to access the dragged row's element in an event handler. To access the corresponding data object, use **itemData**. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/RowDraggingEventInfo.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/RowDraggingEventInfo.md index f95383340f..962893e188 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/RowDraggingEventInfo.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/RowDraggingEventInfo.md @@ -6,7 +6,7 @@ generateTypeLink: --- --- ##### shortDescription - +Describes the row, source, and target of a row drag and drop operation. --- - \ No newline at end of file +This type supplies shared fields for DataGrid and TreeList row-dragging events. Use **itemData** to identify the dragged row and the source and target fields to update the corresponding data sources. The **TRowData** type parameter specifies the type of **itemData**. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromComponent.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromComponent.md index dd5c8af50e..7833f4c08e 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromComponent.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromComponent.md @@ -4,7 +4,7 @@ type: Sortable | Draggable --- --- ##### shortDescription - +The row's source UI component instance. --- - \ No newline at end of file +Use this field to access the source component during drag and drop between components. Use **fromData** to access the custom data associated with that component. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromData.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromData.md index b210c20c1b..56978a5150 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromData.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromData.md @@ -4,7 +4,7 @@ type: any --- --- ##### shortDescription - +Custom data associated with the source UI component. --- - \ No newline at end of file +Set the source component's [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) property to pass application-specific information to row-dragging handlers. Use **fromData** to identify or access this information during a transfer between components. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromIndex.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromIndex.md index 1081c9a8cd..5f105e32d5 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromIndex.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/fromIndex.md @@ -4,7 +4,7 @@ type: Number --- --- ##### shortDescription - +The row's original position. --- - \ No newline at end of file +Use this field to locate the dragged row in the source component. The value is **-1** if the row comes from another UI component. When paging is enabled, the index is relative to the active page. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/itemData.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/itemData.md index d17c275142..d42debbbc1 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/itemData.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/itemData.md @@ -4,7 +4,7 @@ type: any --- --- ##### shortDescription - +The data object of the row being dragged. --- - \ No newline at end of file +Use this field to identify the row in your data source. Access a key field in the data object instead of treating a visible row index as an index in the underlying data source. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/itemElement.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/itemElement.md index 85edebf287..2690b0f76a 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/itemElement.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/itemElement.md @@ -4,7 +4,7 @@ type: DxElement --- --- ##### shortDescription - +#include draganddrop-ref-itemelementparam --- - \ No newline at end of file +Use this field to access the dragged row's element in an event handler. To access the corresponding data object, use **itemData**. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toComponent.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toComponent.md index bf93736bbc..d3d4a802e0 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toComponent.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toComponent.md @@ -4,7 +4,7 @@ type: Sortable | Draggable --- --- ##### shortDescription - +The instance of the row's target UI component. --- - \ No newline at end of file +Use this field to access the target component during drag and drop between components. Use **toData** to access the custom data associated with that component. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toData.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toData.md index 333d43dd92..eb59620f58 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toData.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toData.md @@ -4,7 +4,7 @@ type: any --- --- ##### shortDescription - +Custom data associated with the target UI component. --- - \ No newline at end of file +Set the target component's [data](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#data) property to pass application-specific information to row-dragging handlers. Use **toData** to determine how to process a row dropped into that component. \ No newline at end of file diff --git a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toIndex.md b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toIndex.md index bcd7bcdd5b..3ef1079f5b 100644 --- a/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toIndex.md +++ b/api-reference/40 Common Types/15 grids/RowDraggingEventInfo/toIndex.md @@ -4,7 +4,7 @@ type: Number --- --- ##### shortDescription - +The row's target position. --- - \ No newline at end of file +Use this field to determine where to insert the dragged row. The value is **-1** if the row is dragged away from the UI component. When paging is enabled, the index is relative to the active page. When virtual scrolling is enabled, the index is relative to the top visible row. \ No newline at end of file