Ng grid with external data and TypeScript: compilation error "Unable to set gridDim property from undefined"

Question

Update No. 1: after the correction that I commented on, my application now starts, but the grid does not appear, except for its bounding box and the filter button and pop-up window. However, I do not get errors from the console, and as far as I can with the debugger, I see that the data received from the server is in order. If I use Batarang, I can see the area corresponding to my model, correctly filled with objects. I updated the downloadable playback solution accordingly. Can someone explain why ng-grid is not updating here?

---

I start playing with ng-grid and TypeScript, and I find problems as soon as the test application starts. See the bottom of this post for a link to a complete test solution. Of course, I made a lot of mistakes even in these few files, but I would like to start something to start and step by step.

An MVC application has two client applications:

• app.js for default view (Home / Index). There is no TypeScript here, and all the code is self-contained in this single file. The code is derived from the swap example in the documentation for the ng-grid and tries to remain as simple as possible.

• MyApp.js for a more realistic sample in a different view (Home / Model). This example uses services, models, and controllers, and its JS code is compiled from TypeScript. To keep things simple, I just store these components in Scripts / App, in folders for controllers, models and services, and each file contains only one class or interface. Generated JS files are manually included in the view.

app.js works, except that it has filtering problems. I wrote about this here: Server-side filtering with ng-grid: binding problem?

MyApp.js has problems running ng-grid. As soon as the application starts, TypeError is thrown into 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 problem that I found while working with googling is https://github.com/angular-ui/ng-grid/issues/60 , but it does not seem to be relevant to my case, since there the grid parameters were installed too late.

On the server side, there is only a RESTful API that returns server-side, sorted, and filtered items.

Here you can find the complete solution for replication (just save, unzip and open all the dependencies on NuGet); see readme.txt file for more information:

http://sdrv.ms/167gv0F

Just launch the application and click "MODEL" in the upper right corner to launch the TypeScript application, throwing an error. The entire application consists of 1 controller, 1 service and 1 model.

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

Answer 1

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

So, gridOptions must be defined before an element that has the ng-grid="yourArray" applied to it (and not inside this element has its own controller).

I solved this by defining gridOptions in an external element somewhere (e.g. in the global / application area).

PS Maybe there is a better way, but it worked for me.

Answer 2

Where do you add data to your grid?

If you write $ scope.myGrid = {data: "someObj"}; on successful call, this will not work.

See the reason below: (which is listed at https://github.com/angular-ui/ng-grid/issues/60 )

 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. 

Answer 3

What do you need to do? First you need to see how your project and the auditor did it, if your requests or access to data, rays through the service, if so, I must add a file that controls the application of routes, client side.

remain so.

 'use strict'; angular.module('iseApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', **'ngGrid',** 'campaignServices', 'dialinglistServices', 'itemServices' ]) .config(function ($routeProvider, $locationProvider, $httpProvider) { $routeProvider 

Answer 4

When you add your ng-grid in the directive, you must make sure that the parameters of the grid are loaded before it tries to parse your html.

You can set a boolean in your link function:

 scope.isDirectiveLoaded=true; 

And then in the template use ng-if:

 <div ng-if="isDirectiveLoaded"> <div ng-grid="myGrid"/> </div> 

Answer 5

I hit the same problem, an empty grid was rendered. In the end, I got a way to configure my this.gridOptions in the controller constructor inside the component. In options, everything refers to $ ctrl like this. Thus, the data refers to $ ctrl.gridData. gridData is specified as a property in my controller component. $ ctrl is not defined as a property. This was done in the constructor before loading the data. this.gridData was defined after in the constructor, and then populated in another function. The parameters were defined first, I think it is important from what I read.

For event hooks, pass null instead of $ scope.

 this.gridOptions = { enableGridMenu: true, minRowsToShow: 25, rowHeight: 36, enableRowHashing: true, data: '$ctrl.gridData', rowTemplate: this.$rootScope.blockedRowTemplate, onRegisterApi: ($ctrl) => { this.gridApi = $ctrl; this.gridApi.colMovable.on.columnPositionChanged(null, (colDef, originalPosition, newPosition) => { this.saveState(); }); this.gridApi.colResizable.on.columnSizeChanged(null, (colDef, deltaChange) => { this.saveState(); }); this.gridApi.core.on.columnVisibilityChanged(null, (column) => { this.saveState(); }); this.gridApi.core.on.sortChanged(null, (grid, sortColumns) => { this.saveState(); }); this.gridApi.core.on.filterChanged(null, (grid, sortColumns) => { this.saveState(); }); } }; 

In the string template, I referenced the functions defined in my component. Before converting to a component, I referred to the following functions:

 ng-click="grid.appScope.jumpToExport(row.entity);" 

After converting to a component, I needed to add $ ctrl in front of the function name, like this

 ng-click="grid.appScope.$ctrl.jumpToExport(row.entity);" 

And here is a link to a component in HTML

 <div ui-grid="$ctrl.gridOptions" ng-if="$ctrl.gridData.length != undefined && $ctrl.gridData.length > 0" class="data-grid" ui-grid-save-state ui-grid-resize-columns ui-grid-move-columns></div>