Hi rani,
You can return false from beforeSelectionChange to disable selection of row on the grid based on the column value.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Disable ng-grid row selection</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
<script type="text/javascript" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngGrid']);
app.controller('MyController', function ($scope) {
$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 = {
data: 'Employees',
enablePinning: false,
multiSelect: false,
beforeSelectionChange: function (row) {
alert("Row Index : " + row.rowIndex)
if (row instanceof Array) {
return row;
} else {
if (row.entity != undefined && row.entity.Country == 'UK') {
return false;
} else {
return true;
}
}
},
columnDefs: [{ field: "Id", width: 50, sortable: false, enableCellEdit: false },
{ field: "Name", width: 150, sortable: true, enableCellEdit: false },
{ field: "City", width: 100, sortable: true, enableCellEdit: false },
{ field: "Country", width: 100, sortable: true, enableCellEdit: false}]
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-grid="GridOptions" style="width: 400px; height: 500px">
</div>
</div>
</body>
</html>
Demo
