Drag and Drop in Tables

Application Scenarios

The following application cases of drag and drop can be used with Tables:

1. Drag and drop between rows and the end of the table

You can drop selected rows of a Table between existing Table rows or add them to a Table. Aggregations DRAG_SOURCE_INFO and DROP_TARGET_INFO , and event onDrop are provided for this.

2. Drag and drop on rows

You can specify that users can drop objects onto a row. Aggregation dropOnRowTargetInfo, property dropOnRowName, and property DropTargetInfo.name are provided for this.

Note

You have to get the information about dragged rows from property data in the onDrop event itself. The property represents the text of the data that is transported to the DropTarget.

For more information: DragSourceInfo Properties

3. Drop into cells

To drop an element with DragSourceInfo into table cells, use DropTargetCellEditor as the cell editot in CTable.

Enabling Drop on Rows

Aggregate DropTargetInfos to the table aggregation DROP_ROW_TRG_INFS.
Assign various values as the DropTargetInfos.name. If you want to reuse DropTargetInfo in the Table aggregation DROP_TARGET_INFO, enter a name there.
Set the property Table.dropOnRowName.

The value must either be set to initial or it must be the name of one of the DropTargetInfos that belongs to the Table aggregations DROP_TARGET_INFO or DROP_ROW_TRG_INFS.
Using context binding you can assign a different value to each Table row, and thereby influence drop-on-row behavior.

Note
If the value is set to initial, it is not possible to drop into a row. If the value matches the name of a DropTargetInfo, then this DropTargetInfo specifies the drop on Table rows.

Example

You can find an example in component WDR_TEST_DRAG_AND_DROP in view Table: Photo album.

Drag and Drop in Hierarchical Tables

There are two scenarios for hierarchical Tables with row arrangements TreeByKeyTableColumn or TreeByNestingTableColumn.

If the following conditions are fulfilled, you can drop objects between table rows, and the DropTargetInfo of the Table specifies globally how this is to be done (it specifies the tags:
- Aggregation Table.dropOnRowTargetInfo is empty
- Property Table.dropOnRowName is initial
- Property DropTargetInfo.name of the aggregated element in Table.dropTargetInfo is initial
As soon as one of the above properties or aggregations is filled with values, the following applies to drag and drop: The DropTargetInfo in aggregation Table.dropTargetInfo controls the insertion of rows using drag and drop only on the root node, that is, at the highest hierarchy level. As described in the previous section, the Table.dropOnRowName property together with DropTargetInfos, which is aggregated to Table, specifies if and how UI elements can be dropped onto a Table row. In addition property Table.dropOnRowName and the DropTargetInfo specified by this specifies whether and how elements can be inserted between child elements.

Note

Any further programming of the functions (insert, sort, and so on) must be done be application programmers.

Example

You can find an example in the system in component WDR_TEST_DRAG_AND_DROP in view TableTreeByKey: More generic example. Two Tables containing ships, containers, and freight are displayed there. You can drop freight into containers, and containers into ships, but you cannot drop ships into containers or freight. You can drop a container on a row representing a ship. The container is inserted at the end of the container list for this ship. Alternatively, you can open the node representing the ship (by dragging the mouse pointer over the triangle symbol for expanding the child elements), and then dropping the container between two of the child elements.