If you add as SharePoint list view web part to a SharePoint page using SharePoint designer, you are given the ability to sort, group and filter the results of that web part for display. If you choose to group by a specific element, then you can decide to either expand or contract all groups by default. Handy.
However, if you want to expand just the first grouping, and have the rest of the groups collapsed, there is no default setting to allow that to occur. I have taken the original blog post posted here:
Original Blog Post
and have updated it for SharePoint 2013.
The original idea used here is sound, locate and click, using javascript and jquery, the plus sign located next to the first group. However, using the web part ID did not work in my case, so I had to dig a bit deeper.
Here is the code I used to call the function:
<script type="text/javascript">
$(document).ready(function() {
collapseGroups();
});
And here is the slightly modified function:
function collapseGroups() {
var closestElement = document.getElementById('group0');
var myimg = closestElement.getElementsByTagName('img')[0];
var mysrc = myimg.src;
$(myimg).parent().click();
}
</script>
The challenging part of getting this working is identifying the document element that is closest to the + sign. The original post used the name of the web part that hosts the list data, however, this did not work in my case. Instead, it clicked the first columns sort header in the web part, and resorted the list by that column on page load!
So the approach is fine, click the + sign once you find it, we just need to find an element deeper in the list view web part. Here is how I did it.
Navigate to your web part page and make note of the Group Header for your grouped column. So if you were grouping by "Course Year", then "Course Year" would be what you are looking for.
Open the page in source view, and search for your grouping column name. When I searched for "Course Year" I got back html that looked like this:
<tr id="group0">
<td colspan="100" nowrap class="ms-gb">
<a href="javascript:" onclick="javascript:ExpCollGroup('0-1_', 'img_0-1_',event, true);return false;">
<img src="/_layouts/15/images/plus.gif" border="0" alt="expand" id="img_0-1_"> Course Year</a>
You can see the plus image markup, plus javascript event associated with that markup that fires the button clicked event. Unfortunately, between page refreshes, the image id changes, so I couldn't use that.
However, the closest element with an ID was the table row (tr) that wrapped this line. This tr has an ID of "group0". I used this ID value in the collapse groups function, and it worked! And it appears to be a more stable name than the ever changing values of the + image.
2 comments:
This SharePoint 2013 example addresses a very specific but useful customization: expanding only the first group in a grouped List View Web Part while keeping the remaining groups collapsed. The explanation clearly identifies the limitation of the default grouping settings and shows how JavaScript and jQuery can be used to locate the first group's expand control and trigger it programmatically.
The adjustment for SharePoint 2013 is particularly useful because the original approach based on the web part ID did not work in the described scenario. Instead, the code locates group0, finds its first image element, and triggers the parent click event. Developers working with enterprise web interfaces can strengthen their scripting skills through Corporate Javascript Training while exploring similar customization techniques.
The example also demonstrates how inspecting the generated page structure can help when a straightforward selector or web part identifier is insufficient. Using $(document).ready() ensures the function runs after the page has loaded, making it suitable for this type of UI manipulation. A Corporate Javascript Course can provide a broader foundation for understanding DOM traversal, event handling, and jQuery-based customization.
Post a Comment