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

Question

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];
            }
        }
    });
}); 

Answer 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.