Row Dragging

LyteNyte Grid enables powerful row dragging capabilities that allow users to manipulate data through intuitive drag interactions. You can drag single or multiple rows within the same grid, between different grids, or to external drop zones. The framework provides the functionality without imposing default behaviors, giving you complete control over how drag interactions are handled in your application.

Row Dragging Single Row

To enable row dragging, set the rowDragEnabled property to true in your grid state. This displays a marker column with drag handles, making all rows draggable by default. If you need selective dragging functionality, implement the rowDragPredicate function to dynamically control which rows can be dragged based on your business logic.

Row Dragging

Dragging Multiple Rows

LyteNyte Grid seamlessly integrates row dragging with row selection to support dragging multiple rows simultaneously. When you enable rowDragMultiRow and initiate a drag operation on a row, all currently selected rows are included in the drag operation. This feature is particularly useful for manipulating groups of related items. Try selecting multiple rows in the example below before dragging to see this in action.

Row Dragging Multiple

Row Dragging Between Grids

LyteNyte Grid supports cross-grid row dragging, allowing rows to be transferred between different grid instances. To implement this functionality, use the rowDragExternalGrids property, which accepts an array of external grid API objects. When configured, these external grids will receive notifications about drag operations occurring in the source grid.

Row Dragging Between Grids

Row Drag Events

Row drag events form the foundation of LyteNyte Grid's drag functionality. Since no default behaviors are defined, you must implement these event handlers to determine how drag interactions should be processed:

  • onRowDragStart: Triggered when a row drag operation begins.
  • onRowDragMove: Triggered during drag movement. As this event fires frequently, ensure your handlers are performance-optimized.
  • onRowDragCancel: Triggered when a drag operation is cancelled (e.g., by pressing the Escape key).
  • onRowDragEnd: Triggered when a drag operation concludes normally (not cancelled).
  • onRowDragDrop: Triggered when dragged rows are released over a valid drop zone.

With these comprehensive events, you can implement virtually any drag-and-drop interaction required by your application.