Skip to Content
avatar image
Former Member

Drag and Drop in Responsive Table to Reorder columns

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • 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

    Add comment
    10|10000 characters needed characters exceeded