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?

S. Baggy · Accepted Answer · 2015-02-26 22:47:31Z

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, 2015 at 22:47

S. Baggy

95810 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

S. Baggy Over a year ago

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 stackoverflow.com/questions/26688746/…

Dayan Over a year ago

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?

S. Baggy Over a year ago

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?

Dayan Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related