locked
ng-click not working in ui grid AngularJS RRS feed

  • Question

  • User1082734430 posted

    Hi All,

    I am stuck in a basic problem of click event in ui grid. Below is my code of HTML and Controller.js -

    HTML -

    <html ng-app="app">
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title>MoneyGram Mobile Messaging Service</title>
    	<meta name="description" content="">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    
    	<script src="../../scripts/angular.min.js"></script>
    
    	<link href="../../content/ui-grid-unstable.css" rel="stylesheet" />
             <script src="../../scripts/ui-grid-unstable.js"></script>
    	<script src="../app.js"></script>
    	<script src="../controllers/templateController.js"></script>
    
    </head>
    <body>
    	<h3>MoneyGram Mobile Messaging Service</h3>
    
    	<div ng-controller="templateCtrl">
    		<div id="grid1" ui-grid="gridOptions" class="grid"></div>
    	</div>
    </body>
    
    </html>
    

    and my controller code - Controller.js

    app.controller('templateCtrl', ['$scope', '$http', function ($scope, $http) {
    
    	$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
    		if (col.filters[0].term) {
    			return 'header-filtered';
    		} else {
    			return '';
    		}
    	};
    
    	$scope.openMessageScreen = function (row) {
    		var selectedMsgTemplateId = row.entity.Id;
    
    		alert(selectedMsgTemplateId);
    	};
    
    	$scope.gridOptions = {
    		enableFiltering: true,
    		onRegisterApi: function (gridApi) {
    			$scope.gridApi = gridApi;
    		},
    		columnDefs: [
    		  { name: 'Message Template Id', field: 'Id', enableFiltering: false },
    		  { name: 'Friendly Name', field: 'Name' },
    		  { name: 'Message Type', field: 'MessageType' },
    		  { name: 'Created By', field: 'CreatedBy' },
    		  { name: 'Created Date', field: 'CreatedDate' },
    		  { name: 'Approved By', field: 'ApprovedBy' },
    		  { name: 'Approved Date', field: 'ApprovedDate' },
    		  { name: 'Status', field: 'Status' },
    		  {
    		  	name: 'Details',
    		  	cellTemplate: '<button ng-click="grid.appScope.openMessageScreen(row)">View</button>',
    		  	enableFiltering: false,
    		  	enableSorting: false
    		  }
    		]
    	};
    
    	$http.get('serviceURL')
    	  .then(function (response) {
    	  	$scope.myData = response.data;
    
    	  	$scope.gridOptions = {
    	  		data: $scope.myData
    	  	};
    	  });
    }])

    Module.config -

    var app = angular.module('app', ['ui.grid']);
    

    Any ideas are highly appreciated.

    Saturday, July 18, 2015 9:49 AM

Answers

  • User1644755831 posted

    Hello abhijith,

    Please see: http://ui-grid.info/docs/#/tutorial/305_appScope

    Make sure there are no console error. Try to see using Developer Tools.

    Here is a working demo of the problem. http://plnkr.co/edit/F8CNgpzc1UEGRengYTSY?p=preview

    HTML

    <!DOCTYPE html>
    <html ng-app="app">
    
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    
    	<link href="//cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" rel="stylesheet" />
    
    	<script src="//cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
    	
        <link rel="stylesheet" href="style.css" />
      
      </head>
    
      <body ng-app='app'>
    	<h3>MoneyGram Mobile Messaging Service</h3>
    
    	<div ng-controller="templateCtrl">
    		<div id="grid1" ui-grid="gridOptions" class="grid"></div>
    	</div>
      <script src="script.js"></script>
    </body>
    </html>
    

    script.JS

    // Code goes here
    
     var app = angular.module('app', ['ui.grid']);
    app.controller('templateCtrl', ['$scope', '$http', function ($scope, $http) {
    
      
      
     $scope.showMe = function(row){
                       alert(row.entity.firstName);
                   };
     
     $scope.gridOptions = {};
    
      
        $scope.gridOptions.columnDefs = [
             { name: 'firstName' },
             { name: 'lastName'},
             { name: 'company'},
             { name: 'ShowScope',cellTemplate:'<button class="btn primary" ng-click="grid.appScope.showMe(row)">Click Me</button>' }
           ];
    
      
      $scope.gridOptions.data = [
        {
            "firstName": "Cox",
            "lastName": "Carney",
            "company": "Enormo",
            "employed": true
        },
        {
            "firstName": "Lorraine",
            "lastName": "Wise",
           "company": "Comveyer",
           "employed": false
       },
        {
            "firstName": "Nancy",
            "lastName": "Waters",
            "company": "Fuelton",
            "employed": false
        }];
      
    }]);

    Hope this helps.

    With Regards,

    Krunal Parekh

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 20, 2015 4:22 AM