13

I'm new to ui-grid and I'm trying to implement a table in AngularJS as shown in the picture below. I'm trying to select a row and delete it using a delete button on that particular row. The ui-grid documentation requires us to use the gridApi but I can't find sufficient documentation for the same.

enter image description here

Jawa
  • 2,336
  • 6
  • 34
  • 39
Sur
  • 133
  • 1
  • 1
  • 7

5 Answers5

19

Please see a working example of how to delete a row here. http://plnkr.co/edit/6TiFC6plEMJMD4U6QmyS?p=preview

The key is to use indexOf(row.entity) and not relying on row.index as it doesn't dynamically get updated.

$scope.deleteRow = function(row) {
  var index = $scope.gridOptions.data.indexOf(row.entity);
  $scope.gridOptions.data.splice(index, 1);
};

Generic approach 

function deleteRow(row,grid) {
   var i = grid.options.data.indexOf(row.entity);
   grid.options.data.splice(i, 1);
}
Blowsie
  • 40,239
  • 15
  • 88
  • 108
  • 2
    Might want to double check your example. Wasn't working for me today and is throwing a ton of errors. – Geuis Feb 20 '15 at 23:34
  • 2
    +1 for "row.index" and the details that row.identity doesn't dynamically updates. That was issue with my code and had banged my head already for a couple of hours. Thanks! – Anmol Saraf Oct 27 '15 at 00:10
  • A generic solution would be great, something like `function (row,grid) { var i = grid(row.entity); grid.data.splice(i,1);};` –  Dec 18 '15 at 20:12
4

You can use @Blousie solution as far as you adapt it to the newer API: https://github.com/angular-ui/ng-grid/blob/master/3.0_UPGRADE.md

Now "grid.appScope.edit(row.entity)" gives you access to your scope's "edit" function.

Something like this:

var removeTemplate = '<button class="btn btn-danger" ng-click="grid.appScope.removeRow(row)"><i class="glyphicon glyphicon-remove"></i></button>';

$scope.removeRow = function(row) {
    var index = $scope.<yourDataModelProperty>.indexOf(row.entity);
    if (index !== -1) {
        $scope.<yourDataModelProperty>.splice(index, 1);
    }
};
Diego Pamio
  • 1,377
  • 13
  • 21
3

We need to use the $scope.grid.appScope. It is available in all templates. Besides that, you need to send the row object from the template, so that you can delete the row from the grid data.

jsfiddle: http://jsfiddle.net/3ryLqa9e/4/

  cellTemplate:'<button class="btn primary" ng-click="grid.appScope.Delete(row)">Delete Me</button>' 

  $scope.Delete = function(row) {
            var index = $scope.gridOptions.data.indexOf(row.entity);
            $scope.gridOptions.data.splice(index, 1);
        };
Razan Paul
  • 13,618
  • 3
  • 69
  • 61
3

The other solutions provided here didn't worked for me(May be because of my latest different version of ui-grid). So removing element from the scope array worked for me. This should even work with other versions of ui-grid because grid must be updated when the data changes. (Thanks to Angular!!!)

I am using lodash to remove element from array and here is sample code:

$scope.deleteRow = function(row){
    _.remove($scope.gridData, {
        id: row.id
    });
};
vinesh
  • 4,745
  • 6
  • 41
  • 45
  • I went with this, but when using `showGridFooter: true`, the row is still counted in the "Selected Items: xxx" message in the table footer. – Will Lovett Jan 12 '16 at 00:58
2

Just remove the row you want to delete from ui-grids data source model using splice.

For example 

$scope.myGridOptions.data.splice(<YOUR ROW INDEX HERE>, 1);
Thanos
  • 844
  • 2
  • 11
  • 27
  • After deleting one row, the index of the grid does not update with the index of the array. Therefore, I can't delete the rest of the rows. The refreshRows() method in ui-grid doesn't work as of now. – Sur Nov 26 '14 at 06:35
  • What are you using as index? – Thanos Nov 26 '14 at 09:38
  • Regarding ui-grid you should always mention the version you are working with. – nabinca Nov 26 '14 at 17:22
  • Figured it out, I am using version 3.0.0 $scope.deleteRow = function(row) { var index = $scope.items.indexOf(row.entity); $scope.items.splice(index, 1); }; – Sur Nov 27 '14 at 01:33