1

Using CSR to change row color - how do I keep the view style shaded view ?

It seems the CSR in a CEWP only works if I keep the view style on default.

How do I keep the code working but have the view style remain in shaded view?

My code is below:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function(ctx) {
            var CategoryColors = { 'Training': '#6699ff', };
            var rows = ctx.ListData.Row;
            for (var i = 0; i < rows.length; i++) {
                var Category = rows[i]["Category"];
                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId);
                row.style.backgroundColor = CategoryColors[Category];
            }
        }
    });
}); 

1 Answer 1

1

You need to specify the view style to target in your template override. I'm guessing you have code that looks something like:

var viewOverrides = {};
viewOverrides.Templates = {};
viewOverrides.Templates.Header = // something
viewOverrides.Templates.Item = //something
viewOverrides.Templates.Footer = // something

// here's what you need to add
viewOverrides.ViewStyle = 17;  // I believe 17 is the ID of Shaded, but you may need to check on that

Here is the most comprehensive source of information on CSR for list views that I have been able to find (much better than what you can find on MSDN):

Andrei Markeev - SharePoint 2013 Client Side Rendering: List Views

Edit:

Ok, based on your code, you would need to add the ViewStyle specification like this:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function(ctx) {
            var CategoryColors = { 'Training': '#6699ff', };
            var rows = ctx.ListData.Row;
            for (var i = 0; i < rows.length; i++) {
                var Category = rows[i]["Category"];
                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId);
                row.style.backgroundColor = CategoryColors[Category];
            }
        },
        ViewStyle: 17
    });
});

Again, just to be clear, I am guessing that the ID of the "Shaded" view style is 17 only based off the screen shot in the CodeProject article I linked to. I do not have any first-hand knowledge that that is the correct ID, so you might want to double check that.

9
  • Hello. My code is like this. May 6, 2015 at 15:17
  • SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ OnPostRender: function(ctx) { var CategoryColors = { 'Training': '#6699ff', }; var rows = ctx.ListData.Row; for (var i=0;i<rows.length;i++) { var Category = rows[i]["Category"]; var rowId = GenerateIIDForListItem(ctx, rows[i]); var row = document.getElementById(rowId); row.style.backgroundColor = CategoryColors[Category]; } } }); }); May 6, 2015 at 15:19
  • My code is like above - how to make it so that "shaded" stays the same except for the rows that equal the category training. Thank you. May 6, 2015 at 15:20
  • @MikeRooker, updated my answer. May 6, 2015 at 16:13
  • Thank you Dylan, however adding that just didn't make any rows change color at all as well as not making it shaded. May 6, 2015 at 16:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.