23 January 2008

ExpGroupBy(obj) Javascript Function

There are times that I am glad to be a SharePoint developer. Today is one of those days! I have been working on a web part that needs to roll-up a lot of data from multiple sub-sites for a dashboard style view. The view needs to group the data by two separate criteria (Unit and Category). Additionally, the desire of the project sponsor is to have all of the items be in a collapsed view with the ability to expand those items on demand. I begin thinking to myself, "Great -- I get to play with Javascript!" Now, repeat that statement with as much sarcasm as you can muster and you have a good idea of my state of mind.

I then remember that I can use SharePoint Designer to create a view similar to my target view. Okay, let's create a list and add several items to it. I now have my "test data" to begin my experiments. Opening up SharePoint Designer, I create a dataview of my list and then specify two levels of grouping. I save the page and then open up the page in IE.

I play with the grouping and find that it is exactly how I want to implement this functionality for my client. So, the fun work of dissecting code begins. During my investigation, I notice that there is a call to a javascript function ExpGroupBy being issued when I click on the handy 'plus' and 'minus' images. After further investigation, I learn that this is a function available in the core.js script file. Hurray! I can use this!

So, I make the necessary modifications to my web site and create my headers and footers for each group, assign unique ID's and then test it in IE... crash! The javascript doesn't work. Here's a sample of the table I was using:

<tr id="group0" style="display: block">
<td class="ms-gb" style="background: #cccccc;" colspan="8">
<a href="javascript:" onclick="javascript:ExpGroupBy(this);return false;">
<img src="/_layouts/images/minus.gif" border="0" alt="expand" name="collapse"></a>
UNIT 10000</td>
</tr>
<tr id="group1" style="display: none;">
<td class="ms-gb" style="background: #cccccc;" colspan="8">
<a href="javascript:" onclick="javascript:ExpGroupBy(this);return false;"><img src="/_layouts/images/minus.gif" border="0" alt="expand" name="collapse"></a>PERSONNEL EXPENSE</td>
</tr>
<tr>
<th class="ms-vh">Cost Center</th>
<th class="ms-vh">Description</th>
<th class="ms-vh">Prev. Budget</th>
<th class="ms-vh">Prev. Actual</th>
<th class="ms-vh">Current Budget</th>
<th class="ms-vh">YTD Actual</th>
<th class="ms-vh">Proposed Budget</th>
<th class="ms-vh">Increase/Descrease</th>
</tr>
<tr class="ms-alternating" style="display: none;">
<td>
10-10000-1000002</td>
<td>
<a href="http://sharepointdev/sites/budgtest/10000/Lists/Cost Centers/EditForm.aspx?ID=3&Source=/sites/budgtest/Shared Documents/Centers.aspx">Sample Cost Center</a></td>
<td align="right">
$25,365.00</td>
<td align="right">
$25,365.00</td>
<td align="right">
$25,365.00</td>
<td align="right">
$4,289.39</td>
<td align="right">
$0.00</td>
<td align="right">
$29,500.00</td>
</tr>

.....

<tr id="group2" style="display: none"><td class="ms-gb" style="background: #cccccc;" colspan="2"> PERSONNEL EXPENSE Totals: </td> <td class="ms-gb" style="background: #cccccc;" align="right"> $439,370.00</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $439,370.00</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $439,370.00</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $141,865.06</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $0.00</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $29,500.00</td> </tr> <tr id="group3" style="display: none"><td class="ms-gb" style="background: #cccccc;" colspan="2"> PERSONNEL EXPENSE Totals: </td> <td class="ms-gb" style="background: #cccccc;" align="right"> $439,370.00</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $439,370.00</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $439,370.00</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $141,865.06</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $0.00</td> <td class="ms-gb" style="background: #cccccc;" align="right"> $29,500.00</td> </tr>

So I loaded this up in IE and to my surprise it ALMOST worked. When I clicked on the unit expand/collapse, the entire table would be collapsed from that place. So if I had multiple units, I would only see a single unit. The same thing would happen if I collapsed a category -- all units and categories below would also collapse.

After further investigation, I learned that the function works by examining the ID of the table row containing the group header and footer. This is how it determines the current level you are viewing to collapse the correct items. So, for my example I needed two group ID's, group0 and group1. Each first level group row header/footer (Unit) was assigned the ID group0 while all second level group rows header/footer (Category) were assigned the ID group1. Once I figured this out, the function began working properly!

5 comments:

Anonymous said...

Have you found a way to maintain the expanded state after viewing an item's detail page? (Returning to the list page with the list remaining expanded) I have created a dataview of a list and this out of the box functionality no longer exist.

Chris said...

I haven't found a way at this point. It is a bit frustrating to have to expand the items over and over. I was just happy to find a working function that I didn't have to code.

Anonymous said...

Normally when the page opens, either all groups are expended or collapesd. When page opens, is it possible to make it, say group1 is expended and all other groups are collapsed?

Luke said...

Is it possible to get the Expand/Colapse to work on text as well as an image?

I can only get it to work when the image is involved and that causes me to have a space in the hyperlink that makes it look a bit "make-shift".

Cheers,
Luke

Chris said...

Luke,

I'm not sure, but have you investigated jQuery yet? It's very lightweight and can be added into SharePoint with very little difficulty. It actually makes this function fairly obsolete as you can use it to do just about anything with your list/web-part.

Paul Greneir has been creating a lot of posts dealing with jQuery on EndUserSharePoint.com. I've actually begun exploring jQuery and it gets past a lot of those annoying gotchas in SharePoint.