Action Button loosing it's binding on browser resizing, Please Help

[nitin27may]

Hi @l-lin

I followed the example from angular-datatables advance example Bind Angular Directive and used it together with the Responsive plugin. but it's loosing action filed's Binding.

I have follow all comments from the issue #324 but no luck,

it's working fine in full screen.

Here is the Code:

'use strict';
angular.module('showcase.withResponsive', ['datatables'])
.controller('WithResponsiveCtrl', WithResponsiveCtrl);

function WithResponsiveCtrl($scope, $compile,DTOptionsBuilder, DTColumnBuilder) {
var edit = function() {
alert('edit!');
};

var deleteRow = function() {
    alert('delte!');
};
var actionsHtml = function (data, type, full, meta) {
return '<button class="btn btn-warning" ng-click="edit()">' +
    '   <i class="fa fa-edit"></i>' +
    '</button>&nbsp;' +
    '<button class="btn btn-danger" ng-click="deleteRow()">' +
    '   <i class="fa fa-trash-o"></i>' +
    '</button>';
};
 var createdRow = function (row, data, dataIndex) { 
    $compile(angular.element(row).contents())($scope);
};

$scope.edit = edit;
$scope.deleteRow = deleteRow;
$scope.message = '';
$scope.dtInstance = {};


$scope.dtOptions = DTOptionsBuilder.fromSource('http://127.0.0.1:1771/data.json')
    .withPaginationType('full_numbers')
.withOption('createdRow', createdRow)
    .withOption('responsive', true);
$scope.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('firstName').withTitle('First name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
    DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
];

}

Table HTML

                           <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="row-border hover" width="100%"></table>

[l-lin]

Unfortunately, it's not possible to bind the angular directive inside the responsive extension. I don't really know how to do it.

what about the idea of compiling the content of the child after showing it ?

something like this :

    $compile(angular.element(row).contents())($scope);

[kevintc]

@nitin27may : I didn't use the responsive plugin but implemented something pretty similar to what you are trying to achieve (I think).
I used the .renderWith(actionsHtml) method (from #bindAngularDirective) and on a button click, I show the supplementary row with the following method :

function actionHtml(data) {
            return '' +
            '<button class="btn btn-primary btn-xs" context-menu="menuOptions" ng-click="vm.rowDetailsClickHandler($event)">' +
            '   <i class="fa fa-plus-square"></i>' +
            '</button>'
}

function rowDetailsClickHandler(e) {
    var post_data = {};
    ...
    if (row.child.isShown()) {
            row.child.hide();
            tr.find('i.fa-minus-square').toggleClass('fa-plus-square fa-minus-square');
            tr.removeClass('shown');
        }
        else {
            function displayDetailsRow(data) {
                "use strict";
                row.child(data).show();
                tr.find('i.fa-plus-square').toggleClass('fa-plus-square fa-minus-square');
                tr.addClass('shown');
                compileElement(tr.next('tr'));
            }
            $http.post('http://127.0.0.1:5000/rowdetails/', post_data).success(displayDetailsRow);
        }
}

function compileElement(e) {
        "use strict";
        return $compile(angular.element(e).contents())($scope);
}

[DavidePastore]

@l-lin is it fixed?

[marcokorb]

Hello, just to share an option to bind a directive in child rows that worked for me.

If you check the dataTables.responsive.js, Responsive object has a static object called ina property defaults with the following code:

details{
   renderer: function ( api, rowIdx, columns ) {
      var data = $.map( columns, function ( col, i ) {
            return col.hidden ?
                  '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                        '<span class="dtr-title">'+
                              col.title+
                        '</span> '+
                        '<span class="dtr-data">'+
                            col.data+
                        '</span>'+
                   '</li>' : 
                   '';
               }).join('');

               return data ?
                    $('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
                    false;
           }}`

So, in the controller you must copy the code above and simply turn that into a function:

  function renderer( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                     return col.hidden ?
                         '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<span class="dtr-title">'+
                                  col.title+
                            '</span> '+
                            '<span class="dtr-data">'+
                                col.data+
                           '</span>'+
                       '</li>' : 
                       '';
                   }).join('');

                   return data ?
                       $compile(angular.element($('<ul data-dtr-index="'+rowIdx+'"/>').append( data )))($scope) :  
                        false;
               }

And now we set the responsive option with our new function:

DTOptionsBuilder
     .fromFnPromise(fnPromise)
     .withOption('responsive', {
          details: {
              renderer: renderer
          }
     })

[Hasan-git]

Great marcokorb !
good solution .
adding this function to the controller fixed it :

 function renderer(api, rowIdx, columns) {
                var data = $.map( columns, function ( col, i ) {
                     return col.hidden ?
                         '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<span class="dtr-title">'+
                                  col.title+
                            '</span> '+
                            '<span class="dtr-data">'+
                                col.data+
                           '</span>'+
                       '</li>' : 
                       '';
                   }).join('');
                   return data ?
                       $compile(angular.element($('<ul data-dtr-index="'+rowIdx+'"/>').append( data )))($scope) :  
                        false;
               }

and add responsive option

.withOption('responsive', {
          details: {
              renderer: renderer
          }
     })

[yonihei]

I am not able to use md-button or md-checkbox inside the opened box when clicking on the "plus".
Moreover, the ng-repeat did not work well for me.

<button> {{ song.finalFileSuggestions[0].fileName }}<br>{{ song.finalFileSuggestions[0].filePath }} </button>
<button> {{ song.finalFileSuggestions[1].fileName }}<br>{{ song.finalFileSuggestions[1].filePath }} </button>
<button> {{ song.finalFileSuggestions[2].fileName }}<br>{{ song.finalFileSuggestions[2].filePath }} </button>
<button> {{ song.finalFileSuggestions[3].fileName }}<br>{{ song.finalFileSuggestions[3].filePath }} </button>
<button> {{ song.finalFileSuggestions[4].fileName }}<br>{{ song.finalFileSuggestions[4].filePath }} </button>


<div ng-repeat="suggestion in song.finalFileSuggestions">inside repeat</div>

//moreover i cannot use my object song with ng-click, it becomes undefined
<button style="text-align:left;" ng-click="vm.changeIsM3uChecked(song, 0)"> 

The result of the silly 4 lines was just fine, however the ng-repeat did nothing.
However, when using a static array of numbers it did work, but indexing with it causedvery weird result (i can explain if required).

i generally get the impression that everything is different while coding in that special box with this $compile :[

Im not sure whether i have a stupid bug in my code or it is a real problem.
Could anyone use md-button for example in his code? (button is working well)

Thanks!

(i have abandoned this plugin. If admin finds it right, delete my post. thanks.)

[urvashi-bhatt]

@marcokorb it is very good solution but in my case after adding this solution in my responsive plugin ng-click are worked but my data are not responding..

In my data table data are responding during full screen mode but not responding in collapse mode
help me and thanks in advanced