none
JSLink - Color Code (Background) Entire Cell RRS feed

  • Question

  • Hi,

    I'm trying to highlight (background color) the entire cell within my list.

    I can highlight an entire row fine, and highlight the background color of the text, but I can't seem to find a way to set the background color of the entire TD (Cell) where the text exists.

    If I use the following code (simplified snippet of the entire code) within my View template for a particular field, it just highlights the background color of the div, as shown below:

    travelAuthorisationContext.Templates.Fields = {
        "RiskAssessment": {
            "View": riskAssessmentTemplate
        }
    };
    
    function riskAssessmentTemplate(ctx) {
        return "<div style='text-align:center;background-color:#dff0d8;'><img src='/_Layouts/15/Images/componentactive.png' width='16px' border='none'/></div>";
    }


    But what I want is the entire cell's background color coded as shown below:

    Any way I can do this using JSLink?

    Thanks,

    Grant.


    Tuesday, June 27, 2017 2:20 AM

Answers

  • Hi grant,

    To set the background color of the entire TD (Cell) where the text exists, using the following code:

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      OnPostRender: function(ctx) {
        var rows = ctx.ListData.Row;
        for (var i=0;i<rows.length;i++)
        {
     
            var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
            var tr = document.getElementById(rowElementId);
            var td=tr.cells[9];
            td.style.backgroundColor = "#dff0d8";
         
        }
      }
    });

    Note: you need to know the RiskAssessment is in which order in your list.    

    Change "var td=tr.cells[9];" to meet you requirement.

    Reference:

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

    Best Regards,

    Lisa Chen


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

    • Marked as answer by grant.jenkins Wednesday, June 28, 2017 12:35 AM
    Tuesday, June 27, 2017 11:06 AM
    Moderator

All replies

  • Hi grant,

    To set the background color of the entire TD (Cell) where the text exists, using the following code:

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      OnPostRender: function(ctx) {
        var rows = ctx.ListData.Row;
        for (var i=0;i<rows.length;i++)
        {
     
            var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
            var tr = document.getElementById(rowElementId);
            var td=tr.cells[9];
            td.style.backgroundColor = "#dff0d8";
         
        }
      }
    });

    Note: you need to know the RiskAssessment is in which order in your list.    

    Change "var td=tr.cells[9];" to meet you requirement.

    Reference:

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

    Best Regards,

    Lisa Chen


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

    • Marked as answer by grant.jenkins Wednesday, June 28, 2017 12:35 AM
    Tuesday, June 27, 2017 11:06 AM
    Moderator
  • Hi Lisa,

    Thanks for the code - much appreciated. Had to modify it slightly as have some conditions set as to what cells should have their background set, but all good and works well.

    In the meantime I had worked on my problem and came up with another solution. I modified my existing code to get it working using some jQuery within the OnPostRender. So within my Field template code I set a class on each item (depending on a condition), then within the OnPostRender added the following code to apply the background color to the TD element:

    $('.riskOverdue').parent().css('background-color', '#f2dede');
    $('.riskRequired').parent().css('background-color', '#fcf8e3');

    Not entirely sure if my solution is a hack, adding jQuery into the mix, but works for me :)

    Again, thanks for your reply - as always you're a great help to me and the wider community :D

    Cheers,

    Grant.

    Wednesday, June 28, 2017 12:35 AM