Angular UI Grid, adding a button to a row cell via templating

Question

I got the following gridOptions.columnDefs

 $scope.generateReport = function(row) {
     alert("Test");
 };

 $scope.gridOptions.columnDefs = [
     { name: 'Action', 
       cellEditableCondition: false, 
       cellTemplate: '<button ng-click="grid.appScope.generateReport(row)"> 
                       Report 
                      </button>' 
     }];

It's not working, the button shows but once clicked its not calling the function. I'm following their guide Here, and I'm using ui-grid - v3.0.0-RC.18.

I got the following for my html.

        <div id="grid1"
             ui-grid="gridOptions"
             ui-grid-cellnav
             ui-grid-edit
             ui-grid-expandable
             ui-grid-exporter
             class="myGrid">
        </div>

I also tried to add an external-scope but didn't make a difference..

Any ideas?

score 4 · Accepted Answer · answered Feb 26 '15 at 22:47

4

My ng-click for a button in a ui-grid row looks like this.

ng-click="getExternalScopes().delete($event, row)

My controller has $scope injected and the first line creates the reference (I believe) to the external scope.

app.controller("MyController", function ($scope) {
$scope.$scope = $scope;

The HTML looks like this, which refers to the external scope.

<div ui-grid="gridOptions" class="someClass" external-scopes="$scope" ui-grid-selection ui-grid-resize-columns></div>

Here is my entire cellTemplate if it helps...

<div class="ui-grid-cell-contents ng-binding ng-scope"><button class="btn btn-danger {{getExternalScopes().deleteButtonClass(row)}} btn-xs btn-block" ng-click="getExternalScopes().delete($event, row)"><span class="glyphicon glyphicon-trash"></span></button></div>

answered Feb 26 '15 at 22:47

S. Baggy

950
10
21

Just read on another post that external-scope is being slowly deprecated. It works in the version I am using now though, which is a month or two old. See http://stackoverflow.com/questions/26688746/conditional-cell-template-in-ui-grid-angularjs?rq=1 – S. Baggy Feb 26 '15 at 22:51
1

I upgraded to their latest release RC20 and its working fine with `grid.appScope.generateReport`. I had R18 and supposedly it should've worked with that release as well too. What version are you using in your example? – Dayan Feb 26 '15 at 23:04
I am using v3.0.0-RC.18. I upgraded recently to the latest release, but the tabbing behaviour of editable grids had changed drastically, so I went back to the old release for now. Looks like you perhaps had a mismatch between documentation and code? – S. Baggy Feb 27 '15 at 03:59
Yeah pretty much so, thanks for your answer though it does work on RC18 so I will accept and hopefully others that get stuck here can see this. – Dayan Feb 27 '15 at 12:52

Angular UI Grid, adding a button to a row cell via templating

1 Answers1