Remove From My Forums

ng-click not working in ui grid AngularJS

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

Answered by:

ng-click not working in ui grid AngularJS

Question

Answers