Friday, April 18, 2014

SharePoint 2013/2010 - Remove Columns Name from Group View

 To remove the column name from group view and retaining the collapse and expand option,copy and paste the below javascript in the page using content editor or script editor.

JavaScript (SharePoint 2013/SharePoint 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>

Thanks to Source Article: http://amitphule.blogspot.com/2011/10/hiding-group-headers-from-sharepoint.html  

Happy Browsing!
Relax..

22 comments:

  1. Script works great! I have been looking for hours for this solution!! Thanks a lot!

    ReplyDelete
  2. Thanks so much! This is the only script I have found that works in SP 2013. I can't tell you how much you saved my tukus!

    ReplyDelete
  3. Oh this is good, this is very, very good and works in SP 2013/ Office 365. Thank you very much!

    ReplyDelete
  4. Works just as I wanted it to. I have been searching and none of the options I saw work quite this well TANKS!!!

    ReplyDelete
  5. Thank you! I've tried for 2 days to get this to work and this is the first script that worked the way I wanted in SP 2013.

    One follow up question though... I put the code on the page inside a Script Editor WP. I have several sites/pages that I want to use this functionality. What's best practice here?

    ReplyDelete
    Replies
    1. You can use this code in standard JS file and include in Master page. This will apply every where.

      Delete
  6. Thanks for the post. I made a slight modification so the grouped by value is becomes the hyperlink to expand group. This way the user can click on the value.

    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(':', '');
    }

    ======== Replaced with this ========

    for (var i = 0; i < elements.length; i++) {
    elem = elements[i];
    var newNodeValue = elem.childNodes[1].nodeValue = elem.childNodes[1].nodeValue.replace(':', '');

    elem.childNodes[0].childNodes[1].nodeValue = newNodeValue;
    elem.childNodes[1].nodeValue = "";
    }

    ReplyDelete
    Replies
    1. This is BRILLIANT Isaac! I work for a Disability Organisation and this additional feature assists those with impaired motor skills access the groups. Have a big favour to ask - is the hyperlink feature able to be extended to add to a "child" group please? It works on the first "Group By" title and then only on the Column name a second grouping. THANK YOU again!

      Delete
    2. Sorry a year later, but this worked for me, a combination of Bistesh's code and mod from Issac for both 1st and 2nd group level.

      for (var i = 0; i < elements.length; i++) {
      elem = elements[i];
      var newNodeValue1 = elem.childNodes[1].nodeValue = elem.childNodes[1].nodeValue.replace(':', '');
      elem.childNodes[0].childNodes[1].nodeValue = newNodeValue1;
      elem.childNodes[1].nodeValue = "";
      }
      elements = getElementsByClassName(document, "td", "ms-gb2");

      for (var i = 0; i < elements.length; i++) {
      elem = elements[i];
      var newNodeValue2 = elem.childNodes[2].nodeValue = elem.childNodes[2].nodeValue.replace(':', '');
      elem.childNodes[1].childNodes[1].nodeValue = newNodeValue2;
      elem.childNodes[2].nodeValue = "";
      }

      Delete
  7. great post. Helped a lot! Thanks

    ReplyDelete
  8. Love it - awesome post - many thanks!

    ReplyDelete
  9. Thankz a lot...it works great....!!!!!!!!!!!!!!

    ReplyDelete
  10. Thanks for your post. But there seems to be a problem when the users are trying by clicking on the column name on top of the list. And also in 2016 the users have got an option to filter the list based on the column values (just like excel). this doesn't seem to work in that condition too. Could you please provide any updated script f you have nay.

    ReplyDelete
  11. Is there a way to tailor this to a specific list/library?
    Thank You, Trevor.

    ReplyDelete
  12. Is there a way to tailor this a specific list/library?
    Thanks, Trevor

    ReplyDelete
  13. This is exactly what I'm looking for and it works perfectly in the classic view of SharePoint, but when the view loads in the new "modern" UI the group labels appear. Any thoughts on how to accomplish this in the new SP UI?

    ReplyDelete
    Replies
    1. Can you tell me more on modern ui means? We can use any ui like angular js or css to make it work but it's a separate custom dev.

      Delete
    2. Sure, we use Office365, and SharePoint Online has started the gradual introduction of new (aka "modern") experiences across the SharePoint service. Your code works in lists using "classic" experience, but not in the new experience.

      I added your code and in "classic" SharePoint mode the column labels are gone and get a nice clean list. But if I switch to

      Delete
  14. What can be modified if you want to hide the expand/collapse button? Also can it be modified to hide the entire row if the groupby field is empty?

    ReplyDelete
  15. Bravo, great script! Many thanks for this.

    ReplyDelete