Subgrid expand but dont show info

Question

I'm a little strange problem in my grid and not find out why. I have created several subgrid and never had problems in this grid but I'm having a difficult birth. The information for the main Grid is shown without any problem, but the subgrid shows nothing.

Screen of browser

That is, he even succeeded in providing php json to the subgrid. I tried to enjoy another subgrid had to work, and I was changing the url, fields, etc. and only when I change the url of the main grid is that it lets me display. Why does anybody know?

jQuery("#organismos").jqGrid({
    url: 'model/ministerio/mod_organismo.php',
    colNames:['Cód. Organismo','Data Efetiva','Estado', 'Sigla', 'Designação curta', 'Designação longa', 'Última alteração', 'Alterado pelo utilizador'],
    colModel:[
        {name:'COD_ORG',index:'COD_ORG',width:80, align:'center', editable:true, editrules:{required:true}, editoptions:{size: 5 ,maxlength:4}, formoptions: { elmsuffix: ' *'}},
        {name:'DATA_EFETIVA',index:'DATA_EFETIVA',width:100,align:'center',datefmt: 'Y/M/d', editrules:{date:true},editable:true,editoptions:{ size: 11, maxlength: 10,dataInit: function(element) {$(element).datepicker({dateFormat: date_format, autosize:true})}}, formoptions: { elmsuffix: ' *'}},
        {name:'ESTADO_DTEF',index:'ESTADO_DTEF',width:50, align:'center',edittype:'select', editoptions:{value:{A:'Ativo',I:'Inativo'}}, editable:true, editrules:{required:true}, formoptions: { elmsuffix: ' *'}},
        {name:'SIGLA_ORG',index:'SIGLA_ORG',width:80, align:'center', editable:true, editrules:{required:true}, editoptions:{size: 13 ,maxlength:12}, formoptions: { elmsuffix: ' *'}},
        {name:'DESC_C_ORG',index:'DESC_C_ORG', width:150, align:'center', editable:true, editoptions:{size: 31, maxlength:30}},
        {name:'DESC_L_ORG',index:'DESC_L_ORG', width:300, align:'center', edittype:'textarea' ,editable:true, editrules:{required:true}, editoptions:{size: 31, maxlength:150}, formoptions: { elmsuffix: ' *'}},
        {name:'DATA_ULT_ALT',index:'DATA_ULT_ALT', hidden:true},
        {name:'UTILIZADOR',index:'UTILIZADOR', hidden:true}
    ],
    sortname: 'DATA_EFETIVA',
    caption:"Objetivo do Projeto",
    pager: '#pager1',
    height:'400',
    multiselect: false,
    subGrid: true,
    subGridOptions: { "plusicon" : "ui-icon-triangle-1-e",
                      "minusicon" :"ui-icon-triangle-1-s",
                      "openicon" : "ui-icon-arrowreturn-1-e",
                      "reloadOnExpand" : false,
                      "selectOnExpand" : true },
    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({
            url:"model/objetivos/mod_obj_estrategicos.php?idorg="+row_id,
            colNames:['Cód. Obj. Estratégico','Data Efetiva','Estado', 'Designação curta', 'Designação longa', 'Peso', 'Última alteração', 'Alterado pelo utilizador'],
            colModel:[
                {name:'COD_OBJ_EST',index:'COD_OBJ_EST', width:80, align:'center', editable:true, editrules:{required:true}, editoptions:{size: 5 ,maxlength:4}, formoptions: { elmsuffix: ' *'}},
                {name:'DATA_EFETIVA',index:'DATA_EFETIVA',width:100,align:'center',editable:true,editoptions:{ size: 11, maxlength: 10,dataInit: function(element) {$(element).datepicker({dateFormat: date_format, autosize:true})}}, formoptions: { elmsuffix: ' *'}},
                {name:'ESTADO_DTEF',index:'ESTADO_DTEF', width:50, align:'center',edittype:'select', editoptions:{value:{A:'Ativo',I:'Inativo'}}, editable:true, editrules:{required:true}, formoptions: { elmsuffix: ' *'}},
                {name:'DESC_C_OBJ_EST',index:'DESC_C_OBJ_EST', width:100, align:'center' ,editable:true, editrules:{required:true}, editoptions:{size: 31 ,maxlength:30}, formoptions: { elmsuffix: ' *'}},
                {name:'DESC_L_OBJ_EST',index:'DESC_L_OBJ_EST', width:300, align:'center', edittype:'textarea' ,editable:true, editrules:{required:true}, editoptions:{size: 31 ,maxlength:150}, formoptions: { elmsuffix: ' *'}},
                {name:'PESO',index:'PESO', width:50, align:'center',editable:true, editrules:{required:true, number: true}, editoptions:{size: 6 ,maxlength:5}, formoptions: { elmsuffix: ' *'}},
                {name:'DATA_ULT_ALT',index:'DATA_ULT_ALT', hidden:true},
                {name:'UTILIZADOR',index:'UTILIZADOR', hidden:true}
            ],
            rowNum:20,
            pager: pager_id,
            sortorder: "asc",
            editurl:"controller/objetivos/Estrategicos.php?idorg=" +row_id,
            height: '100%',
            autowidth: true
        });
        jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:true,add:true,del:true, view:true});
    }
});

Result in JSON from grid 1:

{"page":"1","total":1,"records":"3","rows":[{"id":"1 ","cell":["1 ","2012\/10\/24","Ativo","Ta","funcionar?","OK","2012\/10\/18 13:49:35","1"]},{"id":"21 ","cell":["21 ","2012\/10\/31","Ativo","aa","aaa","oaa","2013\/01\/17 10:59:52","1"]},{"id":"12 ","cell":["12 ","2013\/01\/09","Ativo","TEJO","rio","rio","2013\/01\/03 18:21:40","1"]}]}

Result in JSON from grid 2 when I select a row in the grid 1:

{"page":"1","total":1,"records":"3","rows":[{"id":"AAASwaAAEAAAAC7AAA","cell":["12 ","2013\/01\/03","Ativo","1","1","1","2013\/01\/18 15:00:46","1"]},{"id":"AAASwaAAEAAAAC\/AAA","cell":["3 ","2012\/11\/01","Ativo","Barcelona","Juventus","14.9","2012\/12\/28 14:49:57","1"]},{"id":"AAASwaAAEAAAAC8AAB","cell":["4 ","2012\/12\/24","Ativo","Sim","ok","75.69","2012\/12\/28 14:50:33","1"]}]}

You should provide JavaScript code which create jqGrid. Morover it's important to have test JSON data which are used to fill the main grid and for the subgrid which will not expended. Typical error could be `id` duplicates or some other unclear working with ids. See [the answer](http://stackoverflow.com/a/14381550/315935) as an example of such problems. — Oleg, Jan 21 '13 at 12:07
@Oleg Yeah, but I do not think it will. Before this change I had two grid in carrying a line of grid "bodies" and featured in all other grid information regarding this id. Now that is wanted to improve it, not to get tou. (already edited the main post) — UZUMAKI, Jan 21 '13 at 12:12
You don't posted any JSON test data. One needs both JSON for the main grid and JSON for subgrid. You don't use `idPrefix` in jqGrid. So you can receive the problem with id duplicates very easy. — Oleg, Jan 21 '13 at 13:02
ok now put a test here. But before that, id is hard to duplicate happen because one comes from id "body" and another id for the subgrid, the rowid is the id come from database oracle — UZUMAKI, Jan 21 '13 at 13:23
Sorry, but I think you still don't understand the problem. If you just use id from the database and place for example **multiple times** the same ids *for different subgrids* you can very easy receive the problem with id duplicates. Probably you have another problem in your case, but to solve the problem one should first be able to reproduce it. You can just use Fiddler, Firebug or Developer Tools of IE or Chrome to catch the HTTP response from the server which contains JSON data which can be used to reproduce the problem without having the backend. — Oleg, Jan 21 '13 at 13:32
hmm ok. Then you can show me an example how to do? Because I understand what you are saying but I do not see how you can do differently since I have always done this way and it has worked, maybe lucky — UZUMAKI, Jan 21 '13 at 14:21
You need just use `idPrefix` option of jqGrid. See [the answer](http://stackoverflow.com/a/10247633/315935), [another one](http://stackoverflow.com/a/13779589/315935). [This answer](http://stackoverflow.com/a/14256048/315935) describes `idPrefix` in details. You can find more topics about `idPrefix` [here](http://stackoverflow.com/search?q=user%3A315935+%5Bjqgrid%5D+idPrefix). I can repeat that it could that you have *another* problem, but you should post test data to clear the reason of your problem. — Oleg, Jan 21 '13 at 14:36
@Oleg Already edited the post. This information comes from two different grid as I said a little. — UZUMAKI, Jan 21 '13 at 14:54
@Oleg Sorry, but I still do not get it. Have you experimented with prefix and also did not work. Ja'm right back to 3 days of it. Will you help me? — UZUMAKI, Jan 22 '13 at 12:32

score 1 · Accepted Answer · answered Jan 22 '13 at 13:07

1

Like I wrote already before in the comments the reason of the problem is wrong values of id. If one remove trailing spaces from ids ("1 " to "1", "21 " to "21" and "12 " to "12") the original non-working grid will be working:

enter image description here

answered Jan 22 '13 at 13:07

Oleg

220,925
34
403
798

I just find it a bit and also have changed the entire database. Anyway thank you very much once again. – UZUMAKI Jan 22 '13 at 14:00
I'll ask one more question to not have to open another topic. How to know when you extend the subgrid has a defined height and sometimes is too clear to the main grid. Is there any way to set the size depending on the free space to the grid? – UZUMAKI Jan 24 '13 at 16:11
1

@UZUMAKI: Sorry, but I'm not sure that I understand you correctly. Typically I use `height: "auto"` or `height: "100%"` in the grids. So the height of the grid will be automatically expanded without unneeded scroll bars. Additionally I use **always** `gridview: true` to improve performance and `autoencode: true` to be sure that any data can be correctly displayed in the grid. See [the modified demo](http://www.ok-soft-gmbh.com/jqGrid/UZUMAKI__.htm). – Oleg Jan 24 '13 at 16:28
You understood perfectly well. Incidentally, it was stupid of me not to have thought of it. Thank you. Although Germany will pay you a lunch. Thanks again – UZUMAKI Jan 24 '13 at 17:32

score 0 · Answer 2 · answered Jul 11 '13 at 23:01

I am not sure what I am missing here but I am not able to find data in subgrid though I see data in parent grid and able to expand it....

  var myData =   
  {"page":"1","total":"1","records":"2","rows":[{"id":"591","cell":["07/10/2013","Vas Editor","Workflow Transfer","All","1","591","null","2013-07-10 11:00:22",{"cell":["07/10/2013","Vas Editor","Workflow Transfer","All","1","591","null","2013-07-10 11:00:22",null]}]},{"id":"592","cell":["07/10/2013","Vas Editor","Pending Requirements","All","2","592","null","2013-07-10 11:00:35",{"cell":["07/10/2013","Vas Editor","Pending Requirements","All","2","592","null","2013-07-10 11:00:35",null]}]}],"message":""
  };


    jQuery("#noteTable").jqGrid({
    datatype : "local",     
    colNames : [ 'Date', 'User Name', 'Tag(s)', 'Applicant', 'Note', 'Id','Applicant Id','Date TS','subRow'],
    colModel : [ 
        {name : 'date', index : 'date', width : 120 }, 
        {name : 'userName', index : 'userName', width : 150 }, 
        {name : 'tags', index : 'tags', width : 150 }, 
        {name : 'applicant', index : 'applicant', width : 150, editable : true }, 
        {name : 'note', index : 'note', width : 150 }, 
        {name : 'id', index : 'id', hidden : true } , 
        {name : 'applicantId', index : 'applicantId', hidden : true},
        {name : 'dateTS', index : 'dateTS', hidden : true},
        {name : 'subRow', index : 'subRow', hidden : true}

    ],
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    pager : '#notesTablePager', // un comment this line to see the pagination bar
    sortname : 'dateTS',
    viewrecords : true,
    sortorder : "desc",
        idPrefix: "m",
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var data = $("#noteTable").jqGrid("getLocalRow", row_id);
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
console.log('row_id****'+row_id);
console.log('searchData *****'+searchData);
    console.log('myData *****'+myData);
    var localRowData1 = $(this).jqGrid('getLocalRow', row_id);
    var localRowData = $("#noteTable").jqGrid('getLocalRow', row_id).cell;
    console.log('localRowData1 ***************'+localRowData1);
    console.log('localRowData ***************'+localRowData);

   var subgrid_table_id;
   var subgridTableId = subgrid_id + "_t"; 
   $("#" + subgrid_id).html("<table id='" + subgridTableId + "'></table>");       
   $("#" + subgridTableId).jqGrid({      
        datatype: "local",            
        data: data.cell,
        colNames : [ 'Date', 'User Name', 'Tag(s)', 'Applicant', 'Note', 'Id','Applicant Id','Date TS' ],
        colModel : [ 
                    {name : 'date', index : 'date', width : 120 }, 
                    {name : 'userName', index : 'userName', width : 150 }, 
                    {name : 'tags', index : 'tags', width : 150 }, 
                    {name : 'applicant', index : 'applicant', width : 150, editable : true }, 
                    {name : 'note', index : 'note', width : 150 }, 
                    {name : 'id', index : 'id', hidden : true } , 
                    {name : 'applicantId', index : 'applicantId', hidden : true},
                    {name : 'dateTS', index : 'dateTS', hidden : true}
    ],
      height: '100%',
      rowNum:20,
      sortname: 'Date',
      sortorder: "desc",
      idPrefix: "s_" + row_id + "_"
   })

}

}).navGrid('#notesTablePager', {add : false, edit : false, del : false});
$("#noteTable").setGridParam({datatype : 'json',loadonce : true});
$("#noteTable")[0].addJSONData(myData); 
$("#noteTable").setGridParam({datatype : 'local'});
$("#noteTable").setGridParam({pagination : true});
$("#notesResultDiv").css("display", "inline");
$("#noteTable").trigger('reloadGrid');

Welcome to SO. You answer seems a bit confusing since you answered the question but then contradicted yourself by saying "I am not sure what I am missing here but I am not able to find data in subgrid though I see data in parent grid and able to expand it....". In the future, please make sure that you have fully-vetted your answer (tested it) before you post. — Brian, Jul 11 '13 at 23:30

Subgrid expand but dont show info

2 Answers2