Expand empty subgroups and remove group header in grouped list view

I got this request from Kale:

Do you have an ideas on how to remove “empty/blank” items when using the “group by” feature? See the example below. In other words, for category ‘Test 1′ you have to expand the blank item just to see the documents since they don’t have any subcategories assigned to them.

Example:
* Category: Test 1
* Subcategory 1:
– Document 1
– Document 2
* Category: Test 2
* Subcategory: SharePoint
– Document 3
– Document 4
* Subcategory: CRM
– Document 5
– Document 6

This is how I want it to work:
* Category: Test 1
– Document 1
– Document 2
* Category: Test 2
* Subcategory: SharePoint
– Document 3
– Document 4
etc.

Thanks!
Kale

This script checks if the “groupBy” is empty, and if so, expands the content of the group and hides the group header.

Add this script in a CEWP below the list view – alter the location of jQuery to reflect your location:

<script type="text/javascript" src="../../Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	// Add onclick to the first grouping
	$(".ms-listviewtable td.ms-gb").click(function(){
		expandEmptyCategory();
	});	
	// Call function on load
	isTbodyLoaded();	
});

var isloadedCheck = 0;
// Looping function to call "expandEmptyCategory" when subgroups are loading - looping every 200ms for a maximum of 4 seconds
function isTbodyLoaded(){
	setTimeout(function(){
		tbodyIsLoadedLength = $(".ms-listviewtable tbody[isLoaded='true']").length;
		if(tbodyIsLoadedLength>0){
			expandEmptyCategory();
		}else{
			isloadedCheck += 1;
			if(isloadedCheck<=20){
				isTbodyLoaded();
			}
		}
	},200);
}

function expandEmptyCategory(){
var NameGrouping2 = $(".ms-listviewtable td.ms-gb2:first a:eq(1)").text();
	$(".ms-listviewtable td.ms-gb2").each(function(){	
		var grNameRaw = $(this).text().replace(NameGrouping2+' :','');
		grName = grNameRaw.substring(0,grNameRaw.indexOf('(')-1).replace(/s|xA0/g,'');
		if(grName.length==0){
		var parentTbody = $(this).parents('tbody:first');
			if(parentTbody.css('display')!='none'){
			var tIdRaw = parentTbody.attr('id');
			var tId = tIdRaw.substring(4);
			var tb = $("#tbod"+tId+"_");
				if(tb.attr('isLoaded')){
					if(tb.css('display')=='none'){
						$(this).find('a:first').click();
						$(this).parents('tbody:first').hide();
					}else{
						$(this).parents('tbody:first').hide();
					}
				}
			}		
		}	
	});
}
</script>

This solution is not fully tested so please post any bugs you might find.

SharePoint 2013

Here is a version that works with SP 2013. Due to the asynch loading of the view, this one uses a setInterval, and an initial delay to try to let the view finish loading before kicking in. Try it and see how it behaves, but keep in mind this is most likely not a 100% solution.

Place code in a HTML form web part, or linked using the content link option of a CEWP below the list view.

<script type="text/javascript" src="https://spjsblog.sharepoint.com/DFFS/SPJS/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	setTimeout(function(){
		$("td.ms-gb").each(function(){
			$(this).parents("tbody:first").on("click",function(){
				$(this).next().find(".spjs_expanded").removeClass("spjs_expanded");
			});
		});
		setInterval(function(){
			$("td.ms-gb2:visible:not(.spjs_expanded)").each(function(i,td){
				var a = $(td).find("a:first").parent().text().split(":")[1].split("(")[0], b, c, d;
				if($.trim(a) === ""){
					b = $(td).parents("tbody:first").attr("id");
					if(typeof b === "string"){
						b = b.substring(4);
						c = $("#tbod"+b+"_").attr("isloaded") === "true";
						d = $("#tbod"+b+"_").is(":visible");
						if(!c || !d){
							$(this).find("a:first").trigger("click");
						}
						$(this).addClass("spjs_expanded");
						$(this).parents("tbody:first").hide();
					}
				}
			});		
		},500);
	},1000);
});
</script>

Alexander

17 thoughts on “Expand empty subgroups and remove group header in grouped list view”

Hi Alex,

Thanks for useful post. I have the very same problem, but the above code doesn’t work for me at all.

Actually I couldn’t find any pages containing grouped list views or DVWP rendered by SharePoint to include “.ms-listviewtable” tags.

Would please explain more how to use this code?

Thank you in advance.

Alexander says:

April 3, 2010 at 15:24

Hi Amir,
The $(“.ms-listviewtable”) is used to locate the <TABLE> with class=”ms-listviewtable”.

The code is intended for a standard list view in a list or document library in SharePoint.

To use it with a DVWP you would have to modify the code. I have not tested it with a DVWP created in SharePoint designer myself.

Alexander

Log in to Reply
Amir says:

April 3, 2010 at 19:29

Thank you Alexander for your reply.

Although couldn’t find the “.ms-listviewtable” class even for a standard grouped view, but I got the idea and trying to adapt it for DVWP, if successful will send you the code to share with other fellows.

Log in to Reply

Hi, I have the same problem as well.

I have added the script to a CEWP below the document library’s list view on my page. However nothing has changed.

Any assistance you could offer would be appreciated!

Thanks
Emily

Alexander Bautz says:

March 7, 2011 at 21:52

Hi,
Do you get any error messages – like a yellow exclamation mark in the lower left corner in IE?

Alexander

Log in to Reply

Hi Alex,
Just wanted to let you know this solution worked for me with no issues.

I’m just wondering if you know if there is a way to (in addition to what your script is doing) also hide the label of the group (i.e. if I group by the column “Folder Name” I currently See “Folder Name: Folder1 (2)” Where I would like to see “Folder1 (2)”.

when you say alter the jquery to reflect your location what do you mean? location as in the URL of the List being used?

Alexander Bautz says:

May 17, 2011 at 07:46

Hi,
I mean the <script src=”…
Change it to the location of your local copy og jQuery, or use this link to Google’s script repository: https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js

Alexander

Log in to Reply
Gavin says:

May 17, 2011 at 18:04

thx for reply.

apologies for my ignorance but I am simply adding this to the source code of a Context Editor Web Part within the list and placing it below the list.

Even now with changed JQuery line nothing seems to happen? Is there anything else I need to do?

Log in to Reply
Alexander Bautz says:

May 17, 2011 at 19:09

Hi,
Are you using SP2007 or SP2010? – this solution has not been tested with 2010 yet.

Alexander

Log in to Reply
Gavin says:

May 18, 2011 at 23:01

SP2007. Also from looking at 1 of the other post replys I don’t have a yellow error on the page

Log in to Reply
Alexander Bautz says:

May 25, 2011 at 19:18

Hi,
If you emailed me a few screen shots i might see what’s wrong.
You find my email here

Alexander

Log in to Reply

Hi,

Thanks for giving this solution its working for me, but only one problm when first click on group its not working, second click onwards its working. can any body solve this plz giv me the solution.

mahi

Alexander Bautz says:

December 14, 2011 at 00:25

Hi,
Which browser (name and version) are you using?

Alexander

Log in to Reply

HI i am using ie8 its working fine me, but only problm when we exapnd the groups then refresh page its not loading same state, because the expand function is writing in click event thats the problem please can u giv me the solution instead of click event.
I tried but its working for me.

Thnaks and advance apprecieated,

mahi……….

Alexander Bautz says:

January 24, 2012 at 18:49

Hi,
Try commenting out (removing) lines 20, 21 and 22.

Alexander

Log in to Reply

Hi,
I know it has been a long time, but has anybody found a way to do this in Sharepoint 2010?
Petya

SharePoint JavaScripts

17 thoughts on “Expand empty subgroups and remove group header in grouped list view”

Leave a Reply Cancel reply

Like this:

17 thoughts on “Expand empty subgroups and remove group header in grouped list view”

Leave a Reply Cancel reply