Hi rani,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AngularJS UI-Grid selected row details</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.1/ui-grid.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.1/ui-grid.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection']);
app.controller('MyController', function ($scope, $http) {
$scope.Employees = [
{ Id: 1, Name: 'Nancy Davolio', City: 'Seattle', Country: 'USA' },
{ Id: 2, Name: 'Andrew Fuller', City: 'Tacoma', Country: 'USA' },
{ Id: 3, Name: 'Janet Leverling', City: 'Kirkland', Country: 'USA' },
{ Id: 4, Name: 'Margaret Peacock', City: 'Redmond', Country: 'USA' },
{ Id: 5, Name: 'Steven Buchanan', City: 'London', Country: 'UK' },
{ Id: 6, Name: 'Michael Suyama', City: 'London', Country: 'UK' },
{ Id: 7, Name: 'Robert King', City: 'London', Country: 'UK' },
{ Id: 8, Name: 'Laura Callahan', City: 'Seattle', Country: 'USA' },
{ Id: 9, Name: 'Anne Dodsworth', City: 'London', Country: 'UK' }
];
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
paginationPageSizes: [5, 25, 50, 75],
paginationPageSize: 5,
enableRowSelection: false,
enableSelectAll: true,
multiSelect: false,
columnDefs: [
{ field: 'Id', width: '75', enableSorting: false, enableFiltering: false },
{ field: 'Name', enableSorting: true, enableFiltering: true },
{ field: 'City', enableSorting: true, enableFiltering: true },
{ field: 'Country', enableSorting: true, enableFiltering: true }
],
onRegisterApi: function (gridApi) {
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
if (row.isSelected) {
alert("Id : " + row.entity.Id +
"\nName : " + row.entity.Name +
"\nCity : " + row.entity.City +
"\nCountry : " + row.entity.Country);
}
});
}
};
$scope.gridOptions.data = $scope.Employees;
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection style="width: 100%;height: 350px;"></div>
</body>
</html>
Screenshot
