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

Last Reply one year ago By dharmendr

Posted one year 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.


You are viewing reply posted by: dharmendr one year ago.
Posted one year ago Modified on one year 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 xmlns="http://www.w3.org/1999/xhtml">
    <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}]
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-grid="GridOptions" style="width: 400px; height: 500px">