jQuery Grid Plugin - jqGrid - Topic: Multiple sub grids

cba_cruz on Multiple sub grids

Mon, 22 Nov 2010 15:33:14 +0200

Hi there, im using 4 subgrids on the same level, the first subgrid show the pager correctly, with total pages correct and lets me paginate through, but the second, third and forth subgrid doesn't show the total pages nor lets me paginate, did i do something wrong? or did you even had this problem?

Thanx!

downunder on Multiple sub grids

Fri, 01 Oct 2010 17:57:14 +0300

OK. I found it out….

append() did the trick?

for he second subgrid in a line U use append() instead of html() to add the table html of the second to the previous grid.

//for a second subgrid on the same level

subgrid_table_id = subgrid_id+"_tt"; //new name for table selector –> tt

pager_id = "p_"+subgrid_table_id;

$("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");

jQuery("#"+subgrid_table_id).jqGrid({

…

});

works nice!

Daniel

downunder on Multiple sub grids

Fri, 01 Oct 2010 17:27:14 +0300

Bogho...

i'm on the same search now... did you find out and have some code to share?

Ananda

bogho on Multiple sub grids

Tue, 09 Jun 2009 07:36:53 +0300

Hello,

I have requirement to get 2 subgrids for the main grid.

After couple of days I can't get it works, so any suggestions are welcome.

Thanks for any help.

Bogho.

bogho on Multiple sub grids

Sat, 30 May 2009 17:23:59 +0300

Hello,

It will be helpfull if you can sahre your code, I spend hours to make it works.

Thanks a lot.

Bogho

milo on Multiple sub grids

Wed, 06 Aug 2008 03:26:28 +0300

ic.. ill try it out... thnx

tony on Multiple sub grids

Wed, 06 Aug 2008 00:22:27 +0300

Maybe when you create the first subgrid, then

$(”#”+subgrid_id).appent("second_table")

$("#secondtable_id").jqGrid({...});

milo on Multiple sub grids

Tue, 05 Aug 2008 19:14:37 +0300

how do i append? m not sure how it works??

tnx...

tony on Multiple sub grids

Mon, 04 Aug 2008 04:59:31 +0300

Aha,

Maybe you should append (use append) the content of the second subgrid after the first one.

Regards

Tony

milo on Multiple sub grids

Sun, 03 Aug 2008 20:32:01 +0300

or logically it can be portrayed as this:

MAINGRID

->SUBGRID1

->SUBGRID2

SUBGRID2 is not inside the SUBGRID1.. instead both of them are on the same level pointing to MAINGRID...

thnx.. 🙂

milo on Multiple sub grids

Sun, 03 Aug 2008 19:32:47 +0300

i mean... would it be possible to create to instances of grid as subgrid... for example...

$(”#maingrid”).jqGrid({

.......

subGridRowExpanded : function(subgrid_id, row_id){

....

$(”#subgrid_t”).jqGrid({

....

});//end subgrid_t

//this kind of an instance..

$(”#subgrid_t2”).jqGrid({

....

});//end subgrid_t2

}//end function

.......

});//end main grid

thnx.. 🙂

tony on Multiple sub grids

Sat, 02 Aug 2008 04:00:33 +0300

I do not understand what you mean but,

$("#maingrid").jqGrid({

.....

subGridRowExpanded : function(subgrid_id, row_id){

...

$("#subgrid_t").jqGrid({

.......

subGridRowExpanded : function(sub_subgrid_id, row_id){

....

$("#sub_subgrid_t").jqGrid({

.......

}) // sub_subgrid_t

}

}) // subgrid_t

} // subgrid_id

}) // maingrid

Hope this help

Regards

Tony

milo on Multiple sub grids

Fri, 01 Aug 2008 21:56:20 +0300

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... 🙂