selection of non editable row in jqgrid

Question

I have a jqgrid with few rows non-editable. My problem is i want to disable the checkbox which is inf ront of a non editable row. right now i am able to make row data non editable but checkbox in front is not disabled and can be selected on click on it

my code is below : I am using JSON to pass data:

inside code these lines are used to diable row, I pass inside JSON 'ReadOnly' for some rows. complete code for jqgrid is below:

beforeSelectRow: function(rowid, e) {
            var grid = $('#list4');
            var data = grid.getRowData(rowid);
            if (data.accessType == 'ReadOnly') { 
                 $(#id).attr('disabled', true);
                 return false;
            }else{
                return true;
            }


var dateoflaunchTxt = 'The launch date of a project refers to the first day when units are made available to prospective home-buyers (i.e. issue of the Option-to-Purchase) including private previews or any other occasion which may take place before the official launch of the project.';
var grid = $("#list4");
grid.jqGrid({
datastr: <%=jsonGridData%>,
datatype: "jsonstring",
height: 400,
    colNames:['S No','Date of Launch','No of Units','Access Type'],
    colModel:[
           {name:'id',index:'id', width:40,align:"center", sorttype:"int"},
           {name:'dateofLaunch',index:'dateofLaunch',align:"center", width:75, sorttype:"date",sortable:true
            ,editable:true , editoptions: {
                        dataInit: function (element) {
                            $(element).datepicker({
                                dateFormat:"dd/mm/yy",
                                onSelect: function(dateText, inst) { 
                                     var $input = inst.input; // the datepicker input
                                     var $row = $input.parents("tr"); 
                                     $("#list4").jqGrid('saveRow',$row.attr("id"), false);
                                     }
                                });

                        }
                    }},
           {name:'noOfUnits',index:'noOfUnits', align:"center",width:40, sorttype:"integer",sortable:true,editable:true},
           {name:'accessType',index:'accessType', align:"center",width:40, sortable:false,editable:false}
    ],
        jsonReader : {
          root: "rows",
          page: "page",
          total: "total",
          records: "records",
          repeatitems: true,
          cell: "cell",
          id: "id"
    },
        editurl: "clientArray",
        multiselect: true,
        pagination:true,
        pager: '#search',
        rowNum: 15,
        rowList: [5,10,15,30,45,60],
        sortname: 'id',   
        sortorder: 'asc',
        sortable:true,
        viewrecords: true,
        loadonce: true,  
        pgtext : "Page {0} of {1}",
        emptyrecords:'No Records',
        loadtext:'Loading ...',
        showpage:true,   
        caption: "Launch Info",
        headertitles: true,
        cellEdit: true,
        cellsubmit: 'clientArray',
        beforeSelectRow: function(rowid, e) {
            var grid = $('#list4');
            var data = grid.getRowData(rowid);
            if (data.accessType == 'ReadOnly') { 
                 $(#id).attr('disabled', true);
                 return false;
            }else{
                return true;
            }
        },              
        loadComplete: function(){gridComplete();
        }

}).jqGrid('navGrid','#pager',
          {edit:false, add:false, del:false, search:false, refresh:true});
grid.setLabel ('dateofLaunch','','',{'title':dateoflaunchTxt});

jQuery("#list4").hideCol("id");
jQuery("#list4").hideCol("accessType");
$("#list4").jqGrid('setGridState','hidden');
$("#list4").jqGrid('setGridState','visible');
//$('#list4').setGridParam({sortname:'id'}).trigger('reloadGrid');
jQuery("#list4").setGridWidth(500);

function pickdates(id){
    jQuery("#"+id+"_dateofLaunch","#list4").datepicker({dateFormat:"dd-mm-yy", constrainInput: true});
}

image :

I have selected non-editable row, see i am allowed to check the checkbox but row is not highlighted, for editable rows it will be highlighted

All i want is to disable this checkbox from front of all non-editable rows and it should be enabled for editable units

Thanks

Answer 1

Added one more column in jqgrid ( set it as hidden) Value for this hidden field was calculated while making JSON array data for JQ grid. Based on value of this hidden column i would set row as editable or non editable while loading JQgrid.

Answer 2

Hi do not use jqGrid 'multiselect' add your own column as below

  {name:'my_clickable_checkbox',index:'my_clickable_checkbox',formatter: "checkbox", formatoptions: {disabled : false}},

and

onGridComplete:function(){
     //here enable or disable 'my_clickable_checkbox' column based on your condition
}