Skip to Content
Author's profile photo Jenish Prabhu

SAPUI5 Copy & Paste using drag drop – Table

Copy & Paste (Drag – Drop) Functionality

In SAPUI5 we have 2 controls for table (i) sap.ui.table.Table (ii) sap.m.Table

In UI5 tables let us say if we have multi select combo box or text field in the aggregation row bindings it is tedious job for us to modify each row if we want to copy single value and copy to multiple rows. In order to achieve this functionality I have used drag and drop feature of jQuery and attached the event in the row elements.

As shown in the below example Brand value is having Multi Select Combo Box. If we have to copy and paste same value to other rows it is time consuming task and not a good user experience.


So to improve user experience we can achieve copy & paste functionality using drag and drop feature of jQuery



Sample Code is available in github


Code Explained:


STEP1: Reading each row by id

$(“[id^=dfReqColDropdown]”).each(function() {


STEP2: Drag event is attached

$(“#” + objEleID).prop(“draggable”, “true”);

$(“#” + objEleID).on(‘dragstart’, function (event)

STEP3: Drop event is attached

$(“#” + objEleID).prop(“ondrop”, “drop(event)”);

$(“#” + objEleID).on(“dragover”, function (event)

STEP4: On drop event value is fetched from drag and replicating the value

var dragVal = $(“#” + originCtrlID).val();

$(“#” + this.getAttribute(“id”)).val(dragVal);



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli

      Nice Blog..

      Author's profile photo Former Member
      Former Member

      Low Interest