Last post Jul 20, 2015 04:22 AM by Krunal Parekh
Member
370 Points
305 Posts
Jul 18, 2015 09:49 AM|abhijithmanipal|LINK
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.
AngularJS SPA
All-Star
15252 Points
2074 Posts
Jul 20, 2015 04:22 AM|Krunal Parekh|LINK
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
Member
370 Points
305 Posts
ng-click not working in ui grid AngularJS
Jul 18, 2015 09:49 AM|abhijithmanipal|LINK
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 -
and my controller code - Controller.js
Module.config -
Any ideas are highly appreciated.
AngularJS SPA
All-Star
15252 Points
2074 Posts
Re: ng-click not working in ui grid AngularJS
Jul 20, 2015 04:22 AM|Krunal Parekh|LINK
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
script.JS
Hope this helps.
With Regards,
Krunal Parekh
AngularJS SPA
MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.