Question

I have the below jqgrid image, from which I would like to remove the checkbox (pointed by arrow in the screenshot). I don’t want check all or uncheck all feature, but sometimes I do need max 3 checked not more than that so I need multiselect: true, any other way to remove the heading checkbox using jquery or anything else?

My code

$('#configDiv').empty();
            $('<div width="100%">')
            .attr('id','configDetailsGrid')
            .html('<table id="list1" width="100%"></table>'+
                    '<div id="gridpager"></div>'+
                '</div>')       
            .appendTo('#configDiv');    

            var grid = jQuery("#list1");


            grid.jqGrid({

              datastr : xml,
              datatype: 'xmlstring',
              colNames:['cfgId','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By','',''],
              colModel:[
                  {name:'cfgId',index:'cfgId', width:90, align:"left", hidden:true},
                  {name:'cfgName',index:'cfgName', width:90, align:"left", formatter: 'showlink', formatoptions:
                                                                            {
                                                                                baseLinkUrl:'javascript:',
                                                                                showAction: "goToViewAllPage('",
                                                                                addParam: "');"

                                                                            }},
                  {name:'hostname',index:'hostname', width:90, align:"left"},
                  {name:'cfgDesc',index:'cfgDesc', width:90, align:"left"},
                  {name:'productId',index:'productId', width:60, align:"left"},
                  {name:'cfgType',index:'cfgType', width:60, align:"left"},
                  {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"left"},
                  {name:'emailAddress',index:'emailAddress', width:120, align:"left"},
                  {name:'absolutePath',index:'absolutePath', width:90, align:"left", hidden:true},
                  {name:'fileName',index:'fileName', width:90, align:"left", hidden:true},
              ],
              pager : '#gridpager',
              rowNum:10,
              scrollOffset:0,
              height: 'auto',

              autowidth:true,
              viewrecords: true,
              gridview: true,
              multiselect: true,
              xmlReader: {
                  root : "list",
                  row: "Response",
                  userdata: "userdata",
                  repeatitems: false
              },
              onSelectRow: function(id,status){
                  var rowData = jQuery(this).getRowData(id); 
                  configid = rowData['cfgId'];
                  configname=rowData['cfgName'];
                  configdesc=rowData['cfgDesc'];
                  configenv=rowData['cfgType'];
                  absolutepath=rowData['absolutePath'];
                  /*filename=rowData['fileName'];
                  updatedate=rowData['updateDate'];
                  absolutepath=rowData['absolutePath'];*/
                  updateproductid=rowData['productId'];


                  $('#cfgid').removeAttr('disabled');
                  document.getElementById("cfgid").value=configid;
                  document.getElementById("cfgname").value=configname;
                  document.getElementById("cfgdesc").value=configdesc;

                  var element = document.getElementById('cfgenv');
                  if(configenv=="Production")
                      element.value = "Production";
                  else if(configenv=="Development")
                      element.value="Development";
                  else
                      element.value="Test/QA";
                  rowChecked=1;
                  currentrow=id;
                  }


            });
            grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});
            jQuery("#m1").click( function() {
                var s;
                s = grid.jqGrid('getGridParam','selarrrow');
                alert(s);
            });

I tried something like below, but did not work

$("#list1").find('input[type=checkbox]').parents('tr:first').remove();

Answer 1

Try this CSS:

#configDiv th input[type="checkbox"] {
    display: none;
}

If you need that to work in IE 6 (since it doesn’t support those CSS selectors), try this javascript:

grid.find('th input[type="checkbox"]').hide();