Drag n drop of rows between grid and other components

Rows in any grid can be dragged and dropped to other components and vice versa.

This is done by:

• turning on dropModel in droppable grid to receive row objects from other components.
• dragModel.clsDnD and dropModel.accept play crucial role in creating draggable / droppable relation between grid and other components.
• Drag handle are displayed in number cells by default (as in this example), they can also be displayed in other cells by dragModel.diDrag option.
• dropModel.drop callback is the final part that does the actual manipulation of dragged row objects.
• ParamQuery droppable calls 2 new callbacks in the draggable: beforeDrop and afterDrop with help of which we can take custom action in the draggable before / after drop in pqGrid. In this example, we use afterDrop callback to remove draggable from the custom component.

Related API:

• Options: dragModel, dropModel
• Methods: Drag, addNodes, deleteNodes

Drag n drop multiple rows

First of all mutiple row selection is turned on or checkbox selection is turned on.

Then dragModel.dragNodes method is implemented to return array of selected or checked rows.