We can hide the Group name in out of the box list view using JavaScript.
Grouped List View before adding JavaScript:
JavaScript (MOSS 2007/WSS 3.0):
<script type="text/javascript" language="javascript">
_spBodyOnLoadFunctionNames.push("HideHeaders");
function HideHeaders() {
var elements = getElementsByClassName(document, "td", "ms-gb");
var elem;
for (var i = 0; i < elements.length; i++) {
elem = elements[i];
elem.childNodes[3].style.display = "none";
elem.childNodes[4].nodeValue = elem.childNodes[4].nodeValue.replace(':', '');
}
elements = getElementsByClassName(document, "td", "ms-gb2");
for (var i = 0; i < elements.length; i++) {
elem = elements[i];
elem.childNodes[3].style.display = "none";
elem.childNodes[4].nodeValue = elem.childNodes[4].nodeValue.replace(':', '');
}
}
function getElementsByClassName(oElm, strTagName, strClassName) {
var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for (var i = 0; i < arrElements.length; i++) {
oElement = arrElements[i];
if (oRegExp.test(oElement.className)) {
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
</script>
JavaScript (SharePoint 2010/SharePoint Foundation 2010):
<script type="text/javascript" language="javascript">
_spBodyOnLoadFunctionNames.push("HideHeaders");
function HideHeaders() {
var elements = getElementsByClassName(document, "td", "ms-gb");
var elem;
for (var i = 0; i < elements.length; i++) {
elem = elements[i];
elem.childNodes[0].childNodes[1].nodeValue = "";
elem.childNodes[1].nodeValue = elem.childNodes[1].nodeValue.replace(':', '');
}
elements = getElementsByClassName(document, "td", "ms-gb2");
for (var i = 0; i < elements.length; i++) {
elem = elements[i];
elem.childNodes[1].childNodes[1].nodeValue = ""; elem.childNodes[2].nodeValue = elem.childNodes[2].nodeValue.replace(':', '');
}
}
function getElementsByClassName(oElm, strTagName, strClassName) {
var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for (var i = 0; i < arrElements.length; i++) {
oElement = arrElements[i];
if (oRegExp.test(oElement.className)) {
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
</script>
Grouped List View after adding JavaScript:
Enjoy!
Thanks Amit...for this code is not working for Sharepoint 2010, please suggest.
ReplyDeleteHi Satish,
ReplyDeleteAs SharePoint 2010 list view (Internal content mapping) is different from MOSS 2007 list view, I have updated the post for SharePoint 2010 list view. You can try new SharePoint 2010 JavaScript.
Thanks.
This is great thank you.
DeleteOne question. This does not work at all in Chrome but it does in IE and Firefox. Any ideas why?
Well...I closed Chrome and opened it again and now it works. Go figure. I was going to try to debug it but I guess I don't have to.
DeleteThis comment has been removed by the author.
ReplyDeleteThanks brother the updated code works perfectly on SP 2010. Thanks a lot man
DeleteHi Amit,
ReplyDeleteThank You very much. Your code has indeed worked like magic and has saved a lot of my time.
Thanks once again
This comment has been removed by the author.
ReplyDeleteThanks for posting this code. It really does the trick. I want to use it on a webpart page that displays multiple lists that display grouped items. Is there a way to modify this code to target specific lists on the page? I'm using SharePoint 2010.
ReplyDeleteThanks
Hi Susan,
ReplyDeleteAbove code is written for all tags with class name 'ms-gb'. But you can apply this script for targeted list view webpart by selecting webpart html and apply above code to selected html. Use Jquery to achieve this.
This is excellent! thank you!!!
ReplyDeleteThis was the only script I found that worked! I don't know javascript very well. How would I apply this same script to hide the item count now that the column name is gone?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks Amit.. it worked for me as well... it is working in SP 2010 and in SP 2013 Sharepoint online as well.
ReplyDeleteHi,
ReplyDeleteThanks for this, it has saved me a headache; however do you know a way to then hyperlink on group name? I don't like that the only way to expand/collapse is by the tiny +/- button.
Thanks again
Hi,
ReplyDeleteWhen grouping a slide library the script does not work. how would I modify the script for a slide library?
Thank you!
Technically, it works, but the entire Edit menu is gone after applying your code. If I click 'edit Page', I can no longer do so.
ReplyDeleteThis works great in SharePoint 2013. Thanks!
ReplyDeleteThanks - worked great in SP2013.
ReplyDeleteSorry, just want to ask where could I past Amit's code to?
DeleteI am new in SharePoint.
Thanks
Use Html form webpart or Script webpart to embed javascript code on the list view page.
DeleteThank you so much!:) I used it in a script editor for sharepoint 2013 custom list and it works.
ReplyDeleteThank you, I also used it in SP2013 and works great, but I have a large "group by" list and it the code is not applied to subsequent pages. For example: I have a list that displays 105 grouped by items and have set it to display 99 items, but when I navigate to the next page items 100 - 105, the group by header still displays. Only works on the first page. Any ideas as to how to fix that issue without having to increase the group by display limit? Thanks!
ReplyDeleteHi Rene - did you manage to fix this?
DeleteHas anybody tried adding the code a second time in a script editor behind the "paging" arrow button? So when you click the Arrow to browse to the next say 50 items if your limit is 50 as well as performing the paging it also kicks of the script again?
DeleteThis is just perfect, I have been looking all over for this. Thank you
ReplyDeleteI can confirm that the script works fine in SP2013, however, I have a search box at the top of the list. When a search string is entered, the column headers reappear. The code is executed only on page load and we would also require the code to be re-executed after, for example, as Rene Ortiz mentioned, on page change, or after a search has been effected.
ReplyDeleteKindly help. Thanks.
This is very nice in 2013. Is it possible to modify it to hide the 'expand/collapse' button and suppress the entire row if the groupby field is empty?
ReplyDeleteI don't know javascript or jquery enough to do this, if you could show me what to modify or add, that would be fantastic.
Thank you for this script - works great in SP Online!!
ReplyDeleteThank you very much, it worked in Office 365 also.
ReplyDeleteWow.... Worked perfectly for me on a SharePoint Online Classic site. Saved a lot of effort. Thanks a lot....
ReplyDeleteThis works well, in SP online. Any tips though to push this on partial postback? Headers reappear when filtering online lists, which is not good, thanks!
ReplyDelete