ui-grid remove selected row not working - angularjs

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

Answer 1

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