SharePoint 2007: Hide Empty group headers from List View


You can consider this as part 2 of jQuery How To: Hide rows in SharePoint 2007 List View Grouped web part.  Once you hide rows from a grouped web part,  you may came across a situation where you have a group header showing up without having data beneath it.  This is very confusing for your users since the nice little expand icon will still be showing up along with group header adding to the confusion.

I have been thinking of posting this since long long time but kept on forgetting,  I had been searching for code to hide empty group headers from a list view web part whenever the group does not contains any records in it.  

Here is my code for doing this,  I would like to mention my friend who has always been with me in all the jQuery adventures…one and only Mr. Ankur Chourasia. Thanks Ankur,  you have always been awesome…

So here is my code,  sorry for keeping this post dirty…

/*
Author: Sudhir Kesharwani, Ankur Chourasia
Purpose: This function is used to hide all the empty group headers from the SharePoint 2007 list view web parts
*/
function hideEmptyGroupHeaders()
{
//Variable to count empty groups headers in SharePoint page
var count =0;

//Below selector will loop through all the gropu headers in the SharePoint page. This looks out for all the tbody with id*=’tbod’ on the content area.
$(“.ms-bodyareaframe”).find(“tbody[id*=’tbod’]”).each(function(){
$(this).children().each(function(){
if($(this).css(“display”) == “block”)
{
//Increase the counter
count ++;
}
});

//Scan the number associated with tbody element to generate id of body.
var tempId = $(this).attr(“id”);
tempId = tempId.substring(4, (tempId.length-1));
tempId = “titl” + tempId;

//Hide empty group header if there are no items beneath it
if(count == 0)
{
$(“#”+tempId).css(“display”, “none”);
}
else
{
$(“#”+tempId).css(“display”, “block”);
}

//Reset the counter
count = 0;
});

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s