Table row Sorting not working ui5

[former_member816488]

HI All

I have been looking into a table, it is sorted using .sortable() jQuery method.

There are two views booklet and a table view.

Booklet view is a fragment where table view is xml view.

There are methods to capture the row index and update the sequence properly.

The method for booklet view is working fine but the method for table view sorting is not working.

When the row is dragged on table view and placed on the desired row in the update call the row index is not changing.

Could someone please help me with this!

Thanks in advance!

Sorting method for Booklet View:

bookletTbl.addEventDelegate({
                	onAfterRendering: function(oEvent) {
                		var bookTblSortableElm = $("#" + oEvent.srcControl.getId() + "-table tbody");
                		bookTblSortableElm.sortable({
                			start: function(event, ui) {
                				var tableId = ui.item[0].id;
        						tableId = tableId.split("-")[0];
        						var tableElm = sap.ui.getCore().byId(tableId);
        						tableElm.collapseAll();
                			},
        					update: function(event, ui) {
        						var tableId = ui.item[0].id;
        						tableId = tableId.split("-")[0];
        						var tableElm = sap.ui.getCore().byId(tableId);
        						var tableData = tableElm.getModel().getData();
        						var index = 0;
        						$(this).children().each(function(i, el) {
        							if(tableData[el.dataset.sapUiRowindex]) {
        								index += 1;
        								tableData[el.dataset.sapUiRowindex].ArticleSequenceId = index;
        							}
                                });
        						tableData = _.sortBy(tableData, 'ArticleSequenceId');
        						tableElm.getModel().setData(tableData);
        						tableElm.rerender();
        					}
        				}).disableSelection();<br>

Sorting method for Table view:

 bindSortableForCatTopTbl: function() {
      this.catalogueTblView.addEventDelegate({
        onAfterRendering: function(oEvent) {
          var catTblSortableElm = $("#__xmlview0--idCatalogueTblViewTop tbody");
          catTblSortableElm.sortable({
            start: function(event, ui) {
              this.catalogueTblView.collapseAll();
            }.bind(this),
            update: function(event, ui) {
              var tableData= this.catalogueTblView.getModel().getData();
              var index = 0;
              $(this).children().each(function(i, el) {
                if (tableData[el.dataset.sapUiRowindex]) {
                  index += 1;
                  tableData[el.dataset.sapUiRowindex].ArticleSequenceId = index;
                }
              });
              tableData = _.sortBy(tableData, 'ArticleSequenceId');
              this.catalogueTblView.getModel().setData(tableData);
              this.catalogueTblView.rerender();
            }.bind(this)
          }).disableSelection();
          var addNewBtnAccess = this.newTblViewTopBtn.getEnabled();
          if (addNewBtnAccess) {
            catTblSortableElm.sortable("enable");
          } else {
            catTblSortableElm.sortable("disable");
          }
        }.bind(this)
      });
    },<br>