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.