Monday, October 31, 2011

Hiding Group Headers from SharePoint List View



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!

29 comments:

  1. Thanks Amit...for this code is not working for Sharepoint 2010, please suggest.

    ReplyDelete
  2. Hi Satish,

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

    ReplyDelete
    Replies
    1. This is great thank you.
      One question. This does not work at all in Chrome but it does in IE and Firefox. Any ideas why?

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

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Thanks brother the updated code works perfectly on SP 2010. Thanks a lot man

      Delete
  4. Hi Amit,
    Thank You very much. Your code has indeed worked like magic and has saved a lot of my time.
    Thanks once again

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Thanks 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.

    Thanks

    ReplyDelete
  7. Hi Susan,
    Above 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.

    ReplyDelete
  8. This 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?

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Thanks Amit.. it worked for me as well... it is working in SP 2010 and in SP 2013 Sharepoint online as well.

    ReplyDelete
  11. Hi,
    Thanks 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

    ReplyDelete
  12. Hi,
    When grouping a slide library the script does not work. how would I modify the script for a slide library?
    Thank you!

    ReplyDelete
  13. 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.

    ReplyDelete
  14. This works great in SharePoint 2013. Thanks!

    ReplyDelete
  15. Thanks - worked great in SP2013.

    ReplyDelete
    Replies
    1. Sorry, just want to ask where could I past Amit's code to?
      I am new in SharePoint.
      Thanks

      Delete
    2. Use Html form webpart or Script webpart to embed javascript code on the list view page.

      Delete
  16. Thank you so much!:) I used it in a script editor for sharepoint 2013 custom list and it works.

    ReplyDelete
  17. Thank 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!

    ReplyDelete
    Replies
    1. Hi Rene - did you manage to fix this?

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

      Delete
  18. This is just perfect, I have been looking all over for this. Thank you

    ReplyDelete
  19. I 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.

    Kindly help. Thanks.

    ReplyDelete
  20. 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?

    I don't know javascript or jquery enough to do this, if you could show me what to modify or add, that would be fantastic.

    ReplyDelete
  21. Thank you for this script - works great in SP Online!!

    ReplyDelete