jslink is raising the following error "TypeError: Unable to get property 'style' of undefined or null reference" after using the QuickEdit Grid

Question

I have added the following JSLINK to my site collection style library :-

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

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Closed' : '#FFF1AD',  
          'Resolved' : '#FFD800',
          'Active' : '#01DF3A' 
       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }
     }
   }); 

});

now the purpose for the JSLINK is to color my list items based on their status values. and i added the jslink to my list view's web part. and it is working well ONLY when i first access the "All items" view.

But if i do the following then the colors will not be shown:-

1. Do a column based filtering.
2. Sorting.
3. List based searching.

The problem will be sever, if i edit the list view using the "Quick edit grid" and when i click on stop i will get the following error :-

TypeError: Unable to get property 'style' of undefined or null referenceTypeError: Unable to get property 'style' of undefined or null reference  

TypeError: Unable to get property 'style' of undefined or null referenceTypeError: Unable to get property 'style' of undefined or null referenceSys.ArgumentNullException: Sys.ArgumentNullException: Value cannot be null. Parameter name: element 

now i think this is related to having the minimal download strategy site feature on.. but i am not sure how to get around this , without having to disable the feature ??

now i try registering the jslink to be used with the MDS , as follow:-

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


   function init() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      Templates: {},
      OnPostRender: function(ctx) { 
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Closed' : '#FFF1AD',  
          'Resolved' : '#FFD800',
          'Active' : '#01DF3A' 
       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }
     }
   }); 
      },
    });
  }
  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/colorcode2.js"), init);
  init();
});

but this did not solve the issue.. even on the second script will not have any colors rendered even when i first view my list view items..

EDIT now i removed the duplicate onpostrender, as here is my final code:-

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


   function init() {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      Templates: {},
      OnPostRender: function(ctx) { 



       var statusColors =  {
          'Closed' : '#FFF1AD',  
          'Resolved' : '#FFD800',
          'Active' : '#01DF3A' 
       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }


      },
    });
  }
  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/colorcode2.js"), init);
  init();
});

but i am still facing the same issues...

Answer 1

I was able to resolve this issue by changing logic as follows

if(row != null) {
     row.style.backgroundColor = statusColors[status];
}

EDIT Your final code would be as below

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
       function init() {
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
          Templates: {},
          OnPostRender: function(ctx) {
           var statusColors =  {
              'Closed' : '#FFF1AD',  
              'Resolved' : '#FFD800',
              'Active' : '#01DF3A' 
           };

           var rows = ctx.ListData.Row;
           for (var i=0;i<rows.length;i++)
           {
              var status = rows[i]["Status"];
              var rowId = GenerateIIDForListItem(ctx, rows[i]);
              var row = document.getElementById(rowId); 
              if(row != null) {
                 row.style.backgroundColor = statusColors[status];
              }
           }
          },
        });
      }
      RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/colorcode2.js"), init);
      init();
    });

EDIT

Executing CSR with delay to work on sorting and searching

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

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      Templates: {},
      OnPostRender: function(ctx) {
       var statusColors =  {
          'Closed' : '#FFF1AD',  
          'Resolved' : '#FFD800',
          'Active' : '#01DF3A' 
       };
        setTimeout(function() {
       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          if(row != null) {
            row.style.backgroundColor = statusColors["Active"];
          }
       }
       }, 100);

      },
    });
});

EDI

Use skipNextAnimation property to retain customizations after filter, search and sort.

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

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      Templates: {},
      OnPostRender: function(ctx) {


       var statusColors =  {
          'Closed' : '#FFF1AD',  
          'Resolved' : '#FFD800',
          'Active' : '#01DF3A' 
       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          if(row != null) {
            row.style.backgroundColor = statusColors["Active"];
          }
       }       
        ctx.skipNextAnimation = true;
      },
    });
});

Answer 2

I promised not to...

but here goes..

Are you using Cisar??

Because the above code looks like a partly code copy/paste action gone wrong.

You are declaring OnPostRender inside another OnPostRender

  Templates: {},
  OnPostRender: function(ctx) { 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
 OnPostRender: function(ctx) {

Use Cisar, it gives you all the correct boilerplate code, and then only update the given OnPostRender function

---

This works:

   var rows = ctx.ListData.Row;
   for (var i=0;i<rows.length;i++)
   {
      var status = rows[i]["Status"];
      var rowId = GenerateIIDForListItem(ctx, rows[i]);
      var row = document.getElementById(rowId); 
      row.style.backgroundColor = statusColors[status];
   }

but shorter and more readable is:

   ctx.ListData.Row.forEach(function(row){
      var rowId = GenerateIIDForListItem(ctx, row);
      var TR = document.getElementById(rowId); 
      TR.style.backgroundColor = statusColors[row.Status];
   }

---

Update

Here is the full, tested working CSR file:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {
    function init() {
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
            Templates: {},
            OnPostRender: function (ctx) {
                var statusColors = {
                    'Closed': '#FFF1AD',
                    'In Progress': '#FFD800',
                    'Active': '#01DF3A'
                };
                ctx.ListData.Row.forEach(function (row) {
                    var rowId = GenerateIIDForListItem(ctx, row);
                    var TR = document.getElementById(rowId);
                    TR.style.backgroundColor = statusColors[row.Status];
                };
            }
        });
    }

    RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/statuscolor.js"), init);
    init();

});

If this does not work, then check all JSLink scripts being loaded, its easy to make a mistake and load JS files twice because that WebPart field is just too small to read. (Cisar maintains it for you.. but if you messed with JSLink manuallt.. double check)