How to properly delete selected items ui.grid Angular JS

Question

I am having some difficulties understanding the properties/functions available through ui-grid. I often get confused with its previous version ng-grid. I am trying to find what the best way of deleting a checked-entry would be. Here is my markup, but due to not quite understanding if I have an index, or count available through a row entity:

HTML:

       <div class="form-group">
          <button type="button" id="addData" class="btn btn-success" ng-click="addData()">Add Data</button>
          <button type="button" id="removeData" class="btn btn-success" ng-click="removeData()">Remove First Row</button>
          <br>
          <br>
          <div id="grid1" ui-grid="gridOptions" ui-grid-edit ui-grid-selection external-scopes="myViewModel" class="grid"></div>
    </div>

which lies under my controller:

 $scope.removeData = function () {
        console.log($scope.gridApi.selection.getSelectedRows());

        var items = $scope.gridApi.selection.getSelectedRows();

        angular.forEach($scope.myData, function (data, index) {
            angular.forEach(items, function (item) {
                if (item.displayValue = data.displayValue)
                {
                    $scope.myData.splice(index, 1);
                }

            });

where displayValue is a property of my column and $scope.myData is my data. Is there a different way to send that selection to the controller for removal? The current way I have it does NOT work (obviously). Any help will be appreciated. If my markup is incomplete, I'll update it as necessary. Thank you!

Answer 1

Your solution looks a little complicated. Here is my delete function:

$scope.deleteSelected = function(){
  angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {
    $scope.gridOptions.data.splice($scope.gridOptions.data.lastIndexOf(data), 1);
  });
}

Here is a plunker based on the 210_selection tutorial.

Answer 2

ui-grid has problem with array.splice() method

This method is giving a problem which is making array replaced by the deleted row or item.

$scope.gridOptions.data.splice(index,1)

So the better way to handle delete of a row is by doing two things

• Step 1:

   $scope.gridApi.core.setRowInvisible(row) 

  The line above will hide the selected row

• Step 2: Call the service which deletes the data at the database

Answer 3

I don't know how proper my solution is, but here is my code (maybe it can guide someone in the right direction or if they have a better method, please share :) )

        $scope.removeData = function () {

        angular.forEach($scope.gridOptions.data, function (data) {

            angular.forEach($scope.gridApi.selection.getSelectedRows(), function (entity, index) {
                if (entity.$$hashKey == data.$$hashKey) {
                    $scope.gridApi.selection.unSelectRow(entity);
                    //timeout needed to give time to the previous call to unselect the row,
                    //then delete it
                    $timeout(function () {
                        $scope.gridOptions.data.splice($scope.gridOptions.data.indexOf(entity), 1);
                    }, 0,1);
                }

            });

        });
    };

Hope it helps somebody!

Answer 4

I have a button that looks like this, which I specify in the cellTemplate value in my grid columnDefs...

columnDefs: [
        // snipped other columns
{ name: '_delete', displayName: '', width: '5%', cellTemplate: '<div class="ui-grid-cell-contents ng-binding ng-scope"><button class="btn btn-danger btn-xs btn-block" ng-click="getExternalScopes().delete($event, row)"><span class="glyphicon glyphicon-trash"></span></button></div>', enableFiltering: false, disableColumnMenu: true }

My controller has a line which (IIRC) enables the getExternalScopes() call to work

$scope.$scope = $scope;

Then I handle the delete event I'm triggering like this in my controller...

$scope.delete = function (event, row) {
    MyService.Delete({ action: row.entity.MyIdField }); // tells the server to delete the entity
    $scope.gridApi.core.setRowInvisible(row); // hides that row in the UI
}

Perhaps this helps?

Answer 5

      //  $scope.gridApi.grid.cellNav.lastRowCol = null;
        $scope.gridApi.grid.cellNav.focusedCells = [];

        var cells = $(".ui-grid-cell");
      //  var focused = $(".ui-grid-cell-focus");
        for (var i = 0; i < cells.length; i++) {
            var div = $(cells[i].children[0]);
            div.removeClass('ui-grid-cell-focus');
        }

Answer 6

To answer @dileep's query extending on @Kevin Sage answer. This approach uses a service to send a delete request to the server and only delete the row once a successful response has been received. You do not want to delete the row from the grid if something went wrong and the record is still on the database.

 $scope.deleteSelected = function(){ angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) { YourService.delete({ id: data.id }, function(response) { $scope.gridOptions.data.splice($scope.gridOptions.data.lastIndexOf(data), 1); }, function(error) { // Run any error code here }); }); }