Selected items not getting reset after Angular UI Grid update
I have a functionality where I have to select rows in the ui grid (ui grid selection) and perform an operation on them, which in turn changes the grid data (fields in the selected rows).
To reload the changed data, I make the ajax call again. This updates the data, but keeps the last highlighted rows, which prevents operations from being performed again on the updated grid. I found this issue with a GridFooter where selectedItems is not reselling to 0 after an update.
// Getting Selected rows
onRegisterApi : function(gridApi){
// Set gridApi on scope
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row){
var msg = 'row selected ' + row.isSelected;
console.log(msg);
$scope.mySelectedRows= $scope.gridApi.selection.getSelectedRows();
console.log( $scope.mySelectedRows);
});
}
How do I make selectedItems reset to 0 after updating below?
Here is my update function. Also please let me know if there is a better way to do this.
// Refreshing Grid data
$scope.refresh= function(){
$http.post("WS/querybuilder", $rootScope.wholecond).success(function(data){
console.log("hitting the service");
$scope.myData=data; //Passing data to my grid
//$scope.mySelectedRows=[];
//console.log($scope.myData);
});
//$scope.$apply();
}
source to share
By simply specifying the type of change in the grid api, this problem will be fixed. you don't need to use your own update method.
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
This will signal the table has been updated. There are other types of events that you can use as well - (ALL, ROW, EDIT, COLUMN)
source to share
Try to clear the selected rows in the update function.
// Refreshing Grid data
$scope.refresh= function(){
$http.post("WS/querybuilder", $rootScope.wholecond).success(function(data){
console.log("hitting the service");
$scope.myData=data; //Passing data to my grid
$scope.gridApi.selection.clearSelectedRows();
//$scope.mySelectedRows=[];
//console.log($scope.myData);
});
//$scope.$apply();
}
If that doesn't work, you can use brute force by iterating over all lines and setting them to false, like so:
$scope.gridApi.grid.rows.map(function (row) {
row.setSelected(false);
}
});
});
but clearSelectedRows () should work.
source to share