UI-Sortable is not working with dynamic Angular Datatables

Question

I am using Angular DataTables in my application and created a dynamic table with nested rows and trying to add sortable functionality on parent rows. I have tried to add ui-sortable but not working.

Here is the Html Code:

    <div class="panel-body table-responsive" ng-show="lstFormatFileMetaDetails != null">
       <table id="tblFileMetaColumnsDetail" name="tblFileMetaColumnsDetail" datatable="" dt-options="dtFileMetaColumnsDetailOptions" dt-columns="dtFileMetaColumnsDetailColumns" dt-instance="dtFileMetaColumnsDetailInstance" class="display table table-striped table-bordered table-hover">
          <!--  THIS TABLE IS GENERATED DYNAMICALLY -->
       </table>
    </div>

Here is the javascript Code:

     //CREATE ANGULAR DATA TABLE
            function createTable() {
                $scope.dtFileMetaColumnsDetailInstance = {};
                $scope.dtFileMetaColumnsDetailOptions = DTOptionsBuilder.fromSource($scope.lstFormatFileMetaDetails)
                    .withOption('data', $scope.lstFormatFileMetaDetails) //pass data source here
                    .withOption('dataSrc', '')
                    .withOption('rowCallback', rowCallback)
                    .withOption('createdRow', createdRow)
                    .withLanguage({                 
                        loadingRecords: "No data available in table"                    
                    })
                    .withButtons([
                        'excel',
                            {
                                text: 'Reset',
                                action: function (e, dt, node, config) {
                                    $("#tblFileMetaColumnsDetail").DataTable().search("").draw();
                                }
                            }]);

                //define columns
                var metaColName = $scope.$translate("Meta Col Name");
                var mapping = $scope.$translate("Mapping");
                var minWidth = $scope.$translate("Min Width");
                var incrementalUnique = $scope.$translate("Incremental Unique");
                var correctionUnique = $scope.$translate("Correction Unique");


                var action = $scope.$translate("Action");
                $scope.dtFileMetaColumnsDetailColumns = [
                    DTColumnBuilder.newColumn('btn').withTitle('').withOption('width', '5%'), //this is to show the '+' button
                    DTColumnBuilder.newColumn('#').withTitle('#'),
                    DTColumnBuilder.newColumn('metaColumnName').withTitle(metaColName),
                    DTColumnBuilder.newColumn('primaryColumnName').withTitle(mapping),
                    DTColumnBuilder.newColumn('minWidth').withTitle(minWidth),
                    DTColumnBuilder.newColumn('isIncrementalUnique').withTitle(incrementalUnique),
                    DTColumnBuilder.newColumn('isCorrectionUnique').withTitle(correctionUnique),       
                    DTColumnBuilder.newColumn('actionButton').withTitle(action).withOption('width', '9%'),

                ];
                var b = document.querySelector("#tblFileMetaColumnsDetail tbody"); 
                if(b!=null){                    
                    b.setAttribute("ui-sortable","");   
                }

            }


            var id = 0;
            //CALLED WHEN ROW IS CREATED
            function createdRow(row, data, dataIndex) {
                $(row).attr('id', id);
                $(row).attr('class', 'ui-sortable-handle');
                // Recompiling so we can bind Angular directive
                $compile(angular.element(row).contents())($scope);

                id++;
            }


            /*************** End - HANDLING DATATABLE SUBGRID **************/

Here is the created table.

I have added ui-sortable attribute in tbody in createTable() function.and when I have see in inspect element, attribute is added successfully. but when I have added the same attribute in another static data table. it's working fine.

According to my understanding the issue is that ui-sortable working on ng-repeat. but I have created rows dynamically.

I did search on that but not get the exact solution. Any kind of help will be appreciated.

Answer 1

1- Listen to the language change to render the table afterwards.

  $rootScope.$on('$translateChangeEnd', function (event, lang) {
    $scope.dtInstanceDocsSign.rerender();
  });

2-Inside constructor function of your table

 var headerCallback = function( thead, data, start, end, display ) {
        $compile(angular.element(thead).contents())($scope);
 }

3-

     $scope.dtOptions(your name) = DTOptionsBuilder
      .newOptions()
      .withOption('headerCallback', headerCallback)
      ..........your code

   $scope.dtColumns = [
     DTColumnBuilder.newColumn('code').withTitle(`${'<span translate>'}${'TAG'}${'</span>'}`).renderWith(your_code).withClass('center-text'),
    .........

Works for me ;)