Skip to Content
0

Drag and Drop in Responsive Table to Reorder columns

Nov 30, 2016 at 06:55 AM

284

avatar image
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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Anjali Thakur Nov 22, 2017 at 06:15 AM
-1

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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

0