JSLink for showing the Sum of my list columns will break if one item contain empty value.. it will return "NaN"

Question

I am working on a sharepoint server 2016. and i want to show the sum of my list fields.. so i follow this appraoch:-

https://social.technet.microsoft.com/wiki/contents/articles/30317.sharepoint-2013-displaying-sum-for-calculated-column-in-a-list-view-using-jslink.aspx

which worked well. but if the column i want to show the Sum of have an item which contain empty value, i will get this result sum=NaN. so seems it can not do the sum for null values. now i try modifying the script as follow, to check if the column is null and assign it zero as follow:-

function CalculatedFieldViewTemplate(ctx) { 
if(ctx.CurrentItem.Yearof2016MLC != null){
_totalValue += parseFloat((ctx.CurrentItem.Yearof2016MLC).replace(',', ''));
return ctx.CurrentItem.Yearof2016MLC;
}
else
{
    return 0;
}


}

but this did not solve the issue. i also try checking the following typeof ctx.CurrentItem.Yearof2016MLC != "undefined" but same problem... now the Yearof2016MLC is of type number and which does not have any defualt value and it is optional... and again if there is not any empty value for the Tearof2016MLC every thing will work well. so how i can solve this?

Answer 1

That TechNet article is just stupid... using hardcoded Columnnumbers to inject content

And the Array.reduce method (since IE9) is a lot easier to calculate

I whipped this up real quick.. ofcourse with Cisar, so this is the complete MDS safe CSR file:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  function sumColumn(columnName){
    var rows=ctx.ListData.Row; // global ctx!!
    var sum=rows.reduce(function(sums,item){  // loop over all Array items
        var value=item[columnName];
        return sums + (value ? Number(value) : 0); // calculate sums, does not take care of strings!
    },0); // sums starts at 0
    var id="Sum"+columnName; // unique id so multiple columns can be summed
    var sumDIV=document.getElementById(id);
    if(!sumDIV){ // if no Sum div exist
      sumDIV=document.createElement('DIV');
      sumDIV.id=id;
      // find column
      var header=document.querySelector("[id*='thead-WPQ1'] div[name='"+columnName+"']");
      header.appendChild(sumDIV);
    }
    sumDIV.innerHTML=String.format("<B>Sum: {0}</B>",sum);
  }

  function init() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      Templates: {},
      OnPostRender: function(ctx) { 
        sumColumn('MonthSpan');   // USE INTERNAL FIELD NAME!
      },
    });
  }
  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/sumcalculated.js"), init);
  init();
});

---

See last Column, just to proof it works, I picked a Custom List I had open so no fancy sum:

Paging

This only gets you the Sum in the View

If you need the sum of all Items you

• Need code behind/workflow to calculated a Sum for every new Item added

OR

• Need to read all Items using JSOM or REST code, then use above code to proces the rows you get with data.d.results