Hi there,
I am facing some issues with expanding and collapsing subgrids and look for help.
What I have is the following: I have a list of two rows and when I select one of the rows the subgrid opens. – This is working fine. Since I only want to have one subgrid visible at one time I used the following code (which I have found in the forums) to close all open subgrids before the new one opens:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
subGridBeforeExpand: function(subgridDivId, row_id) { if (row_id != SubGridRowId) { var grid = $(this); var rows = grid.jqGrid("getDataIDs"); $.each(rows, function(index, rowId) { grid.collapseSubGridRow(rowId); if (index + 1 == rows.length) { SubGridRowId = row_id; return true; grid.expandSubGridRow(row_id); } }); return false; } return true; } |
This is working fine too but I noticed that this routine may fire the “subGridBeforeExpand” event twice when the “if” clause is true – this I do not want.
So I thought – since I know the SubGridRowId anyhow – why not use
|
1 2 3 4 5 6 7 |
subGridBeforeExpand: function(subgridDivId, row_id) { if(SubGridRowId) { $("#list").collapseSubGridRow(SubGridRowId); } SubGridRowId = row_id; return true; } |
instead.
This is also working fine as long as I open and close always the same row (e.g. row 2) but it breaks as soon as I start to open the two lines alternatively. So opening the first subgrid works fine, clicking on the alternate line closes the actual subgrid and opens the new one but if I click again on the other line the previous subgrid is not closed.
So I added some firebug code to the events as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
subGridBeforeExpand: function(subgridDivId, row_id){ console.log("before: subGridId: "+SubGridRowId+" , row_id: "+row_id); if(SubGridRowId) { $("#list").collapseSubGridRow(SubGridRowId); } SubGridRowId = row_id; console.log("after: subGridId: "+SubGridRowId+" , row_id: "+row_id); return true; }, subGridRowExpanded: function(subgrid_id, row_id) { console.log("sub expanded:"+row_id+" - "+subgrid_id); ... } |
So clicking on the second row (after a fresh reload) shows:
before: subGridId: null , row_id: 2
after: subGridId: 2 , row_id: 2
sub expanded:2 – list_2
This looks OK, since so subgrid was expanded the subGridId is null, the clicked row is saved in subGridId and the subgrid was opened correctly.
When I now click on row one I see:
before: subGridId: 2 , row_id: 1
subGridRowColapsed: 2 – list_2
after: subGridId: 1 , row_id: 1
sub expanded:2 – list_2
And this is strange…
So the old subgrid Id is fine, also the right subgridrow is collapsed, and also the new subgridrow is assigned correctly – but why has is the new subgrid still the old subgridId?
And this is true…when I inspect the DOM the new subgrid is correctly located under row one but it is called “list_2” – so also clear for me why I can not collapse it again.
Also interesing: when I call : $(‘#list’).collapseSubGridRow(1); the “Minus” sign at the beginning of the row turns to a “Plus” what is correct but as mentioned the subgrid is not closing.
Any help is very much appreciated
Thanks
Juergen
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top