Touriste on Several nested subgrids

Tue, 09 Mar 2010 17:13:51 +0200

thank you very much

Your english sux? my too 😀

Thanks for your answer!! i found there some day ago but it will help certainly a lot of people!!

peace

JiheL on Several nested subgrids

Thu, 25 Feb 2010 11:51:57 +0200

Hi touriste sorry not to have told about this solution (sorry for my english)

Here is the copy of my code for the second level

// SECOND LEVEL SUBGRID
subGridRowExpanded: function(subgrid_id, row_id) {
 var subgrid_table_id2;
 subgrid_table_id2 = subgrid_id+"_t";
 pager_id2 = "p_"+subgrid_table_id;
 jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id2+"' class='scroll'></table><div id='"+pager_id2+"' class='scroll'></div>");
 rowdata = jQuery("#"+subgrid_table_id).getRowData(row_id);
 var id_rec=rowdata['id'];
 var grp=rowdata['descr'];
 if(rowdata['num']>""){grp+=" n° "+rowdata['num'];}
 var suburl={/literal}{urljsstring 'art~default:json_prca', array(), array('row_id'=>'row_id','id_rec'=>'id_rec')}{literal};
 jQuery("#"+subgrid_table_id2).jqGrid({
 url:suburl,
 datatype: "json",
 jsonReader : {
 root: "rows",
 page: "page",
 total: "total",
 records: "records",
 repeatitems: true,
 cell: "cell",
 id: "id"
 },
 mtype: 'POST',
 colNames: ['Fiche','OUVRAGE','S/ENSEMBLE','ARTICLE','Désignation de l'article','Qté'],
 colModel: [
 {name:"id",index:"id",width:60, align:"center"},
 {name:"ouvr",index:"ouvr",width:110},
 {name:"sens",index:"sens",width:100},
 {name:"art",index:"art",width:100},
 {name:"descr",index:"descr",width:400},
 {name:"qte",index:"qte",width:40,align:"center",sortable:false,search:false}
 ],
 height: 'auto',
 rowNum:10,
 altRows:true,
 sortname: 'art',
 sortorder: "asc",
 pager: pager_id2,
 autowidth:true,
 viewsortcols:[true,'vertical',true],
 rownumbers:true,
 viewrecords:true,
 hidegrid:false,
 caption: " PIECES DETACHEES du PARC CLIENT " +grp+""
 });
 jQuery("#"+subgrid_table_id2).jqGrid('filterToolbar',{autosearch:true,searchOnEnter:false});
 jQuery("#"+subgrid_table_id2).jqGrid('navGrid',"#"+pager_id2,
 {edit:false,add:false,del:false,search:false})
},

You will notice that I was wrong in the line for rowdata connected to #list instead of "#"+subgrid_table_id !

Below an example of the result

I hope this will help you

Have a nice day

Touriste on Several nested subgrids

Thu, 25 Feb 2010 11:16:10 +0200

it could be fun if u post your solution!

Si tu veux bien hein

JiheL on Several nested subgrids

Wed, 17 Feb 2010 10:07:59 +0200

To the moderator

Please can you delete this post as I have found why I was wrong and how to obtain the second subgrid runs fine !

Thank you

Cheers

JiheL

JiheL on Several nested subgrids

Mon, 15 Feb 2010 14:57:12 +0200

JiheL on Several nested subgrids

Thu, 11 Feb 2010 14:27:49 +0200

Hi all

I'm trying to build several nested subgrids in a main grid, all is fine for the first subgrid, but all wrong for the second level

Here is the rendered grids I obtain.

As you can see, the second level subgrids work with the main data id, and not the first level data id as I would want, such as 2754 instead of 12777, and 831 instead of 8401

Here is the code I built and I think I don't use the good value for row_id, but I don't know how to do it and have not found any way to do it in documentation. I'm noob in javascript use !

jQuery(document).ready(function(){
var lastsel;
var url={/literal}{urljsstring 'art~default:json_art2', array(), array()}{literal};
var editurl={/literal}{urljsstring 'grp~default:json_grpedit', array(), array()}{literal};
// MAIN GRID
jQuery("#list").jqGrid({
 sortable: false, // permet de modifier l'ordre des colonnes
 url:url,
 datatype: "json",
 jsonReader : {
 root: "rows",
 page: "page",
 total: "total",
 records: "records",
 repeatitems: true,
 cell: "cell",
 id: "id"
 },
 mtype: 'POST',
 height: 440,
 colNames:['Fiche','ARTICLE','Libellé de Gestion interne','Renvoi','S/fam.','Matière','PV brut'],
 colModel:[
 {name:'id',index:'id', width:20,align:"center",sortable:true,
 editable:false,
 editoptions:{readonly:true,size:10},
 formoptions:{ elmprefix:"    "},editrules:{required:true}
 },
 {name:'code',index:'code', width:30, sortable:true,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:20,maxlength:20},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'descr',index:'descr', sortable:true,
 editable:true,
 editoptions:{size:40},
 formoptions:{label:"Désignation*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'renv',index:'renv', width:30,sortable:true,
 editable:true,
 editoptions:{size:40},
 formoptions:{label:"Désignation*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'sfm',index:'sfm', width:20,sortable:true,
 editable:true,
 editoptions:{size:20},
 formoptions:{label:"S/Famille*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'mat',index:'mat', width:20,sortable:true,
 editable:true,
 editoptions:{size:20},
 formoptions:{label:"Matière*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'trf',index:'trf', width:20,align:"right",
 editable:true,
 editoptions:{size:20},
 formoptions:{label:"PV brut*", elmprefix:"    "},editrules:{required:true}
 }
 ],
 editurl: editurl,
 rowNum:20, // nombre de lignes par défaut dans la grille
 autowidth:true, // largeur pleine page
 rownumbers:true, // affiche la numérotation des lignes de la grille
 rownumWidth:35,
 altRows:true, // colore les lignes de façon alternée
 sortname:"code",
 viewsortcols:[true,'vertical',true],
 pager: $('#pager'),
 viewrecords: true, // affichage du nombre d'enregistrements chargés
 hidegrid:false, // cache le bouton du Header Layer permettant de réduire la grille
 subGrid : true,
 // FIRST LEVEL SUBGRID
 subGridRowExpanded: function(subgrid_id, row_id) {
 var subgrid_table_id, pager_id;
 subgrid_table_id = subgrid_id+"_t";
 pager_id = "p_"+subgrid_table_id;
 $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
 rowdata = jQuery("#list").getRowData(row_id);
 var id_rec=rowdata['id'];
 var grp=rowdata['code'];
 var suburl={/literal}{urljsstring 'art~default:json_artprc', array(), array('row_id'=>'row_id','id_rec'=>'id_rec')}{literal};
 jQuery("#"+subgrid_table_id).jqGrid({
 sortable: true,
 url:suburl,
 datatype: "json",
 jsonReader : {
 root: "rows",
 page: "page",
 total: "total",
 records: "records",
 repeatitems: true,
 cell: "cell",
 id: "id"
 },
 mtype: 'POST',
 autowidth:true,
 rownumbers:true,
 altRows:true,
 rowNum:5,
 colNames:['Fiche','CLIENT','Marque','Matériel','Machine','Série','Modèle','Type','Désignation de la machine','N° série','N° plan'],
 colModel:[
 {name:'id',index:'id', width:25, align:"center",sortable:true, resizable:false,
 editable:false,
 editoptions:{readonly:true,size:10},
 formoptions:{ elmprefix:"    "},editrules:{required:true}
 },
 {name:'clt',index:'clt', width:25, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'mark',index:'mark', width:30, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'catg',index:'catg', width:30, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'code',index:'code', width:30, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'ser',index:'ser', width:30, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'typ',index:'typ', width:30, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'mod',index:'mod', width:30, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'descr',index:'descr', sortable:true,resizable:false,
 editable:true,
 editoptions:{size:40},
 formoptions:{label:"Désignation*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'num',index:'num', width:50, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 },
 {name:'plan',index:'plan', width:50, sortable:true,resizable:false,
 editable:true,
 edittype:"text",
 editoptions:{readonly:false,size:15,maxlength:15},
 formoptions:{label:"Code*", elmprefix:"    "},editrules:{required:true}
 }
 ],
 pager: pager_id,
 sortname: 'clt',
 sortorder: "asc",
 height: '100%',
 hidegrid:false,

subGrid: true,
 // SECOND LEVEL SUBGRID
 subGridRowExpanded: function(subgrid_id, row_id) {
 var subgrid_table_id2;
 subgrid_table_id2 = subgrid_id+"_v";
 jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id2+"' class='scroll'></table>");
 rowdata = jQuery("#list").getRowData(row_id);
 var id_rec=rowdata['id'];
 var grp=rowdata['code'];
 var suburl={/literal}{urljsstring 'art~default:json_prca', array(), array('row_id'=>'row_id','id_rec'=>'id_rec')}{literal};
 jQuery("#"+subgrid_table_id2).jqGrid({
 url:suburl,
 datatype: "json",
 jsonReader : {
 root: "rows",
 page: "page",
 total: "total",
 records: "records",
 repeatitems: true,
 cell: "cell",
 id: "id"
 },
 mtype: 'POST',
 colNames: ['OUVRAGE','S/ENSEMBLE','ARTICLE','Désignation de l\'article','Qté'],
 colModel: [
 {name:"ouvr",index:"ouvr",width:30},
 {name:"sens",index:"sens",width:30},
 {name:"art",index:"art",width:40},
 {name:"descr",index:"descr",},
 {name:"qte",index:"qte",width:10,align:"center",sortable:false}
 ],
 height: 'auto',
 rowNum:10,
 altRows:true,
 sortname: 'art',
 sortorder: "asc",
 autowidth:true,
 viewrecords:true,
 hidegrid:false,
 caption: " PIECES DETACHEES du PARC CLIENT " +id_rec+""
 });
 },

viewrecords:true,
 caption: " PARCS CLIENTS intégrant l'ARTICLE " +id_rec+""
 });
 jQuery("#"+subgrid_table_id).jqGrid('filterToolbar',{autosearch:true});
 jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,
 {edit:false,add:false,del:false,search:false},
 {height:'auto',
 width:'auto',
 reloadAfterSubmit:false,
 jqModal:false,
 resize:false,
 editCaption:"Modifier un CONTACT",
 closeOnEscape:true,
 bottominfo:"Les champs marqués * sont obligatoires"
 }, // edit options
 {height:'auto',
 width:'auto',
 reloadAfterSubmit:false,
 jqModal:false,
 resize:false,
 addCaption:"Créer un CONTACT",
 closeOnEscape:true,
 bottominfo:"Les champs marqués * sont obligatoires",
 closeAfterAdd: true
 }, // add options
 {reloadAfterSubmit:false,
 jqModal:false,
 closeOnEscape:true
 }, // del options
 {closeOnEscape:true
 }, // search options
 {height:250,
 jqModal:false,
 closeOnEscape:true
 } // view options
 );
 },
 subGridRowColapsed: function(subgrid_id, row_id) {
 },
 caption: " Intégration des ARTICLES dans les PARCS CLIENTS"
});
jQuery("#list").jqGrid('filterToolbar',{autosearch:true});
jQuery("#list").jqGrid('navGrid','#pager',
 {del:false,search:false,view:false},
 {height:'auto',
 width:'auto',
 reloadAfterSubmit:false,
 jqModal:false,
 resize:false,
 drag:false,
 editCaption:"Modifier un ARTICLE",
 closeOnEscape:true,
 bottominfo:"Les champs marqués * sont obligatoires"
 }, // edit options
 {height:'auto',
 width:'auto',
 reloadAfterSubmit:false,
 jqModal:false,
 resize:false,
 drag:false,
 addCaption:"Créer un ARTICLE",
 closeOnEscape:true,
 bottominfo:"Les champs marqués * sont obligatoires",
 closeAfterAdd: true
 }, // add options
 {reloadAfterSubmit:false,
 jqModal:false,
 closeOnEscape:true
 }, // del options
 {closeOnEscape:true
 }, // search options
 {height:250,
 jqModal:false,
 closeOnEscape:true
 } // view options
);
});

Please, is somebody can drive me to understand that is wrong in this code and how to solve it ?

I hope so, many thanks in advance for your kind help.

Cheers

JiheL

PS : sorry for my bad english !

jQuery Grid Plugin - jqGrid - Topic: Several nested subgrids

Touriste on Several nested subgrids

JiheL on Several nested subgrids

Touriste on Several nested subgrids

JiheL on Several nested subgrids

JiheL on Several nested subgrids

JiheL on Several nested subgrids