Datagrid checkbox toggle group

[devnull]

I have 2 checkboxes in a datagrid in seperate columns that allow the user to only select one option (Pass/Fail) and not to select both.

I need for the checkboxes to always be visible and the default state should be that both are unchecked.

Then if the user checks one, if the other is checked it should be un-checked.

The problem is that the checkboxes only appear once the user clicks the line, and I need them to be always visible.

I also need to update the STATUS field to display the Pass / Fail status but I can probably figure that out.

Code:

  $('#qpdata').datagrid({
    fit:true,
    rownumbers:true,
    singleSelect:true,
    selectOnCheck:false,
    columns: [ [
      {field:"QTI_PASS",title:"Pass",align:"center",width:75,editor:{type:'checkbox',options:{on:'Pass',off:''}}},
      {field:"QTI_FAIL",title:"Fail",align:"center",width:75,editor:{type:'checkbox',options:{on:'Fail',off:''}}},
      {field:"QTI_STATUS",title:"Status",width:75,styler:function(val,row,idx){if(!val) return; else if(val=="Fail") return {class:'fail'}; else return {class:'pass'}}}
    ]],

[stworthy]

When begin to edit a row, the 'onBeginEdit' event fires. You can get the editors and bind some events to achieve you functionality.

Code:

$('#dg').datagrid({
  onBeginEdit:function(index,row){
    var c1 = $(this).datagrid('getEditor', {index:index,field:'QTI_PASS'});
    var c2 = $(this).datagrid('getEditor', {index:index,field:'QTI_FAIL'});
    $(c1.target).bind('change',function(){
      if ($(this).is(':checked')){
        $(c2.target)._propAttr('checked', false);
      }
    })
    $(c2.target).bind('change',function(){
      if ($(this).is(':checked')){
        $(c1.target)._propAttr('checked', false);
      }
    })
  }
})