Row Dragging

TOC

• Revision history
• Overview
  • Objectives
• User Stories
  • Developer
• API
• ARIA Support
• Test Scenarios
  • Automation
  • Manual

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

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

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

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

1. IgxGridComponent

Name	Description	Type
rowDraggable	Enables/Disables row dragging	boolean

Events

Name	Description	Cancelable	Parameters
onRowDragStart	Emitted when row dragging starts	true	{ source: IgxRowComponent, cancel: boolean }
onRowDragEnd	Emitted when row is dropped	false	{ source: IgxRowComponent }

ARIA support

ARIA support would not be available for this feature

Scenarios not covered

Test Scenarios

Automation

• Grid row can be dropped to a droppable container.
• Row dragging operation is possible only when dragging the row by the drag icon.
• Row dragging operation is canceled and the onRowDragEnd event is not fired if dropping a row on a non-interactive area.
• Changing the data in the drop area does not affect the dropped row data.
• The row icon changes accordingly upon dragging to reflect the operation possibility to be executed.
• A row can be dragged programmatically.
• Pressing ESC key upon row dragging cancels the operation.
• All row drag events are fired correctly with correct values of the event arguments.
• All drop events are fired correctly with correct values of the event arguments.
• onRowDragStart event is cancelable.
• The onRowDragEnd event is not triggered in case the mouse dragging is interrupted before the row has been dropped onto the droppable area.

Manual