Multiselect checkbox in ng-grid column header does not work

Question

I try to implement a checkbox in the column header of a ng-grid. The purpose of that is to be able to check or uncheck all of the checkboxes in the given column. Since i want to have more than one of such a column in the future, i do not want to use the row selection checkbox feature by ng-grid.

Now, if you run the plunkr code.. if you check and uncheck the checkboxes in the row/data section, everything seems to work fine, that means: If you select all checkboxes, the checkbox in the header will be checked as well.

Once you have checked or unchecked the checkbox in the header by mouseclick, this does not work anymore.

Steps to reproduce:

Run the script on plunker
Check every checkbox in the grid rows (NOT the one in the header row)
You gonna see, that the header checkbox is gonna be checked automatically (that's what i want)
Uncheck all checkboxes, by clicking the checkbox in the header
Repeat step 2, the result will not be the same (as in step 3)

Someone can explain me what's going on here? Maybe i am doing wrong, maybe it is a bug?

http://plnkr.co/edit/toM7Lrhs1otcjnpjrLGW

var app = angular.module('plunker', ['ngGrid']);

app.controller('MainCtrl', function($scope) {

    $scope.gridData = [
        {
            "id": 0,
            "checker": false
        }, {
            "id": 1,
            "checker": true
        }, {
            "id": 2,
            "checker": true
        }
    ];

    $scope.columnDefs = [{
        field: 'checker',
        displayName: 'Checker',
        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\" ng-change=\"toggleCheckerAll(checker);\"> \
            </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>"
    }];

    $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,
            allChecked = true;

        for (var r = 0; r < rows.length; r++) {
            if (rows[r].entity.checker !== true) {
                allChecked = false;
                break;
            }
        }

        $scope.gridOptions.$gridScope.checker = allChecked;
    };
});

I don't know enough about grids to know why, but if you print out the "checker" value you can see that clicking on it is NOT changing it's value. Like it is not properly bound. Sorry I can't help why that is but maybe you can start there. — Scott
Exactly, but i really did not find out how to make the binding working.. — delijah

lmyers lmyers · Accepted Answer · 2014-10-16T19:05:39

I think this is what you are looking for:

http://plnkr.co/edit/2hXm3ApM39e7YyyI79qb?p=preview

You had a 'dot' problem. I made checker an object so that when you changed the value, the model did not get disconnected.

  <input type=\"checkbox\" ng-model=\"checker.checked\" ng-change=\"toggleCheckerAll(checker.checked);\"> \

and in your toggleChecker:

 if (!$scope.gridOptions.$gridScope.checker)
      $scope.gridOptions.$gridScope.checker = {};

    $scope.gridOptions.$gridScope.checker.checked = allChecked;

See this video for a good explanation: Angular Dot Problem Explained

Multiselect checkbox in ng-grid column header does not work

1 Answers