Drag and Drop in Responsive Table to Reorder columns

[Former Member]

Hello,

I have a n sap.m.table Table(Responsive Table) for which I have to make the columns draggable and droppable in order to rearrange them. The functionality for Drag and drop should be similar to that of the sap.ui.table Table (Grid Table). This consists of two parts

1. Making the Entire column Draggable. So Far I am able to make individual row elements Draggable but not able to append individual row items to the column to make the entire column Draggable.
2. Making the Table droppable so that the Columns can be rearranged dynamically when rearranged on the table.

I want to know if this is achievable using jQuery and if not ,why. I am a beginner in jQuery so am facing some trouble with this, Would really appreciate some guidance.

Thanks
Abhinav

[former_member231952]

Hi Abhinav Prasad,

please have a look at this below link

https://stackoverflow.com/questions/37209285/how-can-i-make-a-sap-m-table-sortable-by-drag-and-drop

add these libaries to the script

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');

$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');

and in controller in after rendering function

this.$().find(".sapMListTblRow.sapMLIBFocusable.sapMListTblHeader").sortable();

here .sapMListTblRow.sapMLIBFocusable.sapMListTblHeader these are the classes of the column that you can find by inspecting element

Similarly if you want to make table draggable just use classes of table instead.

Thanks and Regards,

Anjali Thakur

[former_member562724]

This solution only make the header sortable and does not move the corresponding data of the column to the new position.