Specifying Drop Targets at Row Level

The following basic example explains how you can implement a drag-and-drop operation for single table rows in particular.

row where drop is allowed row where drop is not possible

For each row you want to allow the user to drop an object to, you need to define a value for the dropOnRowName property. This value has to map to a DropOnRowTargetInfo element inside this Table and the DropOnRowTargetInfo's name has to be identical to the dropOnRowName's value.

Prerequisites

  • You have created a Web Dynpro Development component with the usual units.
  • You have created a node called TableData that contains the table data.
  • You have created a Table UI element as described in Implementing Tables .

Procedure

  1. Create a new context attribute in the TableData node called dropOnRowName . of type String .
  2. Bind the table's dropOnRowName property to this context attribute.
  3. To set the values for the TableData node, insert the following code into the wdDoInit method of view controller: 
    for (int i =0; i<4; i++){
      ITableDataElement elem = wdContext.createAndAddTableDataElement();
      if (i%2==0){
         elem.setDroponRowName("yes");
         elem.setIcon("~IconLarge/SuccessMessage");
         elem.setText("drop here");
      }
      else{
      elem.setDroponRowName("");
      elem.setIcon("~IconLarge/ErrorMessage");
      elem.setText("no drops");
      }
    }

    To define valid drop targets, set the dropOnRowName value to yes; - otherwise set the value to an empty string.

  4. To insert a DropOnRowTargetInfo into the Table, select the Table, open the context menu and choose Insert and then DropOnRowTargetInfo.
  5. Select this DropOnRowTargetInfo and enter yes for the name property. Now each row whose dropOnRowName's value is yes is connected to this DropOnRowTargetInfo.
  6. Specify the tag property for this DropOnRowTargetInfo for example myNamespace:com.myCompany.success
  7. To define a drag source, insert an Image into the view and insert a DragSourceInfo. into this Image.
  8. Specify the same value for the tag property, in this case: myNamespace:com.myCompany.success.
  9. Implement an action handler for the Table's onDrop event accordingly.