ng-grid with “select all” checkbox without showing a checkbox for each row

StackOverflow https://stackoverflow.com//questions/24010914

Question

I would like to know if there is a way to have a grid with the first column empty except for the header that must contain the "Select All" checkbox.

Using this code I have all the column full of checkboxes but setting "showSelectionCheckbox:false" also check "Select All" checkbox is hidden.

There is any way to do this ?

    <script type="text/javascript">
    var app = angular.module('myApp', ['ngGrid']);
    app.controller('MyCtrl', function($scope) {
    $scope.mySelections = [];
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { 
      data: 'myData',
      checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
      showSelectionCheckbox: true,
      selectWithCheckboxOnly: false,
      selectedItems: $scope.mySelections,
      multiSelect: true
    };
    });
   </script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
        <div class="selectedItems">{{mySelections}}</div>
    </body>
</html>

Many Thanks!

Was it helpful?

Solution

Add a checkboxCellTemplate and set the style for the input to display:none

    app.controller('MyCtrl', function($scope) {
      $scope.mySelections = [];
        $scope.myData = [{name: "Moroni", age: 50},
                         {name: "Tiancum", age: 43},
                         {name: "Jacob", age: 27},
                         {name: "Nephi", age: 29},
                         {name: "Enos", age: 34}];


        var ct_nocheck="<div class=\"ngSelectionCell\"><input style=\"display:none\" tabindex=\"-1\" class=\"ngSelectionCheckbox\" type=\"checkbox\" ng-checked=\"row.selected\" /></div>";                     

        $scope.gridOptions = { 
          data: 'myData',
          checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
          showSelectionCheckbox: true,
          selectWithCheckboxOnly: false,
          checkboxCellTemplate:ct_nocheck,
          selectedItems: $scope.mySelections,
          multiSelect: true
        };

    });

Here's a Plunker

Another way would be to add:

.ngSelectionCheckbox{
  display:none;
}

to your CSS.

Here is another Plunker

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top