Angular UI Grid, adding a button to a row cell via templating
22,574
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>
![Dayan](https://i.stack.imgur.com/0R9ZC.png?s=256&g=1)
Author by
Dayan
I'm a full stack developer that started native android development back in 2017 and now writing Godot's gdscript code at night; working towards my first game!
Updated on July 05, 2022Comments
-
Dayan about 2 years
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?