Remove Group Headers from SharePoint List View Webpart

We can hide the Group name in out of the box list view using the below Java Script.

Java Script (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>
Java Script (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>
Advertisements

About Joseph Velliah
As a SharePoint Developer my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

3 Responses to Remove Group Headers from SharePoint List View Webpart

  1. John Roe says:

    Joseph,
    Great code and it works great with one grouped list on a page but throws error when there is multiple grouped list, any idea how to overcome this?
    Thanks

    • John,

      By default SharePoint supports only 2 level group by. The style defined for the first level is in “ms-gb” and the second level in “ms-gb2”.

      If you customize your group by function with more than 2 use the below code in HideHeaders() function and replace “ms-gb2” with your style class

      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(‘:’, ”);
      }

      This should work

Leave a Reply

Please log in using one of these methods to post your comment:

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

%d bloggers like this: