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 |
| dragDelay | number | Defines the delay time in milliseconds to start a drag operation.. | 100 |
| 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
|