Login/Register
insert ng-click event into ng-grid
Asked Answered
Solved angularjseventsangular-uing-gridangularjs-ng-click
M

3

9

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

Mouthpart answered 27/2, 2014 at 15:57 Comment(2)
thanks but it didn't work do you have any idea why?have you try the plunker? – Mouthpart
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. plnkr.co/edit/6IWa29ewYywLI1ghPgxe?p=preview – Beatrizbeattie
A
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

Autoionization answered 27/2, 2014 at 16:26 Comment(5)
The correct answer is to use grid.appScope, as explained here: https://mcmap.net/q/752961/-angular-ui-grid-events-in-cell-header-not-firing – Pennyroyal
Yes, I know. But this question was about ng-grid not ui-grid. Thanks anyhow for pointing this out. – Autoionization
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. – Pennyroyal
But what happens when you want to move but you can't move? Mr. Anderson? :-) – Autoionization
Quit your job, lawyer up, hit the gym! – Pennyroyal
C
10

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

Conjugal answered 28/9, 2015 at 3:53 Comment(0)
A
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

Autoionization answered 27/2, 2014 at 16:26 Comment(5)
The correct answer is to use grid.appScope, as explained here: https://mcmap.net/q/752961/-angular-ui-grid-events-in-cell-header-not-firing – Pennyroyal
Yes, I know. But this question was about ng-grid not ui-grid. Thanks anyhow for pointing this out. – Autoionization
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. – Pennyroyal
But what happens when you want to move but you can't move? Mr. Anderson? :-) – Autoionization
Quit your job, lawyer up, hit the gym! – Pennyroyal
J
6
$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.

Jamnis answered 4/12, 2015 at 13:40 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.