Skip to Content

i want to drag table row and drop it on ohter table row

pastedImage_1.png (121.6 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Oct 15, 2015 at 09:32 AM

    The following code is working as per my requirement.but it is working on chrome and not working in firfox.why?

    <!DOCTYPE HTML>

    <html>

      <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

        <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

                id="sap-ui-bootstrap"

                data-sap-ui-libs="sap.ui.commons,sap.ui.table"

                data-sap-ui-xx-bindingSyntax="complex"

                data-sap-ui-theme="sap_bluecrystal"></script>   

               

                 <script>

        // Include jquery UI plugins

        $.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');

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

       

      </script>

         

           <script>

        // Retrieve the button instance  and make it draggable

    /*    $(document).ready(function(){

          $("#oTable").draggable({

              helper: "clone"

          });

         

     

        }); */

       

       

        $(function() { 

            setTimeout( function() {

          

         $("#oTable tbody tr").draggable({

             helper: "clone",

               zIndex: 9999,

               cursor: "pointer",

             start: function(event) {

                // alert(this.parentNode.previousSibling.firstChild.childNodes[0].value);

           //    oSelectedId =this.parentNode.previousSibling.firstChild.childNodes[0].value;

                  },

              

            drag: function(event) {

                  $("#oTable div.sapUiTableCnt,#oTable div.sapUiTableCtrlScr").css("overflow","visible");

         },

         }); 

        

         $("#oTable1 tbody tr").droppable({

              drop: function(event){

                  alert();

             

               }

            });

        

        

           },500);

           

           

       });

      </script>

               

        <script type="text/javascript">

        var oTable = new sap.ui.table.Table({ 

            selectionMode: sap.ui.table.SelectionMode.Single,

              id : "oTable",

              columns: [ 

                new sap.ui.table.Column({ 

                  label: new sap.ui.commons.TextView({ 

                    text: "First name" 

                  }), 

                  template: new sap.ui.commons.TextView({ 

                    text: "{fname}" 

                  }) 

                }),

                new sap.ui.table.Column({ 

                  label: new sap.ui.commons.TextView({ 

                    text: "Last name" 

                  }), 

                  template: new sap.ui.commons.TextView({ 

                    text: "{lname}" 

                  })

                })

              ]

            });

            var model = new sap.ui.model.json.JSONModel({

              data: [

                {fname: 'John', lname: 'Doe', sex: 'M'},

                {fname: 'Mary', lname: 'Ann', sex: 'F'},

                {fname: 'Andy', lname: 'Gates', sex: 'M'},

                {fname: 'Betty', lname: 'Lu', sex: 'F'},

              ]

            });

            oTable.setModel(model);

            oTable.bindRows("/data");                     

            oTable.placeAt('content');

          

            var oTable1 = new sap.ui.table.Table({ 

                id : "oTable1",

              selectionMode: sap.ui.table.SelectionMode.Single,

                columns: [ 

                  new sap.ui.table.Column({ 

                    label: new sap.ui.commons.TextView({ 

                      text: "course" 

                    }), 

                    template: new sap.ui.commons.TextView({ 

                      text: "{course}" 

                    }) 

                  }),

                  new sap.ui.table.Column({ 

                    label: new sap.ui.commons.TextView({ 

                      text: "specialization" 

                    }), 

                    template: new sap.ui.commons.TextView({ 

                      text: "{specialization}" 

                    })

                  })

                ]

              });

         

              var model1 = new sap.ui.model.json.JSONModel({

                data: [

                  {course: 'mca', specialization: 'computer application'},

                  {course: 'mba', specialization: 'Bussiness Administration'},

                ]

              });

              oTable1.setModel(model1);

              oTable1.bindRows("/data");                     

              oTable1.placeAt('content');

        </script>

      </head>

      <body id="content" class="sapUiBody">

      </body>

    </html>

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 15, 2015 at 06:12 AM

    Hi Srinivas,

    Check this thread - http://scn.sap.com/thread/3485218

    Regards,

    Sai Vellanki.

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Sai

      the link given by you is different from my requirement.

      in that  row from first table is drag and droped in second table.

      in coding also they are used sort able property instead of draggable.they are simply making sorting of rows.

      but in my requirement i want to drop row on row of second table.its like assigning students to course.and row from first table also should not delete