jsLink Nested Group Count returns Undefined

Question

I have a jsLink working to display the groups and counts for a grouped list view, from here: js link group count list SharePoint 2013

But, my list has nested groups and the count for the children groups is displayed as "Undefined". I've searched for how to get the count for the nested groups but haven't been able to find anything.

Answer 1

Please give the following CSR a try:

(function () {
  var itemCtx = {};
  itemCtx.Templates = {};
  itemCtx.Templates.Group = GroupOverride;
  itemCtx.Templates.OnPreRender = OPreR;
  itemCtx.Templates.OnPostRender = OPostR;
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();

function OPreR(ctx){
    if(typeof ctx["CounterPreRenderExecuted"] == "undefined"){
        var style = "<style>#counter" + ctx["wpq"] + " td, #counter" + ctx["wpq"] + " th{border: 1px solid #ccc} #counter" + ctx["wpq"] + " {border-collapse: collapse !important}</style>"
        document.getElementById("WebPart" + ctx.wpq).insertAdjacentHTML("afterBegin", style + "<table id='counter" + ctx["wpq"] + "'><tr><th id='CounterGroup1Title" + ctx["wpq"] + "'></th><th id='CounterGroup2Title" + ctx["wpq"] + "'></th><th>Count</th>")
        ctx["CounterPreRenderExecuted"] = true
    }
}
function OPostR(ctx){
    if(typeof ctx["CounterPostRenderExecuted"] == "undefined"){
        document.getElementById("CounterGroup1Title" + ctx["wpq"]).innerHTML = ctx["CounterGroup1Title"]
        document.getElementById("CounterGroup2Title" + ctx["wpq"]).innerHTML = ctx["CounterGroup2Title"]
        ctx["CounterPostRenderExecuted"] = true
    }
}
function GroupOverride(ctx, group, groupId, listItem, listSchema, level, expand) {
    if(level == 1){
        ctx["CounterGroup1Title"] = group
        ctx["currentLvl1GroupValue"] = listItem[group]
    } else {
        ctx["CounterGroup2Title"] = group    
        document.getElementById("counter" + ctx["wpq"]).insertAdjacentHTML("beforeEnd", "<tr><td>" + ctx["currentLvl1GroupValue"] + "</td><td>" + listItem[group] + "</td><td><b>" + listItem[group + '.COUNT.group2'] + "</b></td>")
    }
    return RenderGroupTemplate(ctx, group, groupId, listItem, listSchema, level, expand)
}

It will render a table above the list as you can see in this screenshot: