Blank data when refreshing ng-grid after update from server

Question

I want to refresh the data of the ng-grid after an edit or add new data to the database. I tried the solution set forth in this page https://github.com/angular-ui/ng-grid/issues/39 . There are no errors displayed on the console to indicate that there is a problem. However, when it trigger the function all i got was a blank data from the ng-grid and all previous data were not being displayed anymore. What did i missed? Need your help. Thanks in advance.

Here is the function


    self.fetchDataCenter = function() {
        setTimeout(function(){  
            $http({
                url:'api/centers',
                type:'GET'})
                .success(function(dCenter) {
                    $scope.centers = dCenter;   
                    if (!$scope.$$phase) {
                        $scope.$apply();
                    }                   
                });         
        }, 3000);       
    };   

    $scope.mySelectionsCenters = [];

            $scope.gridCenters = { data: 'centers',
                           filterOptions: $scope.filterOptionsCenters,   
                           selectedItems: $scope.mySelectionsCenters,  
                           afterSelectionChange: function() {
                              $scope.itemsCC = $scope.mySelectionsCenters;
                           },
                           multiSelect: false,
                           columnDefs: [{field:'cost_center', displayName:'Cost Center'}] 
                        };

MarkJ MarkJ · Accepted Answer · 2014-03-01T04:45:49

After 3 days of research and testing I finally was able to make it work. Some of the examples that i got were either outdated and thus resulted to errors being thrown out of the console. This method worked on my scenario using ng-grid.

I had this function placed on the controller itself.

$scope.refresh = function () {
    setTimeout(function(){  
        $http({
            url:'api/centers',
            method:'GET'})
            .success(function(data) {
                $scope.centers = data;
            });                           
    }, 100); 
};

Then I have to call the function to populate the ng-grid with the data.

$scope.refresh();

If you are going to call the refresh function to refresh the grid from the modal after making an update to database you will have to reference the scope first on your modal configuration by adding

scope: $scope

Here is the modal script with the scope: $scope

$scope.openAddCenter = function (input) {
    $scope.input = input;
    var modalAddCenter = $modal.open({
      templateUrl: 'myModalAddCenter.html',
      controller: ModalAddCenterCtrl,
      scope: $scope,
      resolve: {
        '$modalAddCenter': function() { 
          return function() { 
            return modalAddCenter; } 
            },
        input: function() {
          return $scope.input;
            }
        }
    });

Then on your modal controller you just have the put the $scope.refresh() after you had made the necessary update to the database. This will trigger a reload of data and repopulating the ng-grid with the new data being shown.

I hope this will help the newbies and save them precious time.

Blank data when refreshing ng-grid after update from server

1 Answers