Drag and Drop Rows in DataGrid

Extension » Drag and Drop Rows in DataGrid

Include 'datagrid-dnd.js' file

Enable Drag and Drop

Drag multiple rows

Properties

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

Name Type Description Default
dropAccept selector Determine which draggable rows will be accepted. tr.datagrid-row
dragSelection boolean When true drag the selected rows, otherwise drag the currenct single row. false

Events

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

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: '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: 'top' or 'bottom'.

Methods

The methods below extend from datagrid.

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

Code example:

$('#dg').datagrid('enableDnd', 1);	// enable dragging on second row
$('#dg').datagrid('enableDnd');	// enable dragging all rows

Download the EasyUI Extension:

datagrid-dnd.zip