javascript - Jqgrid subgrid not expanding on first load

332

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; 
  }   
200

Answer

Solution:

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/

709

Answer

Solution:

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()},

People are also looking for solutions to the problem: php - Having trouble with testing code using PHPunit

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.