Currently, I am in the process of creating an angular.js directive that involves a JQuery dialog box containing a grid component.
Directive Template:
<div class="datasetsGrid" ng-grid="gridOptions"></div>
The Issue
Whenever I click on the "View Grid" button, the directive is compiled and displayed. However, upon closing and reopening the dialog, I encounter 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)
This issue stems from the code section within 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 snippet can be located around line 997 in the ng-grid-2.0.11.debug.js file.
It appears that in ng-grid-2.0.11.debug.js line 997, the code attempts to add events to a null object grid.$groupPanel. This object becomes null when the dialog is closed and then reopened, leading to this error message in the developer tools.
Notably, the group panel (which remains enabled) still functions correctly.
I do have a workaround for this problem by modifying the ng-grid-2.0.11.debug.js file, but I prefer to avoid this as I want to maintain it up-to-date. It seems like there might be something I am doing incorrectly in my implementation.
Has anyone else faced this problem before? If so, how did you manage to resolve it?