Edit/Delete function for Datatable Angular Firebase

[kiempoturner]

Hi, I need your help to add these functions into the datatable, Ive managed to add the button but its not working with ng-click.

view:

   <div class="box">
      <div class="box-header">
        <h3 class="box-title">SENARAI ENTRI INFO TERKINI</h3>
      </div>
    <div class="box-body">
      <table id="example" class="table table-striped" datatable="" dt-options="posts"></table>
    </div>
  </div>

script:

            var getPosts = function() {
                             var postsRef = new Firebase("https://yourdev.firebaseio.com").child('/posts');
                             var postsList = $firebaseArray(postsRef);

             var defer = $q.defer();

             postsList.$loaded(function(data) {
              defer.resolve(data);
             });
             return defer.promise;
             };

            $scope.posts = DTOptionsBuilder.fromFnPromise(function() {
            return getPosts();
            }).withPaginationType('full_numbers').withDisplayLength(10).withOption('columns', [
            {'title':'Tajuk Entri','data':'title'},
            {'title':'Juru Entri','data':'post_by'},
            {'title':'Tarikh Entri','data':'date'},
            {'title':'Masa Entri','data':'time'},
            {'title':'Isi Entri','data':'message'},
            {
            title: 'Actions',
            data: null,
            className: 'center',
            defaultContent: '<button type="button" ng-click="Edit()" class="btn btn-warning"><i class="fa fa-edit"></i></button><button type="button" ng-click="Delete()" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>'

            }
            ]);
$scope.Edit = function() {
    console.log('Edit');
};
$scope.Delete = function() {
    console.log('Delete');
};

[l-lin]

Please see the documentation's example.

[kiempoturner]

Try that,this time it doesnt render the buttons. can you help inspect it? it shows only object

Script

var getPosts = function() {

 var postsRef = new Firebase("https://dev-g153.firebaseio.com").child('/posts');
 var postsList = $firebaseArray(postsRef);
 var defer = $q.defer();
 postsList.$loaded(function(data) {
  defer.resolve(data);
 });
 return defer.promise;
};

$scope.posts = DTOptionsBuilder.fromFnPromise(function() {
        return getPosts();
    })
    .withPaginationType('full_numbers').withDisplayLength(10).withOption('createdRow',createdRow
    );
    $scope.dtColumns = [
    DTColumnBuilder.newColumn('title').withTitle('Tajuk Entri'),
    DTColumnBuilder.newColumn('post_by').withTitle('Juru Entri'),
    DTColumnBuilder.newColumn('date').withTitle('Tarikh Entri'),
    DTColumnBuilder.newColumn('time').withTitle('Masa Entri'),
    DTColumnBuilder.newColumn('message').withTitle('Isi Entri'),
    DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
    ];


    var createdRow = function (row, data, dataIndex) { 
        $compile(angular.element(row).contents())($scope);
    }
    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="delete()">' +
        '   <i class="fa fa-trash-o"></i>' +
        '</button>';
    }

[kiempoturner]

it seems that I cant call the actionsHtml var. I rendered within, my problem is solved I guess.

.renderWith(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="delete()">' +
        '   <i class="fa fa-trash-o"></i>' +
        '</button>';
    })

[kiempoturner]

Turns out I have problem in calling the edit and deleteRow functions too. Its not calling the function, Im not sure what may have caused this. I the functions working well if the buttons is outside of the columns but not within.

    $scope.dtColumns = [
    DTColumnBuilder.newColumn('title').withTitle('Tajuk Entri'),
    DTColumnBuilder.newColumn('post_by').withTitle('Juru Entri'),
    DTColumnBuilder.newColumn('date').withTitle('Tarikh Entri'),
    DTColumnBuilder.newColumn('time').withTitle('Masa Entri'),
    DTColumnBuilder.newColumn('message').withTitle('Isi Entri'),
    DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(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>';
        })
    ];

$scope.edit = function () {
    alert('can edit');
}

$scope.deleteRow = function (id) {
    alert('can delete');
}

[l-lin]

You can't use actionsHtml because you are using it after before declaring it. You either declare it before assigning in your $scope.dtColumns or declare it as a function.

[kiempoturner]

Got that solved thanks!. How about the edit & delete function? I cant seem to call them

[l-lin]

It's the same with createdRow. Declare it before assigning it to $scope.dtOptions.

[kiempoturner]

Here's my current code. The only thing not working is edit & deleteRow . actionsHtml & createdRow working perfectly.

    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>';
    }

    $scope.edit = edit;
    $scope.deleteRow = deleteRow;
    $scope.message = '';
    $scope.dtInstance = {};
    $scope.posts = DTOptionsBuilder.fromFnPromise(function() {
        return getPosts();
    })
    .withPaginationType('full_numbers').withDisplayLength(10).withOption('createdRow', createdRow
    );
    $scope.dtColumns = [
    DTColumnBuilder.newColumn('title').withTitle('Tajuk Entri'),
    DTColumnBuilder.newColumn('post_by').withTitle('Juru Entri'),
    DTColumnBuilder.newColumn('date').withTitle('Tarikh Entri'),
    DTColumnBuilder.newColumn('time').withTitle('Masa Entri'),
    DTColumnBuilder.newColumn('message').withTitle('Isi Entri'),
    DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
    ];

    var createdRow = function (row, data, dataIndex) { 
        $compile(angular.element(row).contents())($scope);
    }

[l-lin]

As I said, declare the createdRow before assigning it to $scope.dtOptions or declare it as a function...

[kiempoturner]

Silly me, i keep getting this error ReferenceError: $compile is not defined . Turns out I forgot to reference it at the controller. I am so sorry man. Thank you!