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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With