How can I make the clicking of a button in an ng-grid table delete a row from the model?

Question

I have set up the following with ng-grid:

    var gridData = {};
    $scope.gridOptions = {
        data: 'gridData',
        enableCellEdit: true,
        multiSelect: false,
        columnDefs: [
            { field: 'testId', displayName: 'Test Id' },
            { field: 'name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
            { field: 'description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
            { field: '', cellTemplate: '<button ng-click="delete(row)">Delete</button>' }
        ]
    };

and:

   $scope.delete = function (row) {
      row.entity.$deleteData({ testId: row.entity.testId });
   }

This sends a HTTP message to the server which deletes the row. However the row still remains in the grid. How can I make it so the click of the delete button on a row also deletes a row from the gridData object?

Keshiakesia

Can you share a plunker example? Seems you need to handle reply from server (was deletion ok or not) and in case it was deleted, delete from gridData. (btw, seems gridData variable defined before defining gridOptions is never used) – Nuke

I am not sure how to use plunker. I guess you are correct in that I need to check to see if the $deleteData worked. I will look into that and see if there is a promise returned. After I declared gridOptions then I have code that populates gridData. – Keshiakesia

Answer 1

Like Valentyn Shybanov mentioned it in his comment, you should check if the server successfully deleted the object in the database, and then remove it from the gridData array.

$scope.delete = function(row) {
    row.entity.$deleteData({testId:row.entity.testId})
        .then(function(response) {
            if (response.status === 'OK') {
                remove($scope.gridData, 'testId', row.entity.testId);
            }
        });
}

// parse the gridData array to find the object with testId
function remove(array, property, value) {
    $.each(array, function(index, result) {
        if (result[property] == value) {
            array.splice(index, 1);
        }
    });    
});

The "Remove function" was taken from: https://mcmap.net/q/495182/-remove-item-from-array-using-its-name-value

Fachan

I made a minor modification so that the function now returns after the splice other wise it may cause an error due to an invalid iterator. – Tades

Answer 2

Here's a Plunker for the latest version (3.0.0rc20) of ui-grid to make a row specific button (i.e. edit, delete etc):

http://plnkr.co/edit/l7oOIe4w3XzKOnMUGDdr?p=preview

var app = angular.module('plunker', ['ui.grid']);

app.controller('MainCtrl', function($scope) {

  $scope.gridScope = $scope;

  $scope.gridOptions = {
    data: [{
      firstName: 'Frank',
      lastName: 'Zappa'
    }, {
      firstName: 'Giuseppe',
      lastName: 'Verdi'
    }, {
      firstName: 'Mos',
      lastName: 'Def'
    }],
    columnDefs: [{
      field: 'firstName',
      displayName: 'First'
    }, {
      field: 'lastName',
      displayName: 'Last'
    }, {
      field: 'edit',
      cellTemplate: '<button id="editBtn" type="button" class="btn-small glyphicon glyphicon-pencil" ng-click="grid.appScope.editUser(row.entity)" ></button> '
    }]
  };

  $scope.editUser = function(data) {
    alert('Edit ' + data.firstName + ' ' + data.lastName);
  }
});

It only uses Bootstrap for the glyph button. Otherwise you can just use Angular with ui-grid.

This is based on an important note in the upgrade README for ui-grid:

https://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

It seems they have improved on the very confusing (at least for me!) "getExternalScopes()" stuff that was previously used to make this work.

Grassy