Drag and Drop Rows in TreeGrid

Extension » 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.

Download the EasyUI Extension:

treegrid-dnd.zip