Forum
Log In
Home
Topic RSS
14:27
02/12/2009
Offline
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 !
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','<b>ARTICLE</b>','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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", elmprefix:" "},editrules:{required:true}
},
{name:'descr',index:'descr', sortable:true,
editable:true,
editoptions:{size:40},
formoptions:{label:"<font color='#660'>Désignation</font><font color='red'>*</font>", elmprefix:" "},editrules:{required:true}
},
{name:'renv',index:'renv', width:30,sortable:true,
editable:true,
editoptions:{size:40},
formoptions:{label:"<font color='#660'>Désignation</font><font color='red'>*</font>", elmprefix:" "},editrules:{required:true}
},
{name:'sfm',index:'sfm', width:20,sortable:true,
editable:true,
editoptions:{size:20},
formoptions:{label:"<font color='#660'>S/Famille</font><font color='red'>*</font>", elmprefix:" "},editrules:{required:true}
},
{name:'mat',index:'mat', width:20,sortable:true,
editable:true,
editoptions:{size:20},
formoptions:{label:"<font color='#660'>Matière</font><font color='red'>*</font>", elmprefix:" "},editrules:{required:true}
},
{name:'trf',index:'trf', width:20,align:"right",
editable:true,
editoptions:{size:20},
formoptions:{label:"<font color='#660'>PV brut</font><font color='red'>*</font>", 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','<b>CLIENT</b>','<b>Marque</b>','<b>Matériel</b>','<b>Machine</b>','<b>Série</b>','<b>Modèle</b>','<b>Type</b>','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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", 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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", 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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", 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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", 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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", 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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", 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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", elmprefix:" "},editrules:{required:true}
},
{name:'descr',index:'descr', sortable:true,resizable:false,
editable:true,
editoptions:{size:40},
formoptions:{label:"<font color='#660'>Désignation</font><font color='red'>*</font>", 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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", 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:"<font color='#660'><b>Code</b></font><font color='red'>*</font>", 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','<b>ARTICLE</b>','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 <font color='red'>" +id_rec+"</font>"
});
},
viewrecords:true,
caption: " PARCS CLIENTS intégrant l'ARTICLE <font color='red'>" +id_rec+"</font>"
});
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:"<font size='0.5em'>Les champs marqués <font color='red'>*</font> sont obligatoires</font>"
}, // edit options
{height:'auto',
width:'auto',
reloadAfterSubmit:false,
jqModal:false,
resize:false,
addCaption:"Créer un CONTACT",
closeOnEscape:true,
bottominfo:"<font size='0.5em'>Les champs marqués <font color='red'>*</font> sont obligatoires</font>",
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:"<font size='0.5em'>Les champs marqués <font color='red'>*</font> sont obligatoires</font>"
}, // edit options
{height:'auto',
width:'auto',
reloadAfterSubmit:false,
jqModal:false,
resize:false,
drag:false,
addCaption:"Créer un ARTICLE",
closeOnEscape:true,
bottominfo:"<font size='0.5em'>Les champs marqués <font color='red'>*</font> sont obligatoires</font>",
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 !
10:07
02/12/2009
Offline
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
11:16
25/02/2010
Offline
it could be fun if u post your solution!
Si tu veux bien hein
11:51
02/12/2009
Offline
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
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','<b>ARTICLE</b>','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 <font color='red'>" +grp+"</font>"
});
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
Most Users Ever Online: 715
Currently Online:
40 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
