fix(cellNav): If cellNav api exists, turn on stuff

There was a bug caused by a combination of cellNav and subgrids. If the parent grid had cellNav turned on but the subgrids didn't, they would still attach event handlers for cellNav because the directive was looking for the cellNav controller in its parent chain. It existed, but on the wrong grid. This change looks for the presence of the cellNav api in the Grid to turn on the event handlers. Fixes #2294
angular-ui · Jan 29, 2015 · 1426454 · 1426454
1 parent d6eec4c
commit 1426454
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 10 deletions.
diff --git a/misc/demo/subgrid.html b/misc/demo/subgrid.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class="no-js" ng-app="test"><!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <title></title>
+    <meta content="width=device-width" name="viewport">
+
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
+    <link href="/dist/release/ui-grid.css" rel="stylesheet">
+
+    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
+    <script src="/lib/test/angular/1.2.26/angular.js"></script>
+    <script src="/dist/release/ui-grid.js"></script>
+
+    <style>
+        body {
+            padding: 60px;
+            min-height: 600px;
+        }
+        .grid {
+            width: 500px;
+            height: 400px;
+        }
+        .placeholder {
+            height: 50%;
+            width: 50%;
+            border: 3px solid black;
+            background: #ccc;
+        }
+    </style>
+</head>
+<body ng-controller="Main">
+<!-- <h1>Test</h1> -->
+
+<!-- <div class="row main"> -->
+<h2>Grid</h2>
+<button type="button" ng-click="swap()">Swap Columns</button>
+<br>
+<br>
+<div ui-grid="gridOptions" class="grid" ui-grid-cellnav ui-grid-expandable></div>
+<!-- <div class="placeholder"> -->
+<!-- </div> -->
+
+<br>
+<br>
+
+<script>
+    var app = angular.module('test', ['ui.grid', 'ui.grid.expandable', 'ui.grid.cellNav']);
+    app.controller('Main', function($scope, $http) {
+        $scope.gridOptions = {
+            expandableRowTemplate: 'subgrid',
+            expandableRowHeight: 150,
+        };
+        $scope.gridOptions.columnDefs = [
+            { field:'id' },
+            { field:'name' },
+            { field:'age' }
+        ];
+
+        $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
+            .success(function(data) {
+                data.forEach(function (d) {
+                    d.subGridOptions = {
+                        columnDefs: [ { field: "company" }, { field: "email" } ],
+                        data: data.slice(0, 100)
+                    };
+                });
+
+                $scope.gridOptions.data = data;
+            });
+    });
+</script>
+
+<script type="text/ng-template" id="subgrid">
+    <div ui-grid="row.entity.subGridOptions" style="height:140px;"></div>
+</script>
+
+</body>
+</html>
diff --git a/src/features/cellnav/js/cellnav.js b/src/features/cellnav/js/cellnav.js
@@ -910,12 +910,10 @@
           return {
             post: function ($scope, $elm, $attrs, controllers) {
               var uiGridCtrl = controllers[0],
-                 renderContainerCtrl = controllers[1],
-                 cellNavController = controllers[2];
+                 renderContainerCtrl = controllers[1];
 
               // Skip attaching cell-nav specific logic if the directive is not attached above us
-              if (!cellNavController) { return; }
-
+              if (!uiGridCtrl.grid.api.cellNav) { return; }
 
               var containerId = renderContainerCtrl.containerId;
 
@@ -987,14 +985,11 @@
       return {
         priority: -150, // run after default uiGridCell directive and ui.grid.edit uiGridCell
         restrict: 'A',
-        require: ['^uiGrid', '?^uiGridCellnav'],
+        require: '^uiGrid',
         scope: false,
-        link: function ($scope, $elm, $attrs, controllers) {
-          var uiGridCtrl = controllers[0],
-              cellNavController = controllers[1];
-
+        link: function ($scope, $elm, $attrs, uiGridCtrl) {
           // Skip attaching cell-nav specific logic if the directive is not attached above us
-          if (!cellNavController) { return; }
+          if (!uiGridCtrl.grid.api.cellNav) { return; }
 
           if (!$scope.col.colDef.allowCellFocus) {
             return;