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
STEP1: Reading each row by id
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);