ui-grid remove selected row not working

Question

When I try to remove selected row in ng-grid the removed rows are still shown in UI. My grid option is

$scope.gridOptions = {
    data: 'myData',
    multiSelect: true,
    displaySelectionCheckbox: true,
    selectedItems: $scope.mySelections,
    showFooter: true,
    showColumnMenu:false,
    showFilter :false,
    enableCellEdit: false,
    enableCellSelection: false,
    enableRowSelection: false,
    showSelectionCheckbox: false,
    beforeSelectionChange: function() {
      return $scope.option.enableRowSelection;
    },

}

And I remove or splice the data using

$scope.removeItem=function(){   
    angular.forEach($scope.mySelections, function(row, index){
      angular.forEach($scope.myData, function(data, index){
        if(data.indexno == row.indexno){
          $scope.myData.splice(index,1);
          $scope.gridOptions.data = 'myData';
         console.log("after",$scope.myData);
         console.log("after data",$scope.gridOptions.data);
        }
      });
    });
    $(".badge").html($scope.mySelections.length);

}

Any suggestions or solutions please

How is $scope.myData defined? It needs to be an object. Additionally you are modifying the data that you are looping over. You would probably be better off using a for loop that you can break out of when you find the matching index so you don't continue processing as a forEach does. Try collecting the indexes that you are going to delete and then loop over that list and delete them at the end so that you are not modifying the list you are looping over. — Scott

Costas Vrahimis Costas Vrahimis · Accepted Answer · 2015-11-03T16:19:22

The way I have removed a row is by only allowing the user to select 1 row at a time but you could make it so that everything the user selects gets removed. this is the line of code that I used to actually do the removing

$scope.GridOptions.data.splice($scope.GridApi.grid.renderContainers.body.visibleRowCache.indexOf($scope.selectedRow), 1);

But here is how I did it. Here is my grid options at the top of my controller with a var that holds the selected row. you could make this an array of selected rows however!

$scope.selectedRow = null;
$scope.GridOptions = {
        enableSorting: true,
        enableRowSelection: true,
        enableRowHeaderSelection: false,
        enableColumnResizing: true,
        columnDefs: [
          { name:'User Name', field: 'username', width: '15%', minWidth: 100},
          { name:'Dependency Key', field: 'id', width: '20%', minWidth: 100},
          { name:'Dependency File', field: 'file', width: '30%', minWidth: 100},
          { name:'Modified By', field: 'modifiedBy', width: '15%', minWidth: 100},
          { name:'Modified On', field: 'modifiedOn', width: '10%', minWidth: 100, cellTemplate:'<div class="ui-grid-cell-contents">{{grid.appScope.convertDate(row.entity.modifiedOn)}}</div>'},
          { name:'Dep. File Checksum', field: 'checksumAmericas', width: '10%', minWidth: 100}
        ],
        onRegisterApi : function(gridApi) {
                $scope.GridApi = gridApi;
            }
        };
$scope.GridOptions.multiSelect = false;

then this method gets called each time the user clicks on a row. I get which row the user has selected and assigned it to $scope.selectedRow

 $scope.GridOptions.onRegisterApi = function(gridApi){
      //set gridApi on scope
      $scope.GridApi = gridApi;
              $scope.GridApi.selection.on.rowSelectionChanged($scope,function(row){
          if($scope.selectedRow == null)//user has not selected a row
              $scope.selectedRow = row;
          else if(row.entity.username == $scope.selectedRow.entity.username && row.entity.id == $scope.selectedRow.entity.id)//user clicked the same row that was selected and now has unselected
              $scope.selectedRow = null;
          else //user selected new row
              $scope.selectedRow = row;

    });
 };

Then to when the user clicks remove button it calls a method and inside that method i check to see if $scope.selectedRow is not null and then to remove from the table is just 1 line

if($scope.selectedRow != null)        
    $scope.GridOptions.data.splice($scope.GridApi.grid.renderContainers.body.visibleRowCache.indexOf($scope.selectedRow), 1);

This website really helps with ui-grid functionality:

http://ui-grid.info/

http://ui-grid.info/docs/#/tutorial/210_selection

Hope this helps

ui-grid remove selected row not working

1 Answers