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

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

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 programmatically drag a row
• be notified when row dragging starts and ends, so that I can add custom logic.

Integration scenarios

• Row dragging works together with cell and row selection.

API

Properties

1. IgxGridComponent

Name	Description	Type
rowDraggable	Enables/Disables row dragging	boolean

Events

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

Methods

1. IgxGridRowComponent

   Name	Description	Return type	Parameters
   drag	Drags a row programatically

ARIA support

ARIA support would not be available for this feature

Scenarios not covered

Test Scenarios

Automation

• Grid row can be dropped only to a configured droppable area.
• Row dragging operation is canceled if dropping a row on a non-interactive area.
• All row data is processed and/or rendered correctly in the drop area.
• Changing the data in the drop area does not affect the dropped row data.
• Row dragging operation is possible only when the cursor is over the drag icon.
• The row icon changes accordingly upon dragging to reflect the operation possibility to be executed.
• A row can be dragged programmatically.
• All row drag events are fired correctly with correct values of the event arguments. Cancelable events can be canceled.
• The onRowDragEnd event is not fired if dropping a row on a non-valid drop target.
• The onRowDragEnd event is not triggered in case the mouse dragging is interrupted before the row has been dropped onto the droppable area.

Manual