Angular JS UI-Grid Delete Row
Solution 1
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);
}
Solution 2
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);
}
};
Solution 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);
};
Solution 4
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
});
};
Solution 5
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);
Sur
Updated on April 26, 2020Comments
-
Sur about 4 years
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. Theui-grid
documentation requires us to use thegridApi
but I can't find sufficient documentation for the same. -
Sur over 9 yearsAfter 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.
-
Thanos over 9 yearsWhat are you using as index?
-
nabinca over 9 yearsRegarding ui-grid you should always mention the version you are working with.
-
Sur over 9 yearsFigured 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); };
-
Geuis over 9 yearsMight want to double check your example. Wasn't working for me today and is throwing a ton of errors.
-
Anmol Saraf over 8 years+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!
-
Admin over 8 yearsA generic solution would be great, something like
function (row,grid) { var i = grid(row.entity); grid.data.splice(i,1);};
-
Will Lovett over 8 yearsI went with this, but when using
showGridFooter: true
, the row is still counted in the "Selected Items: xxx" message in the table footer.