2

In my angular app, I'm creating table dynamically from javascript. 

$("#tableName").html("<table id='dtData' name='dtData' dt-options='dtOptions' dt-columns='dtColumns' class='table table-striped table-bordered'></table>");

here is how I'm generating columns 

var header = data[0], dtColumns = [];

          //create columns based on first row in dataset
          for (var key in header) 
          {
             // console.log(key);
              if(key == "sendEmail")
              {
                  dtColumns.push(DTColumnBuilder.newColumn(key).withTitle("Send Email").renderWith(actionsHtml));

              }
              else
              {
                dtColumns.push(DTColumnBuilder.newColumn(key).withTitle(key));
              }
          }

this is actionsHtml function

    function actionsHtml(data, type, full, meta) {

    return '<input type="checkbox" name="sendEmail" value="' + data+'">';
}

And here I'm finalizing this table

 $scope.dtColumns = dtColumns;

          //create options
          $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('data', data)
            .withOption('dataSrc', '');

          //initialize the dataTable
          angular.element('#dtData').attr('datatable', '');
          $compile(angular.element('#dtData'))($scope);

It creates table and then a column of checkbox type but it doesn't bind value to checkbox. Here is table Column

and console value of column

enter image description here

But the problem is.. chechbox column binding is not working.. either I check/uncheck it from html or in javascript, it does not make any change in table/ original list.

Any kind of help will be appreciated.

Naila Akbar
  • 3,033
  • 4
  • 34
  • 76
  • 1
    Any chance you could make a [Plunker](https://plnkr.co/) demonstrating the issue? – Fissio Dec 05 '16 at 10:36
  • actually am too bad to make a plunker but I try – Naila Akbar Dec 05 '16 at 10:39
  • 1
    Use `checked` attribute instead of `value` ([doc](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input/checkbox)). You compile the template but there's no binding in it so binding doesn't work, use ng-bing or ng-checked instead of `+ data +`. – etiennecrb Dec 05 '16 at 10:55

1 Answers1

0

You can resolve this issue by simple if/else of your data.. if data is true, add checked property else not. And then capture onClick event and pass some kind of Id to that function and update values accordingly..

Something like this

if(key == "SendEmail")
{                   

dtColumns.push(DTColumnBuilder.newColumn(key).withTitle("Send Email")
.renderWith(function(data, type, full, meta) {
if(data){
            return '<input type="checkbox" checked="checked" name="SendEmail" onClick="SendEmail_Clicked('+Id+')">'; 
        }
else
    {
        return '<input type="checkbox"  name="SendEmail"  onClick="SendEmail_Clicked('+Id+')">'; 
    }
}));}

To call SendEmail_Clicked, you first have to bind it with calling function, otherwise it will not work

var dt = this;
dt.SendEmail_Clicked = SendEmail_Clicked;

For more details, you can read this

Tahreem Iqbal
  • 985
  • 6
  • 17
  • 43