title: Column data clickable in UI-Grid
body: <p>I want to make the data inside one of the cell in ui-grid as clickable.</p>
  
  <p>Here is my code:-</p>
  
  <p><strong>InventoryList.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;style&gt;
              .gridStyle {
                  border: 5px solid #d4d4d4;
                  height: 200px;
              }
          &lt;/style&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" /&gt;
          &lt;script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"&gt;&lt;/script&gt;   
          &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"&gt;&lt;/script&gt;
          &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;         
          &lt;script src="../Scripts/AngularControllers/InventoryListController.js"&gt;&lt;/script&gt;   
      &lt;/head&gt;
      &lt;body ng-app="appHome"&gt;
          &lt;div ng-controller="ctrlInvList"&gt;
              &lt;div class="gridStyle" ui-grid="gridInvList"&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>InventoryListController.js</strong></p>
  
  <pre><code>var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
  myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {    
      $scope.gridInvList = {
          data: 'invlistdata',
          enableFiltering: true,       
          paginationPageSize: 10,        
          columnDefs: [
              {
                  field: 'SiteInventoryNumber', displayName: 'Inventory Number',                 
              },
              { field: 'InventoryTypeName', displayName: 'Inventory Type' },
              { field: 'MakeModel', displayName: 'Make Model' },          
              { field: 'CityName', displayName: 'City Name' },
              { field: 'Specification', displayName: 'Specification' },            
          ]
      }   
  }]);
  </code></pre>
  
  <p>If I go by this code then the grid looks like below:-</p>
  
  <p><a href="https://i.stack.imgur.com/mX1M0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mX1M0.png" alt="enter image description here"></a></p>
  
  <p>But when I want to make "Inventory Number" Column as Clickable then I introduce following code as searched from internet. Please look at the cellTemplate portion</p>
  
  <p><strong>InventoryListController.js</strong></p>
  
  <pre><code>var myApp = angular.module('appHome', ['ui.grid', 'ui.grid.pagination', 'ui.bootstrap']);
  myApp.controller("ctrlInvList", ['$scope', 'MetadataOrgFactory', '$uibModal', function ($scope, MetadataOrgFactory, $uibModal) {    
      $scope.gridInvList = {
          data: 'invlistdata',
          enableFiltering: true,       
          paginationPageSize: 10,        
          columnDefs: [
              {
                  field: 'SiteInventoryNumber', displayName: 'Inventory Number',  
                  cellTemplate: '&lt;div ng-click="grid.appScope.foo()" &gt;&lt;/div&gt;'
              },
              { field: 'InventoryTypeName', displayName: 'Inventory Type' },
              { field: 'MakeModel', displayName: 'Make Model' },          
              { field: 'CityName', displayName: 'City Name' },
              { field: 'Specification', displayName: 'Specification' },            
          ]
      } 
  
      $scope.foo = function ()
      {
          alert("Hello");
      }
  }]);
  </code></pre>
  
  <p>This output the following result:-</p>
  
  <p><a href="https://i.stack.imgur.com/aISW5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aISW5.png" alt="enter image description here"></a></p>
  
  <p>Can you please let me know as what needs to be rectified in order to get the correct results?</p>