jqGrid, only show one subgrid at the time

Question

I'm using jqGrid and I can't have 2 subgrids at the same time, if the second one is clicked, the previous one should be closed.

And I can't find an event to prevent this... I need something like:

$("#list2").jqGrid({
        multiSubGrids: false
});

Maybe It's something I'm missing...

Thanks in advance!

Answer 1

From here Subgrid/Events:

with subGridRowExpanded: function(subgrid_id, row_id) { ... } you can catch the event.

and with

$("#list2 tr:has(.sgexpanded)").each(function () {
    num = $(this).attr('id');
    $(this).collapseSubGridRow(num);
});

you can collapse all expanded subgridrow.

Answer 2

I have found this way... it work, but I don't know if its the best one:

// this will save the rowId of the previous subGrid
var previousRowId = 0;

$("#list2").jqGrid({
    // all your default mapping here..  
    ...
    subGridRowExpanded: function (subgrid_id, row_id) {
    if (previousRowId != 0) {
        $(this).collapseSubGridRow(previousRowId);
    }   
    ...
    // all your subgrid code here
    ...
    // this will save the actual row_id,
    // so the next time a subgrid is going to be expanded,
    // it will close the previous one
    previousRowId = row_id; 
});

Hope it helps someone else!

Answer 3

I tried solution suggested by Luis and it didn't work

This one works like a charm: http://guriddo.net/?topic=how-do-i-only-have-only-1-subgrid-expanded-at-any-time/#post-115123

subGridBeforeExpand: function(divid, rowid) {
  // #grid is the id of the grid
  var expanded = jQuery("td.sgexpanded", "#grid")[0];
  if(expanded) {
    setTimeout(function(){
        $(expanded).trigger("click");
    }, 100);
  }
},