Ng-grid Cannot set property 'gridDim' of undefined

Question

I'm new in Angular, and I try to declare gridOption for ng-grid Within a function in costroller.

It cause an error:

TypeError: Cannot set property 'gridDim' of undefined

I tried to solve it using $scope.apply and ng-if in template. But nothing from this is working for me.

Thanks for any advice:

method of the Controller:

$scope.getTest = function() {

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
    .success(function (data, status, headers, config) {
            //$scope.myData = data;
            console.log('Sucess' + data);
            // definition for ng-grid table 
            $scope.myData = [{ name: "Moroni", age: 50 },
                             { name: "Tiancum", age: 43 },
                             { name: "Jacob", age: 27 },
                             { name: "Nephi", age: 29 },
                             { name: "Enos", age: 34}];
            $scope.gridOptions = { data: 'myData' };
            //$scope.$apply();
    })
    .error(function(data, status, headers, config) {
            $scope.myData = data;
    });

};

Liverwurst

Answer 1

I just ran into this issue yesterday....

In order to initially render, ng-grid needs the options to be supplied initially, not after your $http promise is resolved.

Move your $scope.gridOptions = { data: 'myData' } call outside of your success promise and your issue should go away.

Femme

But i want to show table with data only in case of the success. – Liverwurst

Then you can put an ng-show/ng-hide on the grid control and drive that logic however you please. Or even ng-if if you don't want that DOM to render – Femme

@Liverwurst Can you please mark this answer as accepted as it has solved your issue and provided assistance to others as well – Femme

@Brocco, but I am getting the data in my success promise, how can I initialize the grid with the response data? – Nordin

Answer 2

It is working for me when we define 'gridOptions' outside of success and error methods as shown below:

$scope.getCategory = function(){
            var listURL = "/sites/AwardTrackingSystem/_api/web/lists/getByTitle('Categories')/items"+
                        "?$select=Id,Title";                                        
                        srvcQuerySPList.getItems(listURL)
            .then(
                function(data){
                                $scope.allCategory = data;
                              },
                function(data){alert('Error Awards---------------'+JSON.stringify(data));}

            );

        };
        $scope.gridOptions = { data: 'allCategory'};

Ironstone