Row Dragging

Revision history

Version	User	Date	Notes
0.1	Stefan Ivanov	Apr 1, 2019	Spec and design initial creation

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

User Interface

Expanded state 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

Integration scenarios

Row dragging works together with cell and row selection.

API

Properties

IgxGridComponent

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

Events

Name	Description	Cancelable	Parameters
`onRowDraggingStart`	Emitted when row dragging starts	false	{ source: IgxRowComponent }
`onRowDragging`	Emitted when row is dragging	true	{ source: IgxRowComponent, cancel: boolean, ghost: HTMLElement }
`onRowDraggingEnd`	Emitted when row is dropped	true	{ source: IgxRowComponent, cancel: boolean }