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 Comments on “Expand empty subgroups and remove group header in grouped list view”

  1. 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.

    1. 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

    2. 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.

  2. 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

  3. 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)”.

    2. 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?

  5. 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

  6. 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……….

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.