cancel
Showing results for 
Search instead for 
Did you mean: 

Drag & Drop rows between 2 tables

Former Member
0 Kudos

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 1Header 2
index 1material 1
index 2material 2
Header 1Header 2
index 6Material 6
index 7Material 7

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

Header 1Header 2
index 2material 2
Header 1Header 2
index 6Material 6
index 1material 1
index 7Material 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>

Accepted Solutions (1)

Accepted Solutions (1)

Qualiture
Active Contributor
0 Kudos

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

Answers (4)

Answers (4)

Former Member
0 Kudos

This message was moderated.

Former Member
0 Kudos

Thanks for the idea . Let me try it !

0 Kudos

Thread is now locked to prevent further necromancy.

Regards, Mike (Moderator)

SAP Technology RIG

Former Member
0 Kudos

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

Former Member
0 Kudos

Can you share your code by chance? I am getting stuck with this.

Former Member
0 Kudos

Its my employer's property, can't share it

Former Member
0 Kudos

No worries. Figured it out.  

Former Member
0 Kudos

This message was moderated.

Former Member
0 Kudos

hi shubham dehariya,

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