AngularJs Grid - Not working when place the code under a event

Question

Here is the code.

Working version - Grid displays and page load.

Answer 1

Your ng-grid is initializing before you instantiate $scope.gridOptions, as as such it throws the undefined error. Also, if you change a $scope property programatically, you may need to use $apply to get your changes to display on the templates.

So what you need to do is make sure the data structures exist (even if they're empty) and call $apply when "starting" the data-grid:

app.controller('MyCtrl', function ($scope) {
        $scope.myData = [];
        $scope.gridOptions = { data: 'myData' };
        $scope.LoadGrid = function () {
            alert('');
            $scope.myData = [{ name: "Moroni", age: 50 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34}];
            $scope.$apply();
        }
    });

Here is an edited plunkr from the ngGrid examples page, to show this working: http://plnkr.co/edit/SnJ9J0?p=preview

Answer 2

Move the Tag at the end before the last (will also load faster).

I presume the error is because the javascript is loading before the html is ready.

Does the console error log says anything else?

Answer 3

It's OK to define your gridOptions before the data actually gets there. That's the gorgeous part about the way Angular binds data - just set the data to the $scope object that will eventually have data & your grid will be smart enough to update itself by an internal $watch on the data item.