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

https://github.com/jenishprabhu/TableExtend

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);