title: Ng-Grid: Cannot read property 'on' of null
body: <p>I am working on developing an angular.js directive which is simply a JQuery dialog box with a grid within it.</p>
  
  <p><strong>Directive Template:</strong></p>
  
  <pre><code>&lt;div class="datasetsGrid" ng-grid="gridOptions"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>The Problem</strong></p>
  
  <p>This directive is compiled and opened when I click a button ("View Grid") and destroyed when I close the dialog. </p>
  
  <p>What I am finding if I open, close and then reopen the dialog I get the following error:</p>
  
  <pre><code>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) 
  </code></pre>
  
  <p>Which relates to the following code section in <strong>ng-grid-2.0.11.debug.js</strong>:</p>
  
  <pre><code>        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 &amp;&amp; grid.$topPanel) {
                  grid.$topPanel.off('drop');
              }
  
              grid.$topPanel = null;
          });
  </code></pre>
  
  <p>This can be found around line 997 in the <strong>ng-grid-2.0.11.debug.js</strong> file.</p>
  
  <p>It seems to me that in <strong>ng-grid-2.0.11.debug.js line 997</strong> the code it trying to added events to a null object <code>grid.$groupPanel</code>.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. </p>
  
  <p><strong><em>It is worth nothing as the group panel (that I have enabled still works)</em></strong></p>
  
  <p>I know how to get around this problem by editing the <strong>ng-grid-2.0.11.debug.js</strong> 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.</p>
  
  <p>Has anyone encountered this issue before? If so, how did you get around it?</p>