Jqgrid subgrid not expanding on first load

Question

I have a Jqgrid with two subgrids and a groupingView(), when my data is loaded from the server into the grid my subgrid does not want to expand. Only when I page or click the refresh button the subgrid does expand, or when I set loadonce:false or take out the groupingView() it wil expand and everything is working fine, but then my export to excel is not showing any data. I want my subgrid to expand when the data is loaded for the first time, not after I refresh or page!

I have have tried:

$MyGrid.jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');

and also tried making a trigger to fire the refresh button on loadComplete()

*$(".ui-icon-refresh").each(function () { 
    $(this).trigger("click");
       });*  

This trigger button does work when it's clicked, but it does not fire automatically in the loadComplete() function.

Here is my Javascript:

   function CreateOrdSummaryTable() 
          {
            if ($("#DataTab_2").length === 0) 
            {
                $("#tdBotRight").html("<table id='DataTab_2' class='dataContent' border='1' align='top'></table>" +
                           "<div id='PagerDataTab_2'></div>");
            }  

            var $tableOrdSummary = $("#DataTab_2");    

            $tableOrdSummary.jqGrid({
                url: '/Ord/WS/OrderWebSummary.php',               
                colNames: ["Sum of Order Mass","Customer", "Case", "Associated Mass" ,"Order Mass","Invoiced Mass","Shipped Mass","FGI Mass"],
                colModel: [                 
                { name: "ORDITM", index: "ORDITM", resizable: true, width: 120},
                { name: "CUSTOMER", index: "CUSTOMER", resizable: true, width: 250},  
                { name: "CASES", index: "CASES",  summaryTpl: "<i>Order Group Total:</i>", summaryType: "sum", resizable: true, width: 250},                  
                { name: "ASSMASS", index: "ASSMASS", summaryTpl: "<i>{0}</i>", summaryType: "sum", resizable: true, width: 165, formatter: "integer"},                
                { name: "ORDMASS", index: "ORDMASS", summaryTpl: "<i>{0}</i>", summaryType: "sum", resizable: true, width: 115, formatter: "integer"},
                { name: "DIST", index: "DIST", summaryTpl: "<i>{0}</i>", summaryType: "sum", resizable: true, width: 130, formatter: "integer"}, 
                { name: "WIP", index: "WIP", summaryTpl: "<i>{0}</i>", summaryType: "sum", resizable: true, width: 130, formatter: "integer"},
                { name: "MDB", index: "MDB", summaryTpl: "<i>{0}</i>", summaryType: "sum", resizable: true, width: 110, formatter: "integer"}              
                ],
                pager: jQuery("#PagerDataTab_2"),
                shrinkToFit: false,
                autoWidth: false,
                caption: "Order Summary",
                height: "100%",
                rowNum: 1000,    
                //rowList: [50,100,200],
                loadonce: false, //This is to get the Paging to turn on if set to (true)
                gridview: true,                            
                footerrow: true,
                userDataOnFooter: true, 
                grouping : true,               
                groupingView : { 
                     groupField : ["ORDITM"],
                     groupColumnShow : [true],
                     groupText: [ // user the name of a column with curly braces to use it in a summary expression. 
                                 // {0} is the formula placeholder for the column (defined by the summaryType property
                                "<i><b>{0} - {1} Order(s)</b></i>"
                                ],
                     showSummaryOnHide: true,
                     groupSummary : [true],
                     groupCollapse : false                 
               }, 
         loadComplete: function () {
         var AssSum = parseInt($tableOrdSummary.jqGrid('getCol', 'ASSMASS', false, 'sum'));
         var OrdSum = parseInt($tableOrdSummary.jqGrid('getCol', 'ORDMASS', false, 'sum'));            
         var InvSum = parseInt($tableOrdSummary.jqGrid('getCol', 'DIST', false, 'sum'));
         var ShpSum = parseInt($tableOrdSummary.jqGrid('getCol', 'WIP', false, 'sum'));
         var FGISum = parseInt($tableOrdSummary.jqGrid('getCol', 'MDB', false, 'sum'));       
         $tableOrdSummary.jqGrid('footerData', 'set', 
         { 
            CASES: '<i><b>Grand Total:</b></i>',
            ASSMASS: AssSum,
            ORDMASS: OrdSum,
            DIST: InvSum,
            WIP: ShpSum,
            MDB: FGISum
         });
         },     
         postData: {
         "GroupID": function() {   
               return groupID();
                 }
             },              
         subGrid: true,        
         subGridOptions: {
            "plusicon"  : "ui-icon-triangle-1-e",
            "minusicon" : "ui-icon-triangle-1-s",
            "openicon"  : "ui-icon-arrowreturn-1-e",
            "expandOnLoad" : false,
            "reloadOnExpand" : true,
            "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:"/Ord/WS/OrderItemSummary.php",       
            datatype: "json",
                colNames: ["Item", "RFD Date","Associated Mass", "Order Mass", "Invoiced Mass", "Shipped Mass", "FGI Mass"],
                colModel: [                    
                { name: "ITEM", index: "ITEM", resizable: true, width: 60},                 
                { name: "RFDDATE", index: "RFDDATE", summaryTpl : "<i>Total:</i>", summaryType: "sum", resizable: true, width: 135},              
                { name: "ASSMASS", index: "ASSMASS", summaryTpl: "<i>{0}</i>", summaryType: "sum", resizable: true, width: 180, formatter: "integer"},                
                { name: "ORDMASS", index: "ORDMASS", summaryTpl: "<i>{0}</i>", summaryType: "sum", resizable: true, width: 115, formatter: "integer"},
                { name: "DIST", index: "DIST", summaryTpl: "<i>{0}</i>", summaryType: "sum", formatter: "integer", resizable: true, width: 130}, 
                { name: "WIP", index: "WIP", summaryTpl: "<i>{0}</i>", summaryType: "sum", formatter: "integer", resizable: true, width: 130},
                { name: "MDB", index: "MDB", summaryTpl: "<i>{0}</i>", summaryType: "sum", formatter: "integer", resizable: true, width: 115}             
                ],
          rowNum:50,
          pager: pager_id,
          shrinkToFit: false,
          autoWidth: false,          
          height: '100%',
          caption: "Item Summary",
//                footerrow: true,
//                userDataOnFooter: true,           
                grouping : true,               
                groupingView : { 
                     groupField : ["ITEM"],
                     groupColumnShow : [false],
                     groupText: [ // user the name of a column with curly braces to use it in a summary expression. 
                                 // {0} is the formula placeholder for the column (defined by the summaryType property
                                "<i><b>Item(s): {0}</b></i>"
                                ],
                     groupOrder: ["asc"],
                     groupSummary : [true],
                     groupCollapse : false,
                     groupDataSorted : true
               }, 
         loadComplete: function () {
//         var InvSum = parseInt(jQuery("#"+subgrid_table_id).jqGrid('getCol', 'DIST', false, 'sum'));
//         var ShpSum = parseInt(jQuery("#"+subgrid_table_id).jqGrid('getCol', 'WIP', false, 'sum'));
//         var FGISum = parseInt(jQuery("#"+subgrid_table_id).jqGrid('getCol', 'MDB', false, 'sum'));   
//         var AssSum = parseInt(jQuery("#"+subgrid_table_id).jqGrid('getCol', 'ASSMASS', false, 'sum'));
//         var OrdSum = parseInt(jQuery("#"+subgrid_table_id).jqGrid('getCol', 'ORDMASS', false, 'sum'));         
//         jQuery("#"+subgrid_table_id).jqGrid('footerData', 'set', 
//         { 
//            RFDDATE: '<i><b>Grand Total:</b></i>',
//            ASSMASS: AssSum,
//            ORDMASS: OrdSum,
//            DIST: InvSum,
//            WIP: ShpSum,
//            MDB: FGISum
//         });

         },     
          postData: {
         "GroupRwID": function() { 
         var myString = onRowSelected(row_id);
         var finalString = groupRowID() + myString;
         //console.log(finalString);
         return finalString;
               }
             },
         subGrid: true,         
         subGridOptions: {
            "plusicon"  : "ui-icon-triangle-1-e",
            "minusicon" : "ui-icon-triangle-1-s",
            "openicon"  : "ui-icon-arrowreturn-1-e",
            "expandOnLoad" : false,
            "reloadOnExpand" : true,
            "selectOnExpand" : true
      },    
      subGridRowExpanded: function(subgrid2_id, row2_id) {
         var subgrid_table_id2, pager_id2;
         subgrid_table_id2 = subgrid2_id + "_t";
         pager_id = "p_" + subgrid_table_id2;
         $("#"+subgrid2_id).html("<table id='"+subgrid_table_id2+"' class='scroll'></table><div id='"+pager_id2+"' class='scroll'></div>");
         jQuery("#"+subgrid_table_id2).jqGrid({
            url:"/Ord/WS/OrderCaseSummary.php",       
            datatype: "json",
                colNames: ["Case", "Associated Mass"],
                colModel: [
                { name: "CASES", index: "CASES", summaryTpl : "<i>Total:</i>", summaryType: "sum", key: true, resizable: true, width: 130},                 
                { name: "ASSMASS", index: "ASSMASS", summaryTpl: "<i>{0}</i>", summaryType: "sum", resizable: true, width: 180, formatter: "integer"}                          
                ],
          rowNum:50,
          pager: pager_id,
          shrinkToFit: false,
          autoWidth: false,          
          height: '100%',
          caption: "Cases Summary",             
          postData: {
         "CaseSum": function() {
         var selRwData = '"CASES":"' + cases + '",' + '"ORDITM":"' + ordItm + '",' + '"CUSTOMER":"' + customer + '",' + '"ASSMASS":"' + assMass + '"' +"}"; 
         var finalStr = groupRowID() + selRwData;
         return finalStr;
               }
             }          
        });         
      $('#'+subgrid_table_id2).addClass("subGrids");
      }               
        });         
      $('#'+subgrid_table_id).addClass("subGrids");
      }      
          });

      $tableOrdSummary.jqGrid("navGrid","#PagerDataTab_2",
         {edit:false,add:false,del:false, refreshstat:"current"},
         {},
         {},
         {},
         {multipleSearch:false, multipleGroup:false, showQuery: false}
         ); 
}

      function ordSummaryView() 
      {  
         $("#DataTab_2").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid'); //This makes the call to refresh the grid.
      }

      function onRowSelected(rowId)
      {
         var $tableOrdSummary = $("#DataTab_2");
         var rowData = $tableOrdSummary.jqGrid ('getRowData', rowId);
         cases = rowData.CASES;   
         customer = rowData.CUSTOMER;
         assMass = rowData.ASSMASS;
         ordItm = rowData.ORDITM;

         var selRwData = '"CASES":"' + cases + '",' + '"ORDITM":"' + ordItm + '",' + '"CUSTOMER":"' + customer + '",' + '"ASSMASS":"' + assMass + '"' +"}"; 

         return selRwData;
      }  

      function getTotals()
      {
         var $tableOrdSummary = $("#DataTab_2");
         ids = $tableOrdSummary.jqGrid('getDataIDs');
         int = 0;
         for (var i = 0; i < ids.length; i++) 
         {
            var rowId = ids[i];
            var rowData = $tableOrdSummary.jqGrid ('getRowData', rowId);

            var distTotal = rowData.DIST;
            int += parseInt(distTotal);
         }
         return int;
      }

      $(document).ready(function() 
      {
        CreateOrdSummaryTable();

      });

Function for GroupRowID():

  function groupRowID()
  {

     var jsonSearchString = "";  
     var sGroupId = <?php echo "'" . $sGroupId . "'" ; ?>;
     jsonSearchString = '"GROUPID":"' + sGroupId + '",';
     return "{" + jsonSearchString; 
  }   

Chalet

Which version of jqGrid you use?. Sorry, but many things are unclear in your code. Is #tdBotRight exist on the page initially or you generate it and place it dynamically? Why your code contains outer { ... }? The code $("#DataTab_2").jqGrid().setGridParam({ datatype: 'local',..})).trigger("reloadGrid"); is very bad inside of loadComplete of the same grid. You use explicitly loadonce: false, but try to do close things, but in the wrong way. What is your goal? – Unattended

Moreover your question is about "subgrid not expanding on first load". Do you want to expand all subgrids or some specific subgrid on loading? You use subGridOptions: {..., expandOnLoad: false, ...}. Why subgrids should be expanding? jqGrid send Ajax request to /Ord/WS/OrderWebSummary.php to load main grid data and then you want to send multiple requests to /Ord/WS/OrderItemSummary.php for every subgrid? Is it not better to load all subgrid information at the loading of the main grid? – Unattended

I don't want the subgrids to expand automatically which will be expandOnLoad: true. When the data is loaded for the first time in the main grid and I press the subgrid arrow, it is not expanding! Only when I page or refresh, then it will expand when clicked on. I understand what you are saying about the multiple requests, but regardless it's supposed to be working. – Chalet

Sorry, but the code of groupRowID() provide almost no information because $sGroupId is unknown. Moreover why you need the function which returns something like {"GROUPID":"blabla",. It's a part of something. It have no meaning along. Good interface would be either to return just $sGroupId or to return the object {GROUPID:"blabla"}. One can merge it with other properties using $.extend. Back to your main question. I recommend you to include loadError callback in grid (subgrid). See the answer. – Unattended

Could you include full URL used in the first request to the server in the subgrid and the response which you see in HTTP trace made by Fiddler, or Developer Tools of IE/Crome/Firefox? – Unattended

$sGroupId contains the value to which group the logged on user belongs to, and I am using it to display only records belonging to that user from my sql query. And I am combining that groupID with other parameters for more specific data which I want to return. – Chalet

It's clear that $sGroupId as a value, a string, but without any example one can't say that the posted code is correct or wrong. If it's general value then it can contains ", ` and so on. In the case the groupRowID()` will wrong, but JSON.stringify() will allays produce correct JSON string. I asked you to post the URL example sent to the server and the server response because without the data one can't solve the problem. If no data are displayed then something is wrong, but one have to analyse every step to find the reason. I can't help you without having more details. – Unattended

I downloaded fiddler now. The $sGroupId sent for the main grid is correct and it is returning all the needed data in json format (The main grid is currently loaded with 500 records. But when I click on the subgrid arrow no request is being sent to the server, but only when I refresh the grid a request is sent and the subgrid opens.. – Chalet

If you click on "+" in some row the subgrid will be created. It means that you create new grid in the subgrid area. The subgrid send HTTP request to /Ord/WS/OrderItemSummary.php. My question was: which request for filling of subgrid will be sent to the server? Which response for filling of subgrid you get from /Ord/WS/OrderItemSummary.php? Your problem is: no data will be displayed in the subgrid. Isn't so? So one have to analyse the failed request. Either the request is wrong or the response is wrong or the options of subgrid don't corresponds the format of the server response. – Unattended

If I click "+" in some row the HTTP request to /Ord/WS/OrderItemSummary.php is not sent for the first time the grid loads, but when I refresh the grid and the click "+" in some row, then the request /Ord/WS/OrderItemSummary.php is sent and the correct data is returned and displayed in the subgrid. The response is json format exactly the same as the main grid – Chalet

The request to /Ord/WS/OrderItemSummary.php and the response is ==>[{"ITEM":"12","RFDDATE":"09/29/12","ASSMASS":"1289","ORDMASS":"2360","DIST":"20500","WIP":"30654","MDB":"0.000"}] – Chalet

Do you added loadError to all grids like I suggested in previous comments? What error you see? I see many common problems in your code. The response contains no id property. Alternatively you can include key: true in one column (in ITEM for example) to inform get rowids from the values. You need have unique values in the column. So jqGrid have to assign the values 1,2,3,... as rowid for all grids and subgrids. You will have id duplicates which is not allowed in HTML. – Unattended

Moreover you don't use idPrefix in subgrids. You should always use idPrefix in subgrids. For example idPrefix: "s1_" + row_id + "_" for the subgrids of the first level and idPrefix: "s1_" + row2_id + "_" for subgrids of the second level. – Unattended

I did make use of idPrefix now, so I have unique ID's eveywhere. I also did put in loadError and I have no errors! The result is still the same... – Chalet

I made for you the demo jsfiddle.net/OlegKi/u9x2fcz1 which use you data and which do display all correctly. You can modify the demo and include the responses from your server. In the way you can reproduce your problem after that the problem can be easy solved. – Unattended

If you can have a look at the demo, this is somehow what i want to achieve! – Chalet

In the demo if i click on the arrow the subgrid is created, but with my project I first need to refresh the grid so that the subgrid can be created! And I copied both the main grid and subrid responses exactly as it is returned by my webservice! – Chalet

Sorry, but where is the URL to modified demo? One can solve the problem only if one can reproduce it. One have to debug the code to see the reason. I posted you example which use Echo service of JSFiddle. You can define server responses for the main grid or subgrid in separate JavaScript variable and you can create the demo which do exactly what your project do. – Unattended

jsfiddle.net/u9x2fcz1/4 – Chalet

Comments are not for extended discussion; this conversation has been moved to chat. – Cassino

I don't see any problem in the demo with expanding of subgrids after the first load. I tested it in IE10/IE11/Chrome/Firefox. Which web browser you use in your tests? Could you describe the exact test case which can be used to reproduce the problem which you reported in the JSFiddle demo. – Unattended

There is no problem in the demo, everything is working fine. I used Chrome in my tests. I'm trying to reproduce the problem in the demo! – Chalet

Answer 1

Following your example, if you add this code into your main grid options, your subgrids will be opened on loadComplete

loadComplete: function(){$(".ui-widget-content.jqgrow.ui-row-ltr td a").click()},

You can see it here: https://jsfiddle.net/f4vosxqo/1/

Howrah

Answer 2

Alternatively to S.Pini's answer, use gridComplete instead of loadComplete. This difference is loadComplete fires every time a server request is made and the grid is loaded, gridComplete fires only once after ALL load processes are complete. Code Example:

gridComplete: function(){$(".ui-widget-content.jqgrow.ui-row-ltr td a").click()},

Afterword