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.

Alexander