ng-grid - is it possible to have multiple selection columns like checkbox and radio button columns?

Question

I'm trying to create a table using ng-grid (I'm new to angularjs and ng-grid), which has the following columns:

1. checkbox selection column.
2. radio button selection column.
3. other columns are data columns.

What I want to achieve:

1. When user can select/unselect any rows in checkbox column.
2. User can only select a radio button only when the corresponding checkbox column is selected.
3. Across all rows, only one radio button should be selected.
4. Restrict selection of rows, only using column one and two. This is needed because when user clicks on columns other than one and two, the row gets selected and 'afterSelectionChange' event is fired but the radio button and checkbox does not toggle.

Snippet of what I'm doing in $scope.gridOptions:

   columnDefs : [ { 
                     field: '', 
                     displayName: 'Checkbox', 
                     cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="true" /></div>'
                   },
                   { 
                     field:'', 
                     displayName:'Radio'
                     cellTemplate :'<div class="ngSelectionCell"><input tabindex="-1" type="radio" ng-checked="{{defaultValue}}"/></div>'
                   },
                   { 
                     field:'name', 
                     displayName:'Name'
                   } ],
    multiSelect: true,
    enableRowSelection: true, // needed to be able to select via radio button
    plugins: [new ngGridFlexibleHeightPlugin()],
    selectedItems:$scope.selectedRows,
    afterSelectionChange: function(rowItem, event) {
        // What should be done?
    }

Any suggestions on how I can achieve what I want to would be great. Thank you very much for your time.

Answer 1

I'm not sure what it is good for, but it sounded like an interesting question.

Your grid data should look something like this:

$scope.myData = [{id:1,name: "Moroni", age: 50,changeable:true},
                 {id:2,name: "Tiancum", age: 43,changeable:true},
                 {id:3,name: "Jacob", age: 27,changeable:false},
                 {id:4,name: "Nephi", age: 29,changeable:true},
                 {id:5,name: "Enos", age: 34,changeable:true}];
$scope.selID=2;   

The id and the changeable attribute in myData are there to determine which row is affected by the checkbox.

The $scope.selID is there to find out which row is currently checked by the radio button.

The actual columnDefs contains the templates:

   columnDefs : [ { 
                 field: 'changeable', 
                 displayName: 'Checkbox', 
                 cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-model="row.entity.changeable"/></div>'
               },
               { 
                 field:'name', 
                 displayName:'Radio',
                 cellTemplate :'<div class="ngSelectionCell"><input tabindex="-1" type="radio" ng-disabled="(row.entity.changeable==false)" ng-checked="isChecked(row.entity.id)" ng-click="setSel(row.entity.id)"/></div>'
               },
               { 
                 field:'name', 
                 displayName:'Name'
               },{ 
                 field:'age', 
                 displayName:'Age'
               } ]

There are two additional functions in the scope to toggle the (radio) selected row and to find out if a row is changeable:

    $scope.isChecked=function(id){
      if (id==$scope.selID){
        return true;
      }else{
        return false;
      }
    }

   $scope.setSel=function(id){
     $scope.selID=id;
   } 

Here is a Plunker with full code that worked for me several seconds ago. For the moment it does not display anything since the ng-grid server seems to be down (again!). Try again in a few hours!