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

rani
 
on Jul 30, 2019 09:49 PM
2877 Views

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.

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 31, 2019 03:37 AM
on Jul 31, 2019 03:40 AM

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