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

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    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

  • Question
    Sign in to vote
    2
    Sign in to vote

    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

All replies

  • Question
    Sign in to vote
    2
    Sign in to vote

    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
  • Question
    Sign in to vote
    0
    Sign in to vote

    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