jQuery Grid Plugin - jqGrid - Topic: issue with subgrids expanded on load

OlegK on issue with subgrids expanded on load

Mon, 04 Jun 2012 20:51:20 +0300

It's a pity that forum not automatically subscribes the topic where one write an answer. If one forget to manually subrcribe it one can easy escape from the discussion in the topic.

In any way I'm glad to read that the problem is solved and even the fix is found. It will be good for other users.

Best reagards
Oleg

tony on issue with subgrids expanded on load

Mon, 04 Jun 2012 20:15:30 +0300

Hello,

Thanks Vlad. Just fixed the issue in GitHub

Best Regards

Tony

Vlad on issue with subgrids expanded on load

Fri, 11 May 2012 15:02:42 +0300

Hi Oleg,

Actually, I believe that my problem is not quite the same as ones described by you. I debugged jqgrid code and was able to see that the reason is quite simple - triggering 'onClick' event on a wrong row (subgrid row instead of next "parent" row).

The code which fires that event does not check if this is right row - that code is out of condition

            if($(ts.rows[i]).hasClass('jqgrow')) {
...
           }
           if(ts.p.subGridOptions.expandOnLoad === true) {
               $(ts.rows[i].cells[pos]).trigger('click');
               }

And by the way the my grid does not perform any ajax calls. Instead they are performed by other objects and data are set as a local array.

If you would like, I can share your my screen via Skype session and explain what I mean.

Best regards,

Vlad

OlegK on issue with subgrids expanded on load

Fri, 11 May 2012 13:59:28 +0300

Hi,

I think that the origin of the problem is a litte another as you described. I see the main problem is that .trigger('click') follows to call of populatesubgrid, which use test for ts.grid.hDiv.loading (see the line of code) like in the most other places of jqGrid where $.ajax are called. In the next line the property ts.grid.hDiv.loading will be set to false and so some other .trigger('click') will be just skipped.

You can find description of the same problem here and here. At the moment as I wrote the answers I don't knows a good way to solve the problem. Later I though to place ids of all requested nodes which needed be expanded in one array and to start new Ajax request at the end of processing of the previous one. I though to itarate in the way till the array of ids which should be expanded will be empty.

Later I think there are much better way to solve the problem. Look at the answer, which describes close problem in case when one need to expand multiple tree nodes directly after loading of the TreeGrid.

Currently jqGrid send to the server id of the expanding node as the parameter (the default name of the parameter is id, but can be configured by prmNames.subgridid jqGrid option). I find the best to allow to send array of ids of all nodes which need be expanded in one Ajax request. One should change a little the processing of the response in subGridJson and subGridXml, but it will be easy enough. In the way one could not only solve the problem which you describe, but improve the performance by reducing of round trips.

Best regards
Oleg

Vlad on issue with subgrids expanded on load

Fri, 11 May 2012 12:42:49 +0300

Hi,

I noticed the following issue.

When I use

subGrid: true,

subGridOptions: {
                        expandOnLoad: true,
                        reloadOnExpand : false
                    },

I expect all my rows to be expanded and subgrids to be loaded.

However only first half of rows are expanded.

I looked into the code and found event 'click' is triggered on each first cell in a row in a loop:

while(i < len) {

if($(ts.rows[i]).hasClass('jqgrow')) {

…

}

…

            if(ts.p.subGridOptions.expandOnLoad === true) {
               $(ts.rows[i].cells[pos]).trigger('click');
               }
           i++;

}

The problem is that by the time of new iteration new row (subgrid row) is already inserted. This means that 'click' event is triggered on a subgrid row instead of regular one.

I fixed that by removing those lines completely:

            if(ts.p.subGridOptions.expandOnLoad === true) {
               $(ts.rows[i].cells[pos]).trigger('click');
               }

And by adding the following loop:

        $(ts.rows).filter('.jqgrow').each(function(index,row){
            $(row.cells[0]).click()
        });

right after while loop and before

ts.subGridXml = function(xml,sid) {subGridXml(xml,sid);};
ts.subGridJson = function(json,sid) {subGridJson(json,sid);};

The final code looks like:

        while(i < len) {
           if($(ts.rows[i]).hasClass('jqgrow')) {
               $(ts.rows[i].cells[pos]).bind('click', function() {
                   var tr = $(this).parent("tr")[0];
                   r = tr.nextSibling;
                   if($(this).hasClass("sgcollapsed")) {
                       pID = ts.p.id;
                       _id = tr.id;
                       if(ts.p.subGridOptions.reloadOnExpand === true || ( ts.p.subGridOptions.reloadOnExpand === false && !$(r).hasClass('ui-subgrid') ) ) {
                           atd = pos >=1 ? "<td colspan='"+pos+"'> </td>":"";
                           bfsc = $(ts).triggerHandler("jqGridSubGridBeforeExpand", [pID + "_" + _id, _id]);
                           bfsc = (bfsc === false || bfsc === 'stop') ? false : true;
                           if(bfsc && $.isFunction(ts.p.subGridBeforeExpand)) {
                               bfsc = ts.p.subGridBeforeExpand.call(ts, pID+"_"+_id,_id);
                           }
                           if(bfsc === false) {return false;}
                           $(tr).after( "<tr role='row' class='ui-subgrid'>"+atd+"<td class='ui-widget-content subgrid-cell'><span class='ui-icon "+ts.p.subGridOptions.openicon+"'></span></td><td colspan='"+parseInt(ts.p.colNames.length-1-nhc,10)+"' class='ui-widget-content subgrid-data'><div id="+pID+"_"+_id+" class='tablediv'></div></td></tr>" );
                           $(ts).triggerHandler("jqGridSubGridRowExpanded", [pID + "_" + _id, _id]);
                           if( $.isFunction(ts.p.subGridRowExpanded)) {
                               ts.p.subGridRowExpanded.call(ts, pID+"_"+ _id,_id);
                           } else {
                               populatesubgrid(tr);
                           }
                       } else {
                           $(r).show();
                       }
                       $(this).html("<a href='javascript:void(0);'><span class='ui-icon "+ts.p.subGridOptions.minusicon+"'></span></a>").removeClass("sgcollapsed").addClass("sgexpanded");
                       if(ts.p.subGridOptions.selectOnExpand) {
                           $(ts).jqGrid('setSelection',_id);
                       }
                   } else if($(this).hasClass("sgexpanded")) {
                       bfsc = $(ts).triggerHandler("jqGridSubGridRowColapsed", [pID + "_" + _id, _id]);
                       bfsc = (bfsc === false || bfsc === 'stop') ? false : true;
                       if( bfsc && $.isFunction(ts.p.subGridRowColapsed)) {
                           _id = tr.id;
                           bfsc = ts.p.subGridRowColapsed.call(ts, pID+"_"+_id,_id );
                       }
                       if(bfsc===false) {return false;}
                       if(ts.p.subGridOptions.reloadOnExpand === true) {
                           $(r).remove(".ui-subgrid");
                       } else if($(r).hasClass('ui-subgrid')) { // incase of dynamic deleting
                           $(r).hide();
                       }
                       $(this).html("<a href='javascript:void(0);'><span class='ui-icon "+ts.p.subGridOptions.plusicon+"'></span></a>").removeClass("sgexpanded").addClass("sgcollapsed");
                   }
                   return false;
               });
           }
           i++;
       }
        $(ts.rows).filter('.jqgrow').each(function(index,row){
            $(row.cells[0]).click()
        });
       ts.subGridXml = function(xml,sid) {subGridXml(xml,sid);};
       ts.subGridJson = function(json,sid) {subGridJson(json,sid);};

Please apply some fix to jqgrid (either mine or yours)