I encountered an issue with my modal where I wanted to display pre-selected rows, but kept getting a 'cannot read 'grid' of undefined' error. The UI Grids are defined within the modal, and I have declared two Grid APIs with different names. Below is the code snippet:
This function launches the modal:
//edit user group
$scope.editSelectedGroup = function(){
//get the selected row
var row = $scope.gridApiInfo.selection.getSelectedRows();
var modalInstance = $modal.open({
animation: true,
templateUrl: 'userGroupModal.html',
controller: 'UserGroupModalController',
resolve: {
modalTitle: function () {
return "Edit User Group"
},
allDepartments: function () {
return $scope.allDepartments;
},
allRegions: function() {
return $scope.allRegions;
},
isEdit: function(){
return true;
},
row: function(){
return row[0];
}
}
});
This is the content of the modal controller:
.controller('UserGroupModalController',function($scope,$modalInstance,$modal,$window,modalTitle,allDepartments,allRegions,isEdit,row,referenceDataService){
// Controller logic here
});
Upon clicking the button to launch the modal, no modal appears - instead, a console error stating 'Cannot read property 'grid' of undefined' is thrown at the line involving $scope.deptGridApi.grid.rows.map. Any suggestions on how to resolve this issue? Thank you in advance!
After further testing, I found that fetching selected rows using deptGridApi and gridApiRegions works fine. As evidenced by the test function triggered by clicking a button in the modal:
$scope.getDeptandRegions= function(form){
$log.log($scope.gridApiRegions.selection.getSelectedRows());
$log.log($scope.deptGridApi.selection.getSelectedRows())
};
Even though these operations also utilize the grid APIs, they log the selected rows correctly. Could it be that they are only activated after pressing a button?