Row Dragging

Revision history

Version	User	Date	Notes
0.1	Stefan Ivanov	Apr 1, 2019	Spec and design initial creation
0.2	Alexander Marinov	Apr 16, 2019	API and Stories updated
0.3	Plamena Miteva	Apr 16, 2019	Draft test scenarios
0.4	Alexander Marinov	Apr 22, 2019	Adding user scenarios
0.5	Alexander Marinov	May 29, 2019	Changing event parameters

Overview

Row dragging lets users pass the data of a grid record on to another surface, which has been configured to process/render this data in a particular way.

Objectives

User Stories

As an end user, I want to

be able to click on a grid row and drag it in order to provide its content as an input to another piece of UI
have a clear indication as I drag a row, whether I can drop it on the underlying area or not
see a ghost of the dragged row while dragging
I do not want the ghost to have selected or active classes applied while dragging
be able to cancel the dragging by pressing the Esc key while dragging is performed
When I drag a row that is in edit mode I want to exit edit mode and to save the changes that are made
If I am dragging a row that is selected or has selected cell no selection-related classes should be copied to the ghost

User Interface

Row drag and drop states 1. The grid when the feature is enabled before any user interaction

2. The user has pressed down on the row drag icon in the beginning of the row and performed a small drag to the right

3. Upon dragging if the area below the cursor supports drop of the row the row icon will change to reflect that it is a valid operation that can be executed

Developer Stories

As a developer, I want to

define drop areas where the dragged row can be dropped in order for its data to be passed on
define ways and logic in which data is processed and/or rendered by the layout where a row is dropped
be able to allow row drag to start even if the drag indicators are not visible.
be notified when row dragging starts and ends, so that I can add custom logic.
be able to change the drag icon for all rows (grid level).
be able to enable animations when the row is dropped on a non-droppable area, by setting the "onRowDragEnd" event's "animation" parameter to 'true'. When dropping a row on a droppable area, no animations would be triggered even if 'onDrop' is canceled.

Integration scenarios

Row dragging works together with cell and row selection.
Row dragging should work correctly with Column Pinning, Column Moving, Column Grouping and Filtering

API

Properties

IgxGridComponent

Name	Description	Type
`rowDraggable`	Enables/Disables row dragging	boolean

Events

Name	Description	Cancelable	Parameters
`onRowDragStart`	Emitted when row dragging starts	true	{ owner: IgxDragDirective, dragData: IgxRowDirective, cancel: boolean }
`onRowDragEnd`	Emitted when row is dropped	false	{ owner: IgxDragDirective, dragData: IgxRowDirective, animation: boolean }

ARIA support

ARIA support would not be available for this feature

Scenarios not covered

Test Scenarios

Automation

General scenarios

Grid row can be dropped to a droppable container.
Row dragging operation is possible only when dragging the row by the drag icon.
Grid header is not draggable.
Pressing ESC key upon row dragging cancels the operation.
When dragging starts a drag ghost element is spawned and moves along with the mouse cursor and is removed from the DOM after the mouse has been released.
The 'igx-grid__tr--drag' class is applied to the dragged row upon dragging.
The grid's horizontal scrollbar is aligned with the first non-pinned grid column.
All row drag events are fired correctly with correct values of the event arguments.
Row dragging operation is canceled and the onRowDragEnd event is fired if dropping a row on a non-interactive area.
onRowDragStart event is cancelable.

Grid features integration

Grid column moving does not affect the dragged row data and they are dropped in the proper columns of the drop grid.
Grid column pinning does not affect the dragged row data and they are dropped in the proper columns of the drop grid.
User is able to drag and drop a filtered grid row.
User is able to drag and drop a sorted grid row.
When dragging-and-dropping a selected row, it keeps its selection state in the drag-grid and is unselected in the drop-grid.
When dragging-and-dropping a row with selected cell/s, it keeps its selection state in the drag-grid and all its cells are unselected in the drop-grid.
When dragging a selected row/row containing selected cell/s, the ghost element does not contain any selection-related classes
When grouping is enabled, the user is able to drag any grid row except grid and group headers.
When dragging-and-dropping a grouped row the correct row data are dropped to the drop container.