ngGrid - remove row

Asked 28/6, 2013 at 15:26 Answered 25/3, 2017 at 14:34

I have been looking for an example on how to implement a button to remove a selected row, but I couldn't find anything useful so far.

Can anyone please give me a hint? Here is the plunker example.

The function I implement acts weird, as it removes other rows.

Thank you.

Hesperus answered 28/6, 2013 at 15:26 Comment(0)

That is not a proper way to delete any row

Try like this:

$scope.removeRow = function() {
   var index = this.row.rowIndex;
   $scope.gridOptions.selectItem(index, false);
   $scope.myData.splice(index, 1);
};

PLUNKER --> Its working and tested

Subkingdom answered 28/6, 2013 at 15:35 Comment(4)

Well, try and delete Moroni and you'll see that it removes the last row. So basically it removes the last row every time (similar to pop for queue). – Hesperus 28/6, 2013 at 15:44

Hey Dado, I have found the problem. That is with the argument I send through my button, which was $index. If you change that to 'row', it will work correctly. Thank you for your answer mate. – Hesperus 28/6, 2013 at 15:59

@Mehran Plunker itself looks down right now! i think it will resume after some hours :) – Subkingdom 17/7, 2014 at 10:3

@DhavalMarthak you plnkr is not working all the time. If you press on name header the order of the entries reverses; Press on any remove button, then the entry that was on that row previous to hitting the header will be removed since you remove $scope.myDate based on the current index value! – Massasauga 28/10, 2014 at 18:32

thanks for the hint but I tried the snippet and it doesn't work so I changed it in

var removeTemplate = '<input type="button" value="remove" ng-click="removeRow()" />';
$scope.removeRow = function() {;
                    var index = this.row.rowIndex;
                    alert(index);
                    $scope.gridOptions.selectItem(index, false);
                    $scope.items.splice(index, 1);
                };

and it works like a charme :) Hope this help.

Jalap answered 5/9, 2013 at 12:0 Comment(1)

Works for me! Note - If you have enableCellEditOnFocus: true for the grid, you will need to set both cellTemplate: removeTemplate and editableCellTemplate: removeTemplate on the columnDefs. Otherwise, the cell appears editable – Maccabees 9/9, 2014 at 15:5

This might help you, and also this is for deleting multiple rows in the grid.

$scope.mySelections = [];

$scope.gridOptions = {
    data :'gridData',
    selectedItems : $scope.mySelections,
    showSelectionCheckbox : true
}

$scope.deleteSelected = function() {
    angular.forEach($scope.mySelections, function(rowItem) { 
    $scope.gridData.splice($scope.gridData.indexOf(rowItem),1);
});
}

mySelections is the array which has selected rows

Tonsillitis answered 21/2, 2014 at 19:42 Comment(0)

Previous answer to this question won't work once the array has been sorted because the row.index changes based on the way the array has been sorted but the original data in the array remains in it's original index. We must find the correct index in the data array in order to remove the correct row. The row contains a reference to the original data in row.entity so we can use indexOf to find the correct index.

$scope.actionTemplate = '<input type="button" value="Delete" ng-click="delete($event);" />';

$scope.delete = function($event) {
    $event.stopPropagation(); //keep the row from being selected
    $scope.data.selectAll(false); //remove all selections: necessary for issues with the selection array
    var index = $scope.data.indexOf(this.row.entity); //get the correct index to splice
    $scope.metrics.splice(index, 1); //remove the element
};

Edit: The original solution may have worked at the time but ng-grid has since been updated and it no longer works.

Nmr answered 28/7, 2014 at 16:32 Comment(1)

Great Answer! Other solutions don't work if you want to remove a single entry once you change how the data is sorted or add a search option – Massasauga 28/10, 2014 at 18:43

It might help you

<!doctype html>
<html ng-app="deleteApp">
<head>
  <title>Example - www.code-sample.com</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
  <script>
    angular.module('deleteApp', [])
      .controller('deleteController', ['$scope', function ($scope) {
          $scope.Rows = [
            { row: 'RowCount1'},
            { row: 'RowCount2'},
            { row: 'RowCount3'},
            { row: 'RowCount4'},
            { row: 'RowCount5'}];

            $scope.delete = function(index){
              $scope.Rows.splice(index, 1);
            }
      }]);
  </script>
</head>
<body ng-controller="deleteController">
  <div ng-repeat="ro in Rows">
    <div>{{$index + 1}} :  {{ro.row}} <input type="button" value="delete" ng-click="delete($index)" /></div>
  </div>
</body>
</html>

Maximilian answered 13/9, 2014 at 7:33 Comment(0)

This works:

showSelectionCheckbox : true ->it adds checkbox to grid and $scope.delItem = function() -> it works for both multiple rows or single row selection

     $scope.mySelections = [];
                 $scope.gridOptions = {
                     data :'data',
                     selectedItems : $scope.mySelections,
                     showSelectionCheckbox : true
                 } 

 $scope.delItem = function() {
      for (var i = 0; i < $scope.mySelections.length; i++) {
             var index = $scope.data.indexOf($scope.mySelections[i]);
             if (index != -1) {
                 $scope.data.splice(index, 1);
             }
         }
     }

Plaided answered 25/3, 2017 at 14:34 Comment(0)

Recommended topics

Hot tags