Question

I have created Master/Detail grids and am able to load both grids properly. I have enabled add/edit/delete from both grids, but the icons are unselectable. The icons appear displayed bunched together closer also.

Any ideas?

I have other grids that I have developed that are working fine and I used them as a starting pt, but they are not Master/Detail type grids.

Code:

 <table id="questions"></table>
    <div id="questions"></div>
    <br />
    <table id="answers"></table>
    <div id="answers"></div>

<script language="JavaScript" type="text/javascript">

$(document).ready(function() {

  jQuery("#questions").jqGrid({
datatype: "json",
    url: 'updateQuestion.php?client=<?=$clientId5?>',
    mtype: 'GET',
    colNames:['Id', 'Campaign', 'Question','ClientId'],
colModel:[
    {name:'id',index:'id', width:40,editable:false,editoptions:     {readonly:true,size:30},hidden:false},      
            {name:'campaignId',index:'campaignId', width:80,editable:true,search: true,edittype:"select",editoptions:{value:"<?if ($mode == 'edit'){ $campaigns = mysql_db_query($database, "SELECT * FROM uploadCampaigns WHERE id = '$campaignId'");while($ci = mysql_fetch_array($campaigns)) {echo "$ci[id]:$ci[name];";}}else{ $campaigns = mysql_db_query($database, "SELECT * FROM uploadCampaigns WHERE customerID = '$clientId5'");while($ci = mysql_fetch_array($campaigns)) {echo "$ci[id]:$ci[name];";}}?>"}},
    {name:'question',index:'question', width:450, align:"left",editable:true,edittype:"textarea",editoptions:{rows:"5",cols:"75"}},     
    {name:'clientId',index:'clientId',width:10, editable: true,edittype:"text",editoptions:{value: <?=$clientId5?>},hidden:true}

],
    rowNum:15,
            rowList:[15,30,45],
            pager: '#questions',
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            jsonReader: {
                cell: "",
                id: "0"
            },
            pgtext : "Page {0} of {1}",
            caption:"Manage Questions",
             width: 'auto',
            height: 'auto',
            gridview: true, 
            loadOnce: true,
            multiselect: false,
            onSelectRow: function(ids) {
                var sr = jQuery("#questions").getGridParam('selrow');
                     rowdata = jQuery("#questions").getRowData(sr);
                           scid = rowdata.scid;
                           question = rowdata.question;

                if(ids == null) {
        ids=0;
        if(jQuery("#answers").jqGrid('getGridParam','records') >0 ){
            jQuery("#answers").jqGrid('setGridParam',{url:'updateAnswer.php?scid='+ ids,page:1});
 //                           jQuery("#answers").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
            jQuery("#answers").jqGrid('setCaption',"Question: "+question)
            .trigger('reloadGrid');
        }
                } else {
          jQuery("#answers").jqGrid('setGridParam',{url:'updateAnswer.php?scid='+ ids,page:1});
        //            jQuery("#answers").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
        jQuery("#answers").jqGrid('setCaption',"Question: "+question)
        .trigger('reloadGrid');         
                }
            },               
            loadError: function (jqXHR, textStatus, errorThrown) {
            // remove error div if exist
                 $('#' + this.id + '_err').remove();

            // insert div with the error description before the grid
                 $(this).closest('div.ui-jqgrid').before(
                  '<div id="' + this.id + '_err" style="max-width:' + this.style.width +
                     ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;">' +
                        decodeErrorMessage(jqXHR, textStatus, errorThrown) +
                               '</div><div style="clear:left"/></div>'
                );
            }

        });

   jQuery("#questions").jqGrid('navGrid',"#questions",{add:true,edit:true,del:true, search:true, refresh:true},                 {height:'auto',width:500,reloadAfterSubmit:true,closeAfterEdit:true,url:'updateQuestion.php'}, // edit options}           {height:'auto',width:500,reloadAfterSubmit:true,closeAfterAdd:true,url:'updateQuestion.php?client=<?=$clientId5?>'},
       {reloadAfterSubmit: true,closeAfterDelete:true,url:'updateQuestion.php',
            onclickSubmit : function(eparms) {
                 var id2 = client = {};
                 var scid = client = '';
                      // we can use all the grid methods here
                      //to obtain some data
                     var sr = jQuery("#navgrid").getGridParam('selrow');
                     rowdata = jQuery("#navgrid").getRowData(sr);
                           scid = rowdata.scid;
                           client = rowdata.clientId;
                           parms = {scid: scid,client: client};

                            return parms;
                    }                      
                }, // del options
        {height:'auto',width:'auto',reloadAfterSubmit:true,closeAfterSearch:true,url:'updateQuestion.php'}
       );                 


  });   
 jQuery("#answers").jqGrid({
height: 100,
    url:'updateAnswer.php?scid=0',
datatype: "json",
colNames:['Id','QuestionId', 'Answer'],
colModel:[
            {name:'scid',index:'scid', width:10,editable:false,editoptions:{readonly:true,size:10},hidden:true},
            {name:'questionId',index:'questionId', width:90,editable:false,editoptions:{readonly:true,size:90},hidden:false},
    {name:'answer',index:'answer', width:400, align:"left",editable:true,edittype:"textarea",editoptions:{rows:"5",cols:"75"}}      
],
rowNum:10,
rowList:[10,20,30],
pager: '#answers',
sortname: 'questionId',
    jsonReader: {
                cell: "",
                id: "0"
            },
    viewrecords: true,
    sortorder: "asc",
multiselect: false,
caption:"Manage Answers"}).navGrid('#answers',{add:true,edit:true,del:true});
</script>

Answer 1

The id values of all elements on the page have to be unique. You use

<table id="questions"></table>
<div id="questions"></div>
<br />
<table id="answers"></table>
<div id="answers"></div>

So you have at least two id duplicates. You should change the ids to for example

<table id="questions"></table>
<div id="questionsPager"></div>
<br />
<table id="answers"></table>
<div id="answersPager"></div>

and modify the corresponding parameters of pager option of jqGrid and the second parameter of navGrid which you use.