Hidden True attribute makes subgrid misalligned

Hidden True attribute makes subgrid misalligned

Hi 
I am using jqgrid and   have one issue in sub grid. When i added the attribute hidden:true for the Id field my subgrid becomes unordered and the header and the columns and not alligned properly. This is my Code: 


                  var colNames = [ '','Product Name', 'Product Type', 'Product Subtype', 'Manufacturer', 'Status'];
    var colModels =[{name : 'productId',index : 'productId',hidden:true},
                   {name : 'productName',index : 'productName', align:"left"},
                 {name : 'type',index : 'type', align:"left"}, 
                 {name : 'subType', index : 'subType', align:"left"},
                 {name : 'manufacturer', index : 'manufacturer', align:"left"},
                 {name : 'status', index : 'status', align:"left"}
                 
       ];

datatype : 'json',
         colNames : colNames, 
      colModel : colModel,
      postData : data,
  rowNum : 10,
  rowList : [ 10, 20, 40, 60 ],
  //height : 440,
  autowidth : true,
  rownumbers : false,  
  viewrecords : true,
  sortorder : "asc",
  emptyrecords : "No Result Found",
  loadonce : false,
  altRows: true,
         altclass: 'altRow',
         hoverrows: false,
  toolbar: [false,"top"],
 
  caption : caption,
  loadComplete : function() {
  },
  jsonReader : {
  root : "gridRecords",
  page : "page",
  total : "total",
  records : "records",
  repeatitems : false,
  cell : "cell",
  id : "id"
  },
  afterInsertRow: function(rowId,rowData,rowelem) {
  $("#"+rowId).doubletap(function(event){
 
 
  var productId = $("#"+rowId).get(0).cells[0].innerHTML;

  loadProduct(productId);
         
  }) ;

  },
             
         });
          $("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false});

Please help so that the grid becomes alligned properly and the Id would be not seen.

thanks in advance.