title: jqgrid Subgrid as a Grid: Edit, Add, Search Icons not appearing in Subgrid
body: <p>This is the code for my Grid.  But for some reason the edit, add, and search icons are not displaying in subgrid:</p>
  
  <pre><code>$(document).ready(function(){            
      var gridwidth = $('.tableContainer').width(); 
      gridwidth = gridwidth-40; 
      var myGrid = jQuery("#list");
      editSettings = {
         recreateForm:true,               
         reloadAfterSubmit:false,
         closeOnEscape:true,
         closeAfterEdit:true,
         width:"1250"             
       },
      addSettings = {
          recreateForm:true,          
          reloadAfterSubmit:false,
          closeOnEscape:true,
          closeAfterAdd:true              
      }; 
      myGrid.jqGrid(
      {
          url:'projects.cfc?method=getProjects&amp;returnformat=json&amp;_cf_nodebug=true', //CFC that will return the projects
          datatype: 'json', //We specify that the datatype we will be using will be JSON
          complete: function(jsondata, stat) {
              if (stat == "success") {
                  myGrid = jQuery("#list")[0];
                  myGrid.addJSONData(JSON.parse(jsondata.responseText).d);
              } else {
                  alert('Error processing JSON');
              }
          },
          colNames:[ .....],
          colModel :[{ ...}], //it the operators available during search
          pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager
          rowNum: 150, //Number of records we want to show per page
          rowList:[20,30,40,50,75,150], //Row List, to allow Initiative to select how many rows they want to see per page
          sortorder: "asc", //Default sort order
          sortname: "PROJECTS.PROJECTID", //Default sort column
          viewrecords: true, //Shows the nice message on the pager
          imgpath: '/images', //Image path for prev/next etc images
          caption: 'Initiatives', //Grid Name
          recordtext: "Record {0} - {1} of {2}",//Pager information to show
          rownumbers: false,//Do not show row numbers
          sortable: true,
          width:'auto',
          height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
          mtype:'POST',
          toolbar:[true,"bottom"], //Shows the toolbar at the top. We will use it to display Initiative feedback
          subGrid: true,
          subGridRowExpanded: function(subgrid_id, row_id) {
              // we pass two parameters
              // subgrid_id is a id of the div tag created within a table
              // the row_id is the id of the row
              // If we want to pass additional parameters to the url we can use
              // the method getRowData(row_id) - which returns associative array in type name-value
              // here we can easy construct the following
                 var subgrid_table_id, pager_id;
                 subgrid_table_id = subgrid_id+"_t";
                 pager_id = "p_" + subgrid_table_id;
                 jQuery("#"+subgrid_id).html("&lt;table id='"+subgrid_table_id+"' cellpadding='0' cellspacing='0' class='scroll'&gt;&lt;/table&gt;&lt;div id=’" + pager_id + "’ class=’scroll’&gt;&lt;/div&gt;");
                 jQuery("#"+subgrid_table_id).jqGrid({
                    url:"projects.cfc?method=getProjectMilestones&amp;projectid="+row_id,
                    datatype: "json",
                  colNames:['SEQ','ID','MILESTONE','TREND','DUE DATE','STATUS','OWNERS','%','COMMENTS'], //Column Names
              //The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
              colModel :[                 
                  {name:'SEQUENCENUM',index:'SEQUENCENUM',hidden:true},
                  {name:'PROJECTID',index:'PROJECTID', editable:false},
                  {name:'MILESTONE',index:'MILESTONE', width:150, sorttype:"text",align:"center",
                      editable:true,edittype:"text",
                      editrules:{required:true}},                 
                  {name:'TREND',index:'TREND', width:100, align:"center",sorttype:"text",
                      editable:true,edittype:"select",editoptions:{value:"Green:Green;Yellow:Yellow;Red:Red"},
                      editrules:{required:true}},
                  {name:'DUE_DATE',index:'DUE_DATE', width:150, editable:true,editoptions:{size:12,dataInit: function(el) {
                      $(el).datepicker({ dateFormat: 'mm-dd-yy'} );
                  },
                      defaultValue: function() {
                      var currentTime = new Date();
                      var month = parseInt(currentTime.getMonth() + 1);
                      month = month &lt;= 9 ? "0" + month : month;
                      var day = currentTime.getDate();
                      day = day &lt;= 9 ? "0" + day : day;
                      var year = currentTime.getFullYear();
                      return month + "-" + day + "-" + year ;
                      } 
                  },align:"center",     
                      editrules:{required:true}}, 
                  {name:'MILESTONE_STATUS',index:'MILESTONE_STATUS',
                      editable:true,edittype:"select",editoptions:{value:"In Progress:In Progress;Complete:Complete"},
                      editrules:{required:true}},
                  {name:'ASSIGNMENT',index:'ASSIGNMENT', width:125,align:"center",sorttype:"text",
                      editable:true,edittype:"text",
                      editrules:{required:true}},
                  {name:'PERCENT_COMP',index:'PERCENT_COMP', width:50, sorttype:"int",align:"center",
                      editable:true,edittype:"text",editrules:{number:true}},
                  {name:'COMMENTS',index:'COMMENTS', width:200,
                      editable:true,edittype:"textarea",editoptions:{rows:3, cols:30},
                      editrules:{required:true}} 
                      ],//searchoptions parameter is used to limit the operators available during search,                                             
                  rowNum: 20, //Number of records we want to show per page
                  rowList:[20,30,40,50], //Row List, to allow Initiative to select how many rows they want to see per page
                  sortorder: "asc", //Default sort order
                  sortname: "SEQUENCENUM", //Default sort column
                  viewrecords: true, //Shows the nice message on the pager
                  imgpath: 'images/', //Image path for prev/next etc images
                  caption: 'Milestones', //Grid Name
                  recordtext: "Record {0} - {1} of {2}",//Pager information to show
                  rownumbers: false,//Do not show row numbers
                  sortable: true,
                  width:'auto',
                  height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
                  mtype:'POST',
                  toolbar:[true,"bottom"], //Shows the toolbar at the top. We will use it to display Initiative feedback
                  shrinkToFit: true,
                  //The JSON reader. This defines what the JSON data returned from the CFC should look like
                  jsonReader: {
                      root: "ROWS", //our data
                      page: "PAGE", //current page
                      total: "TOTAL", //total pages
                      records:"RECORDS", //total records
                      userdata:"USERDATA",
                      cell: "", //Not Used
                      id: "0", //Will default to first column
                           subGrid: {
                                root : "ROWS",
                                repeatitems: true,
                                cell: "" //Not Used
                          }
                  },
                  editurl:'projects.cfc?method=addeditMilestone&amp;projectid='+row_id, //The Add/Edit function call
                  pager:('#' + pager_id)
                  }).navGrid('#' + pager_id, {
                          search:false,//title set for hover over display
                          edit:true,edittitle:"Edit Milestone",width:200,
                          add:true,addtitle:"Add Milestone",width:200,
                          del:true,deltitle:"Delete Milestone"
                      },                      
                  // Edit Options. save key parameter will keybind the Enter key to submit.
                  {editCaption:"Edit Milestone",edittext:"Edit",closeOnEscape:true,closeAfterEdit:true,savekey: [true,13],errorTextFormat:commonError,width:"500"
                      ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"},
                  {addCaption:"Add Milestone",closeOnEscape:true,closeAfterAdd:true,savekey: [true,13],errorTextFormat:commonError,width:"500"
                      ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"},
                  //Add Options
                  {url:"projects.cfc?method=delMilestone",caption:"Delete Milestone",closeOnEscape:true,errorTextFormat:commonError,top:"60",left:"70",
                      reloadAfterSubmit:true} //Delete Options
  
                  )
                 },                       
          shrinkToFit: true,
          //The JSON reader. This defines what the JSON data returned from the CFC should look like
          jsonReader: {
              root: "ROWS", //our data
              page: "PAGE", //current page
              total: "TOTAL", //total pages
              records:"RECORDS", //total records
              userdata:"USERDATA",
              cell: "", //Not Used
              id: "0" //Will default to first
              },
          loadComplete: function() { 
              $('#cb').prev().remove(); 
              if($("#list").getGridParam("RECORDS")==0){ 
                  $('#noResults').dialog("open"); 
              } else { 
                  var page = $('#list').getGridParam("PAGE"); 
                  var records = $('#list').getGridParam("RECORDS"); 
                  var recordsPP = $('#list').getGridParam("rowNum"); 
                  var x = records/recordsPP; 
                  var returnArray = [];
  
                  if(x &lt; page) { 
                      iterLimit = records%recordsPP; 
                  } else { 
                      iterLimit = recordsPP; 
                  } 
  
                  for(var i=1; i&lt;=iterLimit; i++) { 
  
                      $('#'+i).children('td:first').next().addClass('link').css("cursor","pointer").css("color","blue").css("text-decoration","underline"); 
  
                      var emitid = $('#'+i).children ('td:first').next().text();
                      //window.alert(emitid);
  
                      $('#'+i).children('td:first').next().click(function() { 
                          emitid = $(this).text();
                          //window.alert(emitid + ":" + page + ":" + records + ":" + recordsPP + ":" + x);
                          var link = 'viewInitiative.cfm?projectid='+emitid
                          window.open(link,'_blank'); 
                      }); 
                      //returnArray = orderList.find(ord); 
                      var truefalse = typeof returnArray; 
                      if(truefalse != 'boolean') { 
                          $('#list').setSelection(i); 
                      } 
                  } 
              } 
          },                        
          loadError:function(xhr, st, err) {
              alert('loaderror on quote request grid - ' + st)
          },              
          editurl:"projects.cfc?method=addeditProject", //The Add/Edit function call
          ondblClickRow: function(rowid, ri, ci) {
              var p = myGrid[0].p;
              if (p.selrow !== rowid) {
                  // prevent the row from be unselected on double-click
                  // the implementation is for "multiselect:false" which we use,
                  // but one can easy modify the code for "multiselect:true"
                  myGrid.jqGrid('setSelection', rowid);
              }
              myGrid.jqGrid('editGridRow', rowid, editSettings);
          }
          }).navGrid('#pager',
              {
                  search:true,searchtitle:"Search",//title set for hover over display
                  edit:true,edittitle:"Edit Initiative",width:1000,
                  add:true,addtitle:"Add Initiative",width:1000,
                  del:true,deltitle:"Delete Initiative"
              },
          // Edit Options. save key parameter will keybind the Enter key to submit.
          {editCaption:"Edit Initiative",edittext:"Edit",closeOnEscape:true,closeAfterEdit:true,savekey: [true,13],errorTextFormat:commonError,width:"1250"
              ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"},
          {addCaption:"Add Initiative",closeOnEscape:true,closeAfterAdd:true,savekey: [true,13],errorTextFormat:commonError,width:"1250"
              ,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"5",right:"5"},
          //Add Options
          {url:"projects.cfc?method=delProject",caption:"Delete Initiative",closeOnEscape:true,errorTextFormat:commonError,top:"60",left:"70",
              reloadAfterSubmit:true}, //Delete Options
           //Search Options. multipleSearch parameter lets it know we are going to use the new advanced search feature
          {errorTextFormat:commonError,Find:"Search",closeOnEscape:true,caption:"Search Initiatives",multipleSearch:true,closeAfterSearch:true}
          ).navButtonAdd('#pager',{
                          caption:"Export to Excel", 
                          buttonicon:"images/sizzlejs_32x32.png", 
                          onClickButton: function(){ 
                            exportExcel();
                          }, 
                          position:"last"
                      });
  
          function exportExcel()
          {
              var mya=new Array();
              mya=$("#list").getDataIDs();  // Get All IDs
              var data=$("#list").getRowData(mya[0]);     // Get First row to get the labels
              var colNames=new Array(); 
              var ii=0;
              for (var i in data){colNames[ii++]=i;}    // capture col names
              var html="";
              for (var k=0;k&lt;colNames.length;k++)
              {   
                  if(colNames[k] == "PROJECTID") {
                      html=html+"EMIT_ID"+"\t";
                  } else if (colNames[k] == "PROJECT_TITLE") {
                      html=html+"INITIATIVE_TITLE"+"\t";
                  } else if (colNames[k] == "PROJECT_TYPE") {
                      html=html+"SUB-CATEGORY"+"\t";
                  } else if (colNames[k] == "PROJECT_TYPEID") {
                      html=html+"SUB_CAT_ID"+"\t";
                  } else if (colNames[k] == "SUB_TEAM") {
                      html=html+"SUB_TEAM_MEMBERS"+"\t";
                  } else if (colNames[k] == "OVERRIDE") {
                      html=html+"OVERRIDE%_COMP"+"\t";
                  } else if (colNames[k] == "EM_EXECUTION_TOP_TEN") {
                      html=html+"EM_EXECUTION_PAIN_POINT"+"\t";
                  } else {
                      html=html+colNames[k]+"\t";   // output each Column as tab delimited
                  }
              }
              html=html+"\n";
              for(i=0;i&lt;mya.length;i++)
              {
                  data=$("#list").getRowData(mya[i]); // get each row
                  for(j=0;j&lt;colNames.length;j++)
                  {
                      html=html+data[colNames[j]]+"\t"; // output each column as tab delimited
                  }
                  html=html+"\n";  // output each row with end of line
  
              }
              html=html+"\n";  // end of line at the end
              document.forms[0].csvBuffer.value=html;
              document.forms[0].method='POST';
              document.forms[0].action='http://bfops01.edc.cingular.net/excel/csvExport.php';  // send it to server which will open this contents in excel file
              document.forms[0].target='_blank';
              document.forms[0].submit();
          }
  
      //Function will be called when add/edit encounters an error. The returned message is what will be shown to Initiative
      function commonError(data){         
          return "Error Occured during Operation. Please try again";
      }
  });
  </code></pre>