Implement Check Uncheck all CheckBox in Header row of ng-grid in AngularJS

Last Reply 2 months ago By dharmendr

Posted 2 months ago

How to implement check uncheck all in ng-grid in AngularJS

Posted 2 months ago Modified on 2 months ago

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></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.gridData = [
                    { Id: 1, Name: 'Nancy Davolio', City: 'Seattle', Country: 'USA', "checker": false },
                    { Id: 2, Name: 'Andrew Fuller', City: 'Tacoma', Country: 'USA', "checker": true },
                    { Id: 3, Name: 'Janet Leverling', City: 'Kirkland', Country: 'USA', "checker": true },
                    { Id: 4, Name: 'Margaret Peacock', City: 'Redmond', Country: 'USA', "checker": true },
                    { Id: 5, Name: 'Steven Buchanan', City: 'London', Country: 'UK', "checker": true },
                    { Id: 6, Name: 'Michael Suyama', City: 'London', Country: 'UK', "checker": true },
                    { Id: 7, Name: 'Robert King', City: 'London', Country: 'UK', "checker": true },
                    { Id: 8, Name: 'Laura Callahan', City: 'Seattle', Country: 'USA', "checker": true },
                    { Id: 9, Name: 'Anne Dodsworth', City: 'London', Country: 'UK', "checker": true }
                ];
            $scope.columnDefs = [
                {
                    sortable: false,
                    field: 'checker',
                    displayName: '',
                    headerCellTemplate:
                        "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\"{ 'ngSorted': !noSortVisible }\"> \
                        <div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\"> \ {{col.displayName}} \
                        <input type=\"checkbox\" ng-model=\"checker.checked\" ng-change=\"toggleCheckerAll(checker.checked);\"> \</div> \</div>",
                    cellTemplate:
                        "<div class=\"ngCellText\" ng-class=\"col.colIndex()\"> \
                        <input type=\"checkbox\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-change=\"toggleChecker(COL_FIELD)\"> \</div>"
                },
                { 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 }
             ];

            $scope.gridOptions = {
                data: 'gridData',
                enableCellSelection: false,
                enableRowSelection: false,
                columnDefs: 'columnDefs'
            };

            $scope.toggleCheckerAll = function (checked) {
                for (var i = 0; i < $scope.gridData.length; i++) {
                    $scope.gridData[i].checker = checked;
                }
            };

            $scope.toggleChecker = function (checked) {
                var rows = $scope.gridOptions.$gridScope.renderedRows;
                var allChecked = true;

                for (var r = 0; r < rows.length; r++) {
                    if (rows[r].entity.checker !== true) {
                        allChecked = false;
                        break;
                    }
                }
                if (!$scope.gridOptions.$gridScope.checker) {
                    $scope.gridOptions.$gridScope.checker = {};
                }
                $scope.gridOptions.$gridScope.checker.checked = allChecked;
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-grid="gridOptions" style="width: 450px; height: 350px">
        </div>
    </div>
</body>
</html>

Demo