Action Button in Angular UI Grid 3.x version

Question

I am trying to render a simple table using Angular UI Grid (unstable version). Against each row I need a button when clicked should be handled in my parent controller.

Plunker

Javascript:-

angular.module("app", ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.pagination', 'ui.grid.expandable', 'ui.grid.paging']).controller("appController", function($scope) {
  console.log("Controller is up.");
  $scope.data = [];
  for (var i = 0; i < 50; i++) {
    $scope.data.push({
      fullName: "Name" + i,
      age: i
    });
  }

  $scope.clickHandler = function(){
    // this never gets invoked ?!
    console.log("Row Action click Handler.");
  };


  $scope.gridOptions = {
    data: $scope.data,
    columnDefs:[ {name:'fullName',field:'fullName'},
              {name:'age',field:'age'},
              {name:' ',cellTemplate:'<div><button ng-click="clickHandler()">Click Here</button></div>'}
            ]
  };
});

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css">
  <link rel="stylesheet" href="style.css">
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
  <script src="script.js"></script>
</head>

<body data-ng-app="app">
  <h1>Angular UI Grid unstable</h1>
  <div data-ng-controller="appController">
    <div class="grid" ui-grid="gridOptions">
      Test 
    </div>
  </div>

</body>

</html>

As in code, to render the action button I have used columnDefs with inline template for the third column.

PROBLEM

Clicking the button doesn't work. I expect ' $scope.clickHandler' function to be executed on click. Also, I should be able to pass 'name' as argument to the click handler.

Here's a plunker with similar usage and it seems to fire ng-click inside clickhandler: http://plnkr.co/edit/BZKiZoevJQ1YgR0w7yy6?p=preview — trainoasis, Dec 23 '14 at 13:35
@trainoasis; Your plunker seems to be working fine.But, 1) You are using ng-grid (the older version of UI Grid) 2) What is wrong in mine ? — Kumar Sambhav, Dec 23 '14 at 13:47
This plunker is not mine, just found it while searching for your solution. I can't see anything really wrong with yours at the moment, I suggest you go side-by-side with the working one and perhaps find your issue — trainoasis, Dec 23 '14 at 13:49

score 41 · Answer 1 · answered Apr 20 '15 at 15:25

41

Easier than @mainguy in my opinion is:

Adding grid.appScope. before your $scope member.
For example in your case to call $scope.clickHandler:

cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'

answered Apr 20 '15 at 15:25

gdoron

147,333
58
291
367

score 21 · Accepted Answer · edited May 01 '16 at 17:58

21

In the new ui-grid everything happens in an isolated scope. So they added functionality to handle external scopes.

Here is what to do:

In the html define you grid like this:

<div class="grid" external-scopes="clickHandler" ui-grid="gridOptions">

Also add the external scope object (with a callable function) to your controller:

 $scope.clickHandler = {
     onClick : function(value){
        alert('Name: '+value);
     }
 };

Finally define your cellTemplate like this:

{
    name:'Action',
    cellTemplate: '<div><button ng-click="getExternalScopes().onClick(row.entity.fullName)">Click Here</button></div>'
}

Here is your forked Plunker

edited May 01 '16 at 17:58

Jack Song

1,355
13
22

answered Dec 23 '14 at 16:32

mainguy

8,283
2
31
40

Thanks. It is working. Where can I read about this new 'isolated' scope approach? – Kumar Sambhav Dec 24 '14 at 05:49
1

FYI, you can use grid.appScope with appScopeProvider instead of external-scopes – maxisam Oct 14 '15 at 23:07

score 6 · Answer 3 · answered Nov 25 '15 at 15:06

6

Similar to @gdoron's answer but for controllerAs syntax. In your controller, you should set appScopeProvider option to point to this object:

this.gridOptions = {
  ...,
  appScopeProvider: this
};

Then, cellTemplate:'<button ng-click="grid.appScope.clickHandler()">Click Here</button>'

FYI: by default, the parent scope of the ui-grid element will be assigned to grid.appScope this property allows you to assign any reference you want to grid.appScope

answered Nov 25 '15 at 15:06

lvarayut

13,963
17
63
87

You can also do `grid.appScope.{controllerAs variable here}.clickHandler()` so if your controllerAs variable was 'm', you could do `grid.appScope.m.clickHandler()`. – Travis Heeter Jul 11 '17 at 02:02

score 0 · Answer 4 · answered Jun 01 '15 at 16:22

0

Have notice, if you are using routing config instead of assigning the app-controller directly, getExternalScopes() method works as expected with one note

in the respective controller, assign the below statement $scope.gridScope = $scope;

answered Jun 01 '15 at 16:22

vonbalaji

249
2
10

Action Button in Angular UI Grid 3.x version

PROBLEM

4 Answers4