Disable ng-grid row selection based on column value in AngularJS

Last Reply 19 days ago By dharmendr

Posted 19 days ago

How to disable row selection in ng-grid based on column value in angularjs

Bind (Populate) ng-grid from Database using AngularJS in ASP.Net

Is it possible to disable the selection of ng-grid based on column value.

 

Posted 19 days ago Modified on 19 days ago

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