jQuery Grid Plugin - jqGrid

Hi,

would it be possible if there would be a multiple instance of subgrids?

i tried implementing but i got confused...heres the code....

jQuery(document).ready(function(){   
    jQuery("#list").jqGrid({
        url:'example.php',
        datatype: 'xml',
        mtype: 'GET',
        height: 700,               
        colNames:['ID','Category', 'Description'],
        colModel :[
            {name:'cat_id', index:'catid', width:55},   
            {name:'cat_title', index:'title', width:290},
            {name:'cat_desc', index:'description', width:380}],
        pager: jQuery('#pager'),
        rowNum:10,
        rowList:[10,20,30],
        sortname: 'catid',
        sortorder: "desc",
        viewrecords: true,
        imgpath: 'themes/basic/images',
        caption: 'Categories',
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id){
            var subgrid_table_id, pager_id;
            var subgrid_table_id2, pager_id2;
           
            subgrid_table_id = subgrid_id+"_t";           
            pager_id = "p_"+subgrid_table_id;

            subgrid_table_id2 = subgrid_id+"_t2";
            pager_id2 = "p_"+subgrid_table_id2;
           
                       
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
            jQuery("#"+subgrid_table_id).jqGrid({
                url:"subgrid.php?q=2&id="+row_id,
                datatype: "xml",
                colNames: ['ID','Product','Description'],
                colModel: [
                    {name:"pid",index:"pid",width:55,key:true,editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
                    {name:"p_title",index:"title",width:300, editable: true},
                    {name:"p_desc",index:"description",width:1, editable: true},
                    ],
                rowNum:20,
                pager: jQuery('#'+pager_id),
                imgpath: 'themes/basic/images',
                caption: 'Attributes',                               
                height: '100%'
                }).navGrid('#'+pager_id,{refresh: true,edit:true,add:true,del:true,search:true});//end jqgrid

                $("#"+subgrid_id).html("<table id='"+subgrid_table_id2+"' class='scroll'></table><div id='"+pager_id2+"' class='scroll'></div>");
                jQuery("#"+subgrid_table_id2).jqGrid({
                    url:"subgrid.php?q=2&id="+row_id,
                    datatype: "xml",
                    colNames: ['ID','Product','Description'],
                    colModel: [
                        {name:"pid",index:"pid",width:55,key:true,editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
                        {name:"p_title",index:"title",width:300, editable: true},
                        {name:"p_desc",index:"description",width:1, editable: true},
                        ],
                    rowNum:20,
                    pager: jQuery('#'+pager_id2),
                    imgpath: 'themes/basic/images',
                    caption: 'Attributes',                               
                    height: '100%'
                    }).navGrid('#'+pager_id2,{refresh: true,edit:true,add:true,del:true,search:true});//end jqgrid
               
            }//end function
        }).navGrid('#pager',{refresh: true,edit:true,add:true,del:true,search:true});
    }); //end ready function

would this be possible.... or maybe i did something wrong here....

thnx... 🙂