I copied the code from an example in the help docs.

--------------------------------------

height: 100%,

should be

height: "100%",

--------------------------------------

doh! All good now! Awesome grid! Thanks!

What does not work?

Check you code again - if you do not have the grid, something is wrong in the code of the subgrid. Try first simple things.

Regards

Tony

When I remove the jQuery("#"+subgrid_table_id).jQGrid({...}) portion I can see the main grid with the clickable + buttons.

----------------------------------------------------------------------------------------------

<script type="text/javascript">
    //    $(document).ready(function(){
            jQuery("#orders").jqGrid({
    url:'/ajax.docs/plugin/JSON_NAA_MEMBER_ORDERS?rid={$this->my_record_id}',
    jsonReader:{
        repeatitems: false,
    },
    datatype: 'json',
    jsonReader:{repeatitems: false},
    mtype: 'GET',
    autowidth: true,
    colNames:['Order ID','Total','Order Date'],
    colModel :[
        {name:'id', index:'Order ID', width:60, key:true},
        {name:'total', index:'total', width:220},
        {name:'ts', index:'ts', width:220, align:'left'}],
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    imgpath: '/js/jquery/plugins/jqGrid/jqGrid-3.4.3/themes/coffee/images',
    pager: jQuery('#pager'),
    //onSelectRow: function(id){ if(id && id!==lastsel3){ jQuery('#rowed6').restoreRow(lastsel3); jQuery('#rowed6').editRow(id,true,pickdates); lastsel3=id; } }, editurl: "server.php",
    caption: 'Payment History',
    onSelectRow: function(id){
        //debug(id + " wants to be edited");
        $("#paymentDetail").load(
            "/ajax.docs/plugin/HTML_NAA_MEMBER_PAYMENT" ,
            {rid: id},
            function (responseText, textStatus, XMLHttpRequest) {
                //console.log(responseText, textStatus, XMLHttpRequest);
                if (responseText='success') {
                    $('#paymentDetail').fadeIn(1111);
                }
            //this; // dom element
            }
        );

    },
    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;
        subgrid_table_id = subgrid_id+"_t";
        jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
       
        alert('subrid_id: '+ subgrid_id + ' , row_id: ' + row_id + ' , subgrid_table_id: ' + subgrid_table_id);

        jQuery("#"+subgrid_table_id).jqGrid({
                url:'/ajax.docs/plugin/JSON_NAA_MEMBER_PAYMENTS?q=2&rid={$this->my_record_id}&id='+row_id,
                datatype: 'json',
                jsonReader:{repeatitems: false},
                colNames:['Payment ID','Payment Date','Payment Type','Amount','Mailing ID','Receipt ID'],
                colModel :[
                    {name:'payment_id', index:'Payment ID', width:60, key:true},
                    {name:'payment_date', index:'payment_date', width:120},
                    {name:'payment_type', index:'payment_type', width:120, align:'left'},
                    {name:'amount', index:'amount', width:125, align:'right'},
                    {name:'mailing_id', index:'mailing_id', width:120, align:'right'},
                    {name:'receipt_id', index:'receipt_id', width:100, align:'right'}
                ],
                height: 100%,
                rowNum:20,
                imgpath: '/js/jquery/plugins/jqGrid/jqGrid-3.4.3/themes/coffee/images',
                sortname: 'payment_id',
                sortorder: "desc"
        })
    }

  }).navGrid('#pager',{edit:false,add:false,del:false});

any ideas why this subgrid would not work?