306_expandable_grid - cannot read the property of 'data' undefined

Question

i am working on ui-grid and 306_expandable_grid , i have used the exact code as in the doc but i am facing a problem with an error .

app.js

$http.get('resources/data/title2.json')
    .success(function(data){

        console.log(data);
        console.log(data[0].Data);
        console.log(data.length);
        for(i = 0; i < data[i].length; i++){
           data[i].subGridOptions = {
                  columnDefs: [ 
                    {name:"Title" },
                    {name:"Jan-10" },
                    {name:"Feb-10"},
                    {name:"Mar-10" },
                    {name:"Apr-10" },
                    {name:"May-10" },
                    {name:"Jun-10" },
                    {name:"Jul-10" },
                    {name:"Aug-10" },
                    {name:"Sep-10" },
                    {name:"Oct-10" },
                    {name:"Nov-10" },
                    {name:"Dec-10" }
                ],
              data: data[i].Data
          }
      }
        // $scope.subGridOptions.data = data;
        $scope.gridOptions.data = data;
        // $scope.title = data[0].Title;
    });

externalHtmlFile.html

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>

this is the error that i am stuck with

 TypeError: Cannot read property 'data' of undefined
    at new <anonymous> (http://localhost/ng-Grid/resources/scripts/ui-grid-unstable.js:2883:41)
    at Object.e [as invoke] (http://localhost/ng-Grid/resources/scripts/angular.min.js:36:456)
    at E.instance (http://localhost/ng-Grid/resources/scripts/angular.min.js:75:118)
    at http://localhost/ng-Grid/resources/scripts/angular.min.js:58:276
    at r (http://localhost/ng-Grid/resources/scripts/angular.min.js:7:408)
    at M (http://localhost/ng-Grid/resources/scripts/angular.min.js:58:260)
    at http://localhost/ng-Grid/resources/scripts/angular.min.js:65:412
    at http://localhost/ng-Grid/resources/scripts/angular.min.js:109:276
    at h.$eval (http://localhost/ng-Grid/resources/scripts/angular.min.js:123:139)
    at h.$digest (http://localhost/ng-Grid/resources/scripts/angular.min.js:120:220)

when i click on the plus icon , the error occurs ... i could not find out a solution that i can understand . please help

Answer 1

First, make sure that you initialize $scope.gridOptions outside of $http.get success callback. Only add the $scope.gridOptions.data[i].subGridOptions to $scope.gridOptions inside the success callback. Reference:

You can't define the grid options in the success call. You need to define them on the scope in your controller and then set the data or column definitions, etc... from the success call.

Second, make sure that the controller of the grid/page doesn't have any kind of initialization parameter-dependent redirects. I faced the same error message generated because of the following piece of code I had on the page:

if (typeof clientcode === 'string' && clientcode !== '') {

    var payload = {
        clientcode : storedClientcode
    }

} else {

    $location.path('/');

}

The idea here was to check if the storedClientcode was provided by the calling page (via a shared app root service), and if not, redirect to the application home. But the ui-grid apparently makes separate sub-calls to the page its on, and those sub-calls of course do not provide the data I was looking for with my code, and so the redirect occurred behind the scenes for those calls. No errors (other than what you also saw) were produced, and no data showed up in the grid. This took me some time to figure out (I'm fairly new with AngularJS, and this was the first application of ui-grid for me).. hopefully this will help someone, even if it doesn't resolve this question.