Drag and Drop Rows in TreeGrid

Include 'treegrid-dnd.js' file

Enable Drag and Drop

Properties

The properties extend from treegrid, below is the added properties for treegrid.

Name

Type

Description

Default

dropAccept

selector

Determine which draggable rows will be accepted.

tr[node-id]

Events

The events extend from treegrid, below is the added events for treegrid.

Name

Parameters

Description

onBeforeDrag

row

Fires when a row's dragging starts, return false to deny drag.

onStartDrag

row

Fires when start dragging a row.

onStopDrag

row

Fires after stop dragging a row.

onDragEnter

targetRow, sourceRow

Fires when a row is dragged enter some target row that can be dropped to,
return false to deny drop.

onDragOver

targetRow, sourceRow

Fires when a row is dragged over some target row that can be dropped to,
return false to deny drop.

onDragLeave

targetRow, sourceRow

Fires when a row is dragged leave some target row that can be dropped to.

onBeforeDrop

targetRow,sourceRow,point

Fires before a row is dropped, return false to deny drop.
targetRow: The row being targeted for the drop.
sourceRow: the source row.
point: indicate the drop operation, posible values are: 'append','top' or 'bottom'.

onDrop

targetRow,sourceRow,point

Fires when a row is dropped.
targetRow: the row being targeted for the drop.
sourceRow: the source row.
point: indicate the drop operation, posible values are: 'append','top' or 'bottom'.

Methods

The methods below extend from treegrid.

Name

Parameter

Description

enableDnd

id

Enable dragging and dropping rows.
The 'id' parameter indicates what row to be dragged and dropped.
If this parameter is not specified, enable dragging and dropping all rows.