JSON format for subgrid - json

Question

hello can any one tell me the json format for local data containing the subgrid values.
i used following format but subgrid data is not loading into the subgrid table.
var data=[{"Left_ssr_id":CaGM33098,"Mismatches":"6","Gaps":"1","AlignLen":"1119","Identity":"99.37","right_ssr_start":17308507,"Qstart":"33","query":"AB-Contig743","subject":"Ca7","Send":"17305359","Score":"2113","Evalue":"0.0","Left_ssr_end":17293825,"right_ssr_end":17308542,"right_ssr_id":CaGM33099 ,"Sstart":"17304241","Qend":"1150","Left_ssr_start":17293811,subgrid:[{"Right_ssr_start":17308507,"Right_ssr_end":17308542},{"Right_ssr_start":17308506,"Right_ssr_end":17308543}]}]
code used to upload the data . The Grid is getting the data but subgrid showing only the header and the blank rows.
$(document).ready(function(){
$("#blastform").submit(function(){
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
dataType: "json",
error: function() {
$(thistarget).html("<span class='error'>Failed to submit form!</span>");
},
success: function(res) {
var data=res;
$("#datatable").jqGrid({
datatype:"local",
data:data,
colNames:['QueryID','SubjectID', . . . 'Right_nearest_distance'],
colModel:[ {name:'query',index:'query', width:55},
{name:'subject',index:'subject', width:80},
.,
.,
{name:'right_near_dist',index:'right_near_dist', width:50, sortable:false}, ],
rowNum:100,
rowList:[100,200,500],
pager: $('#pager2'),
sortname: 'QueryID',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
altRows: true,
pgbuttons: true,
subGrid : true,
subGridUrl: 'local',
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>");
jQuery("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames: ['ssr_start','ssr_end'],
colModel: [ {name:"Right_ssr_start",index:"Right_ssr_start",width:80,key:true},
{name:"Right_ssr_end",index:"Right_ssr_end",width:130},
],
rowNum:20,
pager: pager_id,
sortname: 'ssr_start',
sortorder: "asc",
height: '100%' });
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false}) },
caption: 'Blast Results'
});
$("#datatable").jqGrid('navGrid','#pager2', {position: 'right'});
jQuery("#datatable").jqGrid('navGrid','#blastresults',{edit:false,add:false,del:false});
}
})
return false;
}
);
);

Answer 1

You need to configure the localReader settings
see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data

Answer 2

I don't recommend you to make separate ajax call and to use datatype: "local", data: data. You will have many disadvantages. jqGrid provide datatype: "json" type for the case. One can use additional options like jsonReader and jsonmap to inform jqGrid how to get information about grid data from the server response.
The value for var data which you posted provide wrong data. You use variables CaGM33098 and CaGM33099 which are undefined. If you used cut&pased from the server response, then you generate wrong JSON response on the server. Moreover it's strange that subgrid if the item from data array isn't enclosed in ". Probably the server returns from this.action (??? what is this here???) the following data
[
{
"Left_ssr_id": "CaGM33098",
"Mismatches": "6",
"Gaps": "1",
"AlignLen": "1119",
"Identity": "99.37",
"right_ssr_start": 17308507,
"Qstart": "33",
"query": "AB-Contig743",
"subject": "Ca7",
"Send": "17305359",
"Score": "2113",
"Evalue": "0.0",
"Left_ssr_end": 17293825,
"right_ssr_end": 17308542,
"right_ssr_id": "CaGM33099",
"Sstart": "17304241",
"Qend": "1150",
"Left_ssr_start": 17293811,
"subgrid": [
{
"Right_ssr_start": 17308507,
"Right_ssr_end": 17308542
},
{
"Right_ssr_start": 17308506,
"Right_ssr_end": 17308543
}
]
}
]
The old answer and the answer shows how one can implement displaying nested data as subgrid. Another answer shows how to use userdata to load nested data directly from the server. I recommend you to use the last approach.