Switch on the rowsDraggable flag to make the grid's rows draggable with mouse (or touch).
Specifying dropMode enables dropping on top of the grid or grid rows.
Supported values for the dropMode are
Depending on rowsDraggable and dropMode configuration,
grid fires events during the different phases of drag and drop sequence.
By default, only one row gets dragged at once. Make the grid rows selectable, for example with the selection column helper, to enable dragging multiple rows at the same time.
The detail.items property of the grid-dragstart event
is an array containing all items getting dragged.
The detail.item property of the grid-drop event
refers to the item of the grid row on which the drop occurred.
The detail.dropLocation property of the grid-drop event
indicates the position at which the drop event took place relative to a row. Depending
on the dropMode value, the drop location can be one of the following:
Hint: Try dragging users from the grid on the left on top of the users of the grid on the right to create a hierarchical structure.
Operating with the drag event text data enables you to process drag and drop between different application windows. The default payload of the drag event is generated from the visible grid columns and items as a line break separated list of tab-separated values.
The detail.data property of the grid-drop event
is the payload of the drag and drop operation.
To customize the drag event data, override the grid's formatDragData function. It receives the list of dragged
items as arguments and returns an array of items with the payload as a string representation as the data property
and the type of the data as type property.
Hint: Try dragging the grid's rows to the grid of the same demo but on another browser window.
When rows-draggable and drop-mode properties are set, by default, all the grid rows
can be dragged and dropped on top of. This can be controlled per row basis by using dragFilter
and dropFilter hook functions.
The dragFilter function receives information about the row as the argument and
should return a boolean value indicating whether dragging of the corresponding row should be enabled.
Respectively, dropFilter can be used for disabling dropping on top of specific rows.
Hint: Try changing the subordinates of the main level supervisors by dragging. The filters prevent