jqgrid Subgrid as a Grid: Edit, Add, Search Icons not appearing in Subgrid

Question

This is the code for my Grid. But for some reason the edit, add, and search icons are not displaying in subgrid:

$(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&returnformat=json&_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("<table id='"+subgrid_table_id+"' cellpadding='0' cellspacing='0' class='scroll'></table><div id=’" + pager_id + "’ class=’scroll’></div>");
               jQuery("#"+subgrid_table_id).jqGrid({
                  url:"projects.cfc?method=getProjectMilestones&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 <= 9 ? "0" + month : month;
                    var day = currentTime.getDate();
                    day = day <= 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&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 < page) { 
                    iterLimit = records%recordsPP; 
                } else { 
                    iterLimit = recordsPP; 
                } 

                for(var i=1; i<=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<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<mya.length;i++)
            {
                data=$("#list").getRowData(mya[i]); // get each row
                for(j=0;j<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";
    }
});

Answer 1

You should verify your code in the http://www.jslint.com/. It has many syntax errors. For example, you forget to declare variables iterLimit and j, you should replace ';' after var myGrid = jQuery("#list") to ',' and many other small problems. I recommend you additionally to use integer values for width parameter in many places of the code like jqGrid use ifself.

You main problem seems to me exist because the <div> for the subgrid will be either not created or has no or wrong id element. The code

jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+
       "' cellpadding='0' cellspacing='0' class='scroll'></table><div id=’" +
        pager_id + "’ class=’scroll’></div>");

contain special character ’ instead of '. It should be replaced to

jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+
       "'></table><div id='" + pager_id + "'></div>");

You use very very old syntax for HTML elements and use retro parameters like imgpath which are deprecated since version 3.5 of jqGrid.