none
Apply styles to all group by items in a document library RRS feed

  • Question

  • Dear all,

    I have used below code to apply style based on the document name.My list is having group by.The style is not applying to last group by items.Iam attching screenshot.Please help.Thanks in advance.

    <script type="text/javascript" src="</script">https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() 
    {
    ExpGroupRenderData();

    });

    function ExpGroupRenderData()
        {
       $(".ms-listviewtable  > tbody > tr a:contains('Meeting')").parent().parent().parent().css("background-color", "yellow");
      $(".ms-listviewtable  > tbody > tr a:contains('Decision')").parent().parent().parent().css("background-color", "lightblue");

        }

    </script>

    Regards,

    Tuesday, July 17, 2018 11:54 AM

Answers

  • Hi,

    We can use Client Side Rendering (CSR) to render list view and color the rows.

    Try the following script to paint yellow all rows from a document library that have name with "Meeting" and paint lightblue all rows from the document library that have name with " Decision".

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    
      OnPostRender: function(ctx) {
    
        var rows = ctx.ListData.Row;
    
        for (var i=0;i<rows.length;i++)
    
        {
    
          var fname = rows[i]["FileLeafRef"];
    
          var isMeeting = fname.indexOf("Meeting");
    
                      var isDecision = fname.indexOf("Decision");
    
                      var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
    
                      var tr = document.getElementById(rowElementId);
    
          if (isMeeting > -1)
    
          {
    
                                    // the file name contains "Meeting"
    
            tr.style.backgroundColor = "yellow";
    
          }
    
                      if (isDecision > -1)
    
          {
    
                                    // the file name contains "Decision"
    
            tr.style.backgroundColor = "lightblue";
    
          }
    
        }
    
      }
    
    });


    Note: Set “show groupings” to “Expanded” for the view settings. Otherwise, the script won’t work form grouping view.


    Information about Client Side Rendering:

    https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

    Best regards,

    Linda Zhang


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Marked as answer by Praveenrangu Wednesday, July 18, 2018 6:11 AM
    Wednesday, July 18, 2018 6:09 AM
    Moderator