Drag and Drop on Table rows

[Former Member]

Hi,

I´m currently building a Desktop Application with SAPUI5 and am trying to get a Table row draggable, e.g. sortable. I was looking at this code http://jsbin.com/iciyof/2/edit and tried to adapt it to the Table rows from just one table- later I want to drag a Row from one Table to another. So there are a few problems. The table´s size is bound to a model which is filled at sometime, when a textfield value is changed. After that, I try to run through the table via getRows and set them sortable.

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

...

...

...

textfield.change(){

     sap.ui.getCore().byId("positable").bindRows("/LieferkopfSatz('"+this.getLiveValue()+"')/Lieferpositionen");

     sap.ui.getCore().byId("positable").setVisibleRowCount(sap.ui.getCore().byId("positable")._getRowCount());

     for( var i = 0; i <sap.ui.getCore().byId("positable")._getRowCount();++i) {

          $(jQuery.sap.byId("positable-rows-row"+i)).sortable();

     };

};

So i read, that Controls can only be made draggable or sortable in the onAfterRendering() function. Is this right? Because that would explain, why nothing happens, when I try to make the rows sortable or draggable on their creation via textfieldChange().

[waseemsvm]

                <table:Table rows="{/ProductCollection}" visibleRowCountMode="Auto">
                    <table:columns>
                        <table:Column>
                            <table:label>
                                <Text text="Name" />
                            </table:label>
                            <table:template>
                                <Text text="{Name}" />
                            </table:template>
                        </table:Column>
                        <table:Column>
                            <table:label>
                                <Text text="Category" />
                            </table:label>
                            <table:template>
                                <Text text="{Category}" />
                            </table:template>
                        </table:Column>
                        <table:Column>
                            <table:label>
                                <Text text="Quantity" />
                            </table:label>
                            <table:template>
                                <Text text="{Quantity}" />
                            </table:template>
                        </table:Column>
                    </table:columns>
                    <table:dragDropConfig>
                        <dnd:DragDropInfo sourceAggregation="rows" targetAggregation="rows" dropPosition="Between" dragStart=".onDragStart" drop=".onDrop" />
                    </table:dragDropConfig>
                </table:Table>

-------------------------------------------------------------------------------------------------------------------

 onDrop: function (oEvent) {
      /**
       * @type {sap.ui.core.Control}
       */
      let draggedControl = oEvent.getParameter("draggedControl");
      let oDraggedContext = draggedControl.getRowBindingContext();
      let oDraggedData = oDraggedContext.getProperty();
      let droppedControl = oEvent.getParameter("droppedControl");
      let oDroppedContext = droppedControl.getRowBindingContext();
      let oDroppedData = oDroppedContext.getProperty();
      /**
       * @type {sap.ui.model.json.JSONModel}
       */
      let oModel = sap.ui.getCore().getModel();
      // oModel.setProperty(
      let sPath = draggedControl.getParent().getBinding("rows").getPath();
      /**
       * @type {Array}
       */
      let oData = oModel.getProperty(sPath);
      let idxDraggedData = oData.indexOf(oDraggedData);
      let idxDroppedData = oData.indexOf(oDroppedData);
      if (idxDraggedData != -1) {
        oData.splice(idxDraggedData, 1);
        oData.splice(idxDroppedData, 0, oDraggedData);
        oModel.checkUpdate(true);
      }
    },

[waseemsvm]

App.view.xml:

<table:Table rows="{/ProductCollection}" visibleRowCountMode="Auto">
                    <table:columns>
                        <table:Column>
                            <table:label>
                                <Text text="Name" />
                            </table:label>
                            <table:template>
                                <Text text="{Name}" />
                            </table:template>
                        </table:Column>
                        <table:Column>
                            <table:label>
                                <Text text="Category" />
                            </table:label>
                            <table:template>
                                <Text text="{Category}" />
                            </table:template>
                        </table:Column>
                        <table:Column>
                            <table:label>
                                <Text text="Quantity" />
                            </table:label>
                            <table:template>
                                <Text text="{Quantity}" />
                            </table:template>
                        </table:Column>
                    </table:columns>
                    <table:dragDropConfig>
                        <dnd:DragDropInfo sourceAggregation="rows" targetAggregation="rows" dropPosition="Between" dragStart="onDragStart" drop=".onDrop" />
                    </table:dragDropConfig>
                </table:Table>

App.controller.js:

 onDrop: function (oEvent) {
      /**
       * @type {sap.ui.core.Control}
       */
      let draggedControl = oEvent.getParameter("draggedControl");
      let oDraggedContext = draggedControl.getRowBindingContext();
      let oDraggedData = oDraggedContext.getProperty();
      let droppedControl = oEvent.getParameter("droppedControl");
      let oDroppedContext = droppedControl.getRowBindingContext();
      let oDroppedData = oDroppedContext.getProperty();
      /**
       * @type {sap.ui.model.json.JSONModel}
       */
      let oModel = sap.ui.getCore().getModel();
      // oModel.setProperty(
      let sPath = draggedControl.getParent().getBinding("rows").getPath();
      /**
       * @type {Array}
       */
      let oData = oModel.getProperty(sPath);
      let idxDraggedData = oData.indexOf(oDraggedData);
      let idxDroppedData = oData.indexOf(oDroppedData);
      if (idxDraggedData != -1) {
        oData.splice(idxDraggedData, 1);
        oData.splice(idxDroppedData, 0, oDraggedData);
        oModel.checkUpdate(true);
      }
    },

[Former Member]

Hi again,

so I got it sortable right now, but actually sortable isn´t quite what i was looking for. I just need to drag a Table row to another Table. Then i want to know which row was dragged to insert that row into the second Table. With the sortable interface the dragged row is deleted from the Table it was dragged out of, but I need the row to be copied to the second Table. So I think, the draggable Interface is more what I´m looking for but I´ve got some trouble getting it working. But there´s another Problem, I got with the sortable interface, too. The Problem is, that I only get the cells sortable or the whole table. When i try it with this code

$(document).ready(function() {

                          setTimeout( function() {

                               $(jQuery.sap.byId("positable-rows-row0")).sortable({

                                    connectWith : ".ui-sortable"

                                }).disableSelection();

                          },1000);                   

});

all the cells are sortable.I also tried it by ("positable")).sortable or ("positable-rows")).sortable and ("positable-table")).sortable but these don´t do the trick either, they just make the whole table sortable, so that i can put a whole table into another. So I read in the Documentation of the sortable Interface, that to get table rows sortable, I´ll have to set the <tbody> sortable. I´m quite new to all of this so have no idea on how to code this. I found the <tbody> part in chrome and I don´t really know what to do now.

Non the less, there is another Problem with the draggable Interface. I tried

$(document).ready(function() {

                          setTimeout( function() {

                               $(jQuery.sap.byId("positable-rows-row0")).draggable({

                                    connectWith : ".ui-draggable"

                                }).disableSelection();

                          },1000);                   

});

and nothing happens. I tried it with an image and it worked just fine.

So maybe someone got an idea on this?

Regards,

Hendrik

[Former Member]

Hi Hendrik,

The jQuery external library seems to load in indeterminate time frame that's the reason your code doesn't seem to work. You could load the jQuery UI library locally to get in working once the dom is loaded.

Just try this solution where i have setTimeout to execute the sortable method... but still this isn't the appropriate solution

$(document).ready(function() {
          setTimeout( function() {
                    $("#lb1-list, #lb2-list").sortable({
                              connectWith : ".ui-sortable"
                    }).disableSelection();
          },1000);
});

Regards,

Ajain

[Former Member]

Hi Ajain,

thanks, that did the trick.

Regards,

Hendrik