Answered by:
JSLink - Color Code (Background) Entire Cell

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.
- Edited by grant.jenkins Tuesday, June 27, 2017 2:24 AM
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
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 -
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