Ng-grid with external data and TypeScript: compile error "Cannot set property 'gridDim' of undefined"

Question

Update #1: after the fix I commented about, now my app starts but the grid is not rendered except for its bounding box and filter button and popup. Yet, I get no error from the console, and as far as I can arrive with the debugger, I can see that data got from the server are OK. If I use Batarang, I can see the scope corresponding to my model, correctly filled with items. I updated the downloadable repro solution accordingly. Could anyone explain why ng-grid is not updating here?

---

I'm starting to play with ng-grid and TypeScript and I'm finding issues as soon as my test app starts up. See the bottom of this post for a link to a full test solution. Surely I have made tons of errors even in these few files, but I'd like to have something to start with and learn more step by step.

The MVC app has two client-side applications:

• app.js for the default view (Home/Index). No typescript here, and the whole code is self-contained in this single file. The code is derived from the paging example in the ng-grid documentation and tries to stay as simplest as possible.

• MyApp.js for the more realistic sample in another view (Home/Model). This sample uses services, models and controllers and its JS code is compiled from TypeScript. To keep things simple, I'm just storing these components under Scripts/App, in folders for Controllers, Models and Services, and each file contains just a single class or interface. The generated JS files are manually included in the view.

app.js works, except that it has issues with filtering. I posted about these here: Server-side filtering with ng-grid: binding issue?

MyApp.js has startup issues with ng-grid. As soon as the app starts, a TypeError is thrown in the grid binding:

TypeError: Cannot set property 'gridDim' of undefined
    at ngGridDirectives.directive.ngGridDirective.compile.pre (http://localhost:55203/Scripts/ng-grid-2.0.7.js:2708:37)
    at nodeLinkFn (http://localhost:55203/Scripts/angular.js:4392:13)
    at compositeLinkFn (http://localhost:55203/Scripts/angular.js:4015:15)
    at nodeLinkFn (http://localhost:55203/Scripts/angular.js:4400:24)
    at compositeLinkFn (http://localhost:55203/Scripts/angular.js:4015:15)
    at publicLinkFn (http://localhost:55203/Scripts/angular.js:3920:30)
    at resumeBootstrapInternal (http://localhost:55203/Scripts/angular.js:983:27)
    at Object.$get.Scope.$eval (http://localhost:55203/Scripts/angular.js:8057:28)
    at Object.$get.Scope.$apply (http://localhost:55203/Scripts/angular.js:8137:23)
    at resumeBootstrapInternal (http://localhost:55203/Scripts/angular.js:981:15) <div ng-grid="gridOptions" style="height: 400px" class="ng-scope"> angular.js:5754

The only similar issue I found by googling is https://github.com/angular-ui/ng-grid/issues/60, but it does not seem to be related to my case as there the grid options were setup too late.

The server side just has an API RESTful controller returning server-paged, sorted and filtered items.

You can find the full repro solution here (just save, unzip and open; all the dependencies come from NuGet); see the readme.txt file for more information:

http://sdrv.ms/167gv0F

Just start the app and click MODEL in the upper right corner to run the TypeScript app throwing the error. The whole app is composed of 1 controller, 1 service and 1 model.

For starters like me, it would be nice to have a simple working example like this one. Could anyone help?

Answer 1

This error means gridOptions has not yet been defined by the time that Angular attempts to parse ng-grid="yourArray", where yourArray is the same array supplied to gridOptions. I had the same problem after refactoring a previously working ng-grid.

So gridOptions must be defined before the element which has ng-grid="yourArray" attribute applied to it (rather than within that element's own controller).

I resolved this by defining gridOptions in an outer element somewhere (on global/app scope, for instance).

P.S. Maybe there is a better way, but this has worked for me.