Transitioning from a state containing an ng-grid object is not working

Question

In my AngularJS app, I use ui-router for navigation and ng-grid to display data. Things work fine until I transition from a state containing a grid to any other state. This is the corresponding template:

<div ng-controller="MainUserController" class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
            <div class="gridStyle" ng-grid="gridOptions"></div>
        </div>
    </div>
</div>

When transitioning away from this state to any other state, I log the following error flow:

TypeError: Cannot read property 'off' of null
at HTMLDivElement.<anonymous> (http://127.0.0.1:9000/bower_components/ng-grid/build/ng-grid.debug.js:1008:31)
at HTMLDivElement.jQuery.event.dispatch (http://127.0.0.1:9000/bower_components/jquery/dist/jquery.js:4624:9)
at HTMLDivElement.elemData.handle (http://127.0.0.1:9000/bower_components/jquery/dist/jquery.js:4292:46)
at Object.jQuery.event.trigger (http://127.0.0.1:9000/bower_components/jquery/dist/jquery.js:4533:12)
at jQuery.fn.extend.triggerHandler (http://127.0.0.1:9000/bower_components/jquery/dist/jquery.js:5241:24)
at removePatch [as remove] (http://127.0.0.1:9000/bower_components/angular/angular.js:2213:21)
at Object.leave (http://127.0.0.1:9000/bower_components/angular/angular.js:4079:17)
at Object.leave (http://127.0.0.1:9000/bower_components/angular-ui-router/release/angular-ui-router.js:2668:49)
at cleanupLastView (http://127.0.0.1:9000/bower_components/angular-ui-router/release/angular-ui-router.js:2717:22)
at http://127.0.0.1:9000/bower_components/angular-ui-router/release/angular-ui-router.js:2739:13 

Removing ng-grid="gridOptions" solves the problem hence why I am assuming my conflict arises between ui-router and ng-grid.

Any insights?

EDIT: this is how I declare gridOptions.

        $scope.gridOptions = {
        data: 'data',
        plugins: [new ngGridFlexibleHeightPlugin()],
        showSelectionCheckbox: true,
        columnDefs: [{ field: 'username', displayName: 'Name', width: "**" },
            { field: 'email', displayName: 'Email', width: "**"}]
    };

Answer 1

There's an open issue with this error regarding the conflict of ng-grid and ui-router and it seems that Herve Prot found a fix, I haven't tested it yet.

line 952 in build/ng-grid.js:

   grid.$topPanel.on('$destroy', function() {
           if(grid.$topPanel == null) // FIX ui-router
            return;

                grid.$topPanel.off('mousedown');

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

                grid.$topPanel = null;
            });

Answer 2

I also found I needed to change the below (see Alex Choroshin post)

grid.$groupPanel.on('$destroy', function () {
                if (grid.$groupPanel == null) // FIX ui-router
                    return;

                grid.$groupPanel.off('mousedown');

                grid.$groupPanel = null;
            });

Its just a few lines above the recommended fix.

Answer 3

I solved changing the order of jQuery dependency in my dependencies on index.html before the ui-router dependency.