insert ng-click event into ng-grid

Question

i want to do something that i don't know if it is possible

HTML

<!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
 </html>

JS

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { data: 'myData',
                         cellTemplate:'<div class="ngCellText" ><a ng-click="foo()">{{row.getProperty(col.field)}}</a></div>' 
    }
    $scope.foo = function() {  

        alert('');
    };
});

I want to put a ng-click event on a row in a ng-grid,i have take the idea looking around, but I don't really understand if it is possible and, if it is so, if that's the right way to do that. In this code, that seems to be good to me, the app doesn't start the alert, any suggest or ideas?

Here is the plunker http://plnkr.co/edit/U6wdWTAV30HRhJk8xFPA?p=preview

thanks but it didn't work do you have any idea why?have you try the plunker? — mautrok, Feb 27 '14 at 16:01
This is a very late answer to this question, but I was working with the same problem. The example given in the answer by @mainguy didn't really address the problem with the click event on the input control. Here is a working example. hth. http://plnkr.co/edit/6IWa29ewYywLI1ghPgxe?p=preview — BigDubb, Jan 24 '15 at 07:18

KuN · Answer 1 · 2015-09-28T05:02:48.780

The document on their github site is really old.

here is a link to the right page for this problem. http://ui-grid.info/docs/#/tutorial/305_appScope

        yourCtrl.gridOptions = {
            enableFiltering: true,
            enableHiding : false,
            enableSorting: true,
            appScopeProvider : yourCtrl,
            rowTemplate: '<div ng-click="grid.appScope.doSomething(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="col.colIndex()" ui-grid-cell></div>',
        };

        yourCtrl.doSomething = function(row) {
            alert("lala");
        }

yes, somehow

ng-click="grid.appScope.doSomething"

won't work

score 8 · Accepted Answer · answered Feb 27 '14 at 16:26

8

These definitions work for me:

  $scope.gridOptions = {
    data: 'myData',
    columnDefs: [{
        field: 'name',
        displayName: 'Name',
        cellTemplate: '<div  ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>'
      }, {
        field: 'age',
        displayName: 'Age',
        cellTemplate: '<div  ng-click="foo()" ng-bind="row.getProperty(col.field)"></div>'
      }

    ]
  };

See your forked Plunker here

answered Feb 27 '14 at 16:26

mainguy

8,283
2
31
40

6

The correct answer is to use `grid.appScope`, as explained here: http://stackoverflow.com/a/33792526/492130 – f.ardelian Feb 08 '16 at 15:38
1

Yes, I know. But this question was about ng-grid not ui-grid. Thanks anyhow for pointing this out. – mainguy Feb 09 '16 at 08:17
Right! Thanks for updating this. I forgot to mention that `ng-grid` has been deprecated in favor of `ui-grid`. So if you can move to `ui-grid`, you should move and you should use `grid.appScope`. – f.ardelian Feb 09 '16 at 12:12
But what happens when you want to move but you can't move? Mr. Anderson? :-) – mainguy Feb 09 '16 at 12:41
Quit your job, lawyer up, hit the gym! – f.ardelian Feb 09 '16 at 16:41

score 6 · Answer 3 · answered Dec 04 '15 at 13:40

$scope.ShowDetails=function(_obj)
{
   alert('Hi! ' + _obj);
}

$scope.gridOptions = {
    columnDefs: [
      { name: 'Search', field: 'Col1', cellTemplate: '<div ng-click="grid.appScope.ShowDetails(row)"><img src="/images/search.png" /></div>' },
      { name: 'Col2', displayName: 'Col2' },
    ]};

Here the example to attach an event to a ui grid cell.

insert ng-click event into ng-grid

HTML

JS

3 Answers3

Linked