Skip to Content
author's profile photo Former Member
Former Member

Drag & Drop rows between 2 tables

Hello,

I want to implement a logic in which the user should be able to drag and drop rows from Table1 to Table2. I used jquery ui plugin for it. But even after moving the rows, the data (json data binded to the table) of the table is not updated.

Assume below are the two tables:

Header 1 Header 2 index 1 material 1 index 2 material 2 Header 1 Header 2 index 6 Material 6 index 7 Material 7

Now, if I move 1st row of Table1 to Table2, UI is working fine and is shown like this:

Header 1 Header 2 index 2 material 2 Header 1 Header 2 index 6 Material 6 index 1 material 1 index 7 Material 7

But, actual json data is still not updated, ie, table1 and table2 still have 2 rows each.

How to update the json data associated to the table after moving the rows?

Please help me.

Thanks & Regards

Shubham Dehariya

Also, I am attaching the source code:

<!DOCTYPE HTML>
<html>
       <head>
              <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <script src="resources/sap-ui-core.js"
                      id="sap-ui-bootstrap"
                      data-sap-ui-libs="sap.ui.commons,sap.ui.table"
                      data-sap-ui-theme="sap_goldreflection" >
              </script>
              <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->


   <script>
     //Creation of a layout on which 2 tables will be added
     var oMasterLayout = new sap.ui.commons.layout.MatrixLayout({id:"idMasterLayout",layoutFixed :false});
     
      //Creation of the table and adding columns
    var oTableComponent1 = new sap.ui.table.Table({
    id : "idTableComponent1",
    visibleRowCount: 5,  
    navigationMode : sap.ui.table.NavigationMode.Paginator,
    width:"25%"
    });        
    oTableComponent1.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Item"}),
    template: new sap.ui.commons.TextView().bindProperty("text", "Item"),
    width:"10%"
    }));
    oTableComponent1.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "IFS Material No."}),
    template: new sap.ui.commons.TextView().bindProperty("text","Material")
    }));
   
    //Adding above table to the layout
    oMasterLayout.addRow(new sap.ui.commons.layout.MatrixLayoutRow({
  cells:[new sap.ui.commons.layout.MatrixLayoutCell({
  content: [oTableComponent1]
  })]
  }));
   
       //Creation of the table and adding columns
    var oTableComponent2 = new sap.ui.table.Table({
    id : "idTableComponent2",
    visibleRowCount: 5,
    navigationMode : sap.ui.table.NavigationMode.Paginator,
    width:"25%"
    });        
    oTableComponent2.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Item"}),
    template: new sap.ui.commons.TextView().bindProperty("text", "Item"),
    width:"10%"
    }));
    oTableComponent2.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "IFS Material No."}),
    template: new sap.ui.commons.TextView().bindProperty("text","Material")
    }));
   
    //Adding above table to the layout
    oMasterLayout.addRow(new sap.ui.commons.layout.MatrixLayoutRow({
  cells:[new sap.ui.commons.layout.MatrixLayoutCell({
  content: [oTableComponent2]
  })]
  }));
    oMasterLayout.addRow(new sap.ui.commons.layout.MatrixLayoutRow({
  cells:[new sap.ui.commons.layout.MatrixLayoutCell({
  content: [new sap.ui.commons.Button({text:"Final Values"})]
  })]
  }));  
    oMasterLayout.placeAt("content");
   
      //Setting data to above 2 tables
      var initialTableData1 = [{Item: "1",Material:"Mat1"},
                                 {Item: "2",Material:"Mat2"},
                                 {Item: "3",Material:"Mat3"},                          
                                ];   
        var oModel1 = new sap.ui.model.json.JSONModel();
        oModel1.setData(initialTableData1);
        oTableComponent1.setModel(oModel1).bindRows("/");
        
        var initialTableData2 = [{Item: "6",Material:"Mat6"},
                             {Item: "7",Material:"Mat7"},
                             {Item: "8",Material:"Mat8"},                              
                            ];   
        var oModel2 = new sap.ui.model.json.JSONModel();
        oModel2.setData(initialTableData2);
        oTableComponent2.setModel(oModel2).bindRows("/");       
        
  //Adding jquery ui plugin
        $.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');
       
$(function() {      
            $("#idTableComponent1 tbody, #idTableComponent2 tbody").sortable({
                 connectWith : ".ui-sortable"            
            }).disableSelection();
       });


     </script>
       </head>
       <body class="sapUiBody" role="application">
              <div id="content"></div>
       </body>
</html>
Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

5 Answers

  • Best Answer
    Posted on Mar 27, 2014 at 01:04 PM

    You are only updating the DOM with your drag-n-drop (i.e. moving the HTML of a tablerow from one table to another) but this does of course not update the underlying model of the table.

    You should also update the source and target model accordingly

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Mar 27, 2014 at 03:41 PM

    As Robin said, we have to update the underlying model of the table. So, what I did after dropping a row to another table is I just called the cancel method so that any changes done in the UI is reverted. Meanwhile, I took the index of the selected row and using that index I modified the json model and after the modification I just called the updateBinding method.

    So, the actual user will think that the row is dragged & dropped to the table. But we are using our UI5 way 😊

    Regards,

    Shubham

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Mar 27, 2014 at 11:29 AM

    hi shubham dehariya,

    I am also facing the same scenario, did you find any solution for this ?

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Mar 28, 2014 at 11:20 AM

    Thanks for the idea 😊. Let me try it !

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Oct 12, 2015 at 11:40 AM

    This message was moderated.

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.