Ng-Grid: Cannot read property 'on' of null

Question

I am working on developing an angular.js directive which is simply a JQuery dialog box with a grid within it.

Directive Template:

<div class="datasetsGrid" ng-grid="gridOptions"></div>

The Problem

This directive is compiled and opened when I click a button ("View Grid") and destroyed when I close the dialog.

What I am finding if I open, close and then reopen the dialog I get the following error:

TypeError: Cannot read property 'on' of null
    at self.assignEvents (https://127.0.0.1/Scripts/Libraries/Angular/ng-grid-2.0.11.js:1003:29)
    at Object.fn (https://127.0.0.1/Scripts/Libraries/Angular/ng-grid-2.0.11.js:3260:52)
    at Scope.$digest (https://127.0.0.1/Scripts/Libraries/Angular/angular.js:12251:29)
    at Scope.$apply (https://127.0.0.1/Scripts/Libraries/Angular/angular.js:12516:24)
    at done (https://127.0.0.1/Scripts/Libraries/Angular/angular.js:8204:45)
    at completeRequest (https://127.0.0.1/Scripts/Libraries/Angular/angular.js:8412:7)
    at XMLHttpRequest.xhr.onreadystatechange (https://127.0.0.1/Scripts/Libraries/Angular/angular.js:8351:11) 

Which relates to the following code section in ng-grid-2.0.11.debug.js:

        grid.$groupPanel.on('mousedown', self.onGroupMouseDown).on('dragover', self.dragOver).on('drop', self.onGroupDrop);
        grid.$topPanel.on('mousedown', '.ngHeaderScroller', self.onHeaderMouseDown).on('dragover', '.ngHeaderScroller', self.dragOver);

        grid.$groupPanel.on('$destroy', function() {
            if (grid.$groupPanel){
                grid.$groupPanel.off('mousedown');
            }

            grid.$groupPanel = null;
        });

        if (grid.config.enableColumnReordering) {
            grid.$topPanel.on('drop', '.ngHeaderScroller', self.onHeaderDrop);
        }

        grid.$topPanel.on('$destroy', function() {
            if (grid.$topPanel){
                grid.$topPanel.off('mousedown');
            }

            if (grid.config.enableColumnReordering && grid.$topPanel) {
                grid.$topPanel.off('drop');
            }

            grid.$topPanel = null;
        });

This can be found around line 997 in the ng-grid-2.0.11.debug.js file.

It seems to me that in ng-grid-2.0.11.debug.js line 997 the code it trying to added events to a null object grid.$groupPanel.This object is null because when I close the dialog I destroy it and when I reopen (and reset everything) it eventually displays but this error is shown in the developer tools.

It is worth nothing as the group panel (that I have enabled still works)

I know how to get around this problem by editing the ng-grid-2.0.11.debug.js file but I don't want to do that as I like to keep it up-to-date so I guess I must be doing something wrong.

Has anyone encountered this issue before? If so, how did you get around it?

Answer 1

Fixed in ng-grid-2.0.14.debug.js

Download the latest version from Here