Show TOC

Drag and Drop in TablesLocate this document in the navigation structure

Use

You can drag selected Table rows, and drop Table rows, Images, etc. between existing Table rows. Aggregations DRAG_SOURCE_INFO and DROP_TARGET_INFO , and event onDrop are provided for this.

You can also drop onto rows . Aggregation dropOnRowTargetInfo, and properties dropOnRowName and DropTargetInfo.name are provided for this.

Enabling Drop on Rows

  1. Aggregate DropTargetInfos to the table aggregation DROP_ROW_TRG_INFS.

  2. Assign various values as the DropTargetInfos.name. If you want to reuse DropTargetInfo in the Table aggregation DROP_TARGET_INFO, enter a name there.

  3. 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.

  4. 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 onto 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.

There you can insert small and large Images using drag and drop into a Table. You can replace images by dropping Images onto a Table row. Large Images can only be dropped on rows with large Images, and small Images only on rows with small Images.

Drag and Drop in Hierarchical Tables

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

In the simple mode (if the conditions below are fulfilled), you can drop objects between table lines, and DropTargetInfo of the Table determines globally how this is to be done (that is, 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 these properties or aggregations is filled with values, the following applies to drag and drop in the Table: 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 yourselves.

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.

More Information

Documentation on Drag and Drop