This really bugged me when I came across the SPGridView (as you can read in the previous about this control) that when you set the following properties

oGrid.AllowGrouping = true;
oGrid.AllowGroupCollapse = true;

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

You'd expect that there is another property where you can specify if you want to have it collapsed or expanded when the Grid gets rendered. Unfortunately there isn't.. but (and that's why I'm posting ;)) there is dirty way to do it and that's injecting some javascript after the grid gets rendered. Thanks to my collegua Servé "CSS/HTML & Javascript Wizard" Hermans the following bit of script gets the job done.

<script type="text/javascript">
var rows = document.getElementsByTagName('tr');
var numRows = rows.length;
for (var i = 0; i < numRows; ++i) 
{
    if (rows.getAttribute("isexp") != null && rows.getAttribute("isexp").toLowerCase() == "true")
    {
          if(rows.firstChild.firstChild != null && rows.firstChild.firstChild.tagName.toLowerCase() == "a")
          {    
              if (rows.firstChild.firstChild.title.toLowerCase() == "expand/collapse")
                  {
                    rows.firstChild.firstChild.fireEvent("onclick");
            }
          }
    }

}
</script>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

To explain it the script.. an event called "ToggleSPGridViewGroup" (which can be found in the spgridview.js in the Layouts folder) is fired when you click on the expand/collapse icon on the grouped item. So I thought "Why not fire all of the links to have it all collapsed by default?" :) I thought this wasn't possible since it seems REALLY dirty to actually fire events without user interaction. But it actually is possible! Thank god ;)

Read the complete post at http://feeds.feedburner.com/~r/RobinsSharepointBlog/~3/150014200/spgridview-and-collapsed-grouping-by.html

---

Posted 08-30-2007 4:25 AM by Robin's Sharepoint Blog