0

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

2 Answers 2

2

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;
      },
    });
});
8
  • now your update code allow the JSLINK to work after using the Quick Edit Grid so i am not longer receiving the error "style' of undefined or null referenceTypeError: Unable to get property " and the items will be colored which is good.. but still if i do a column based filtering or list based search i will not get the items colored... do u have any idea what could be causing this ?
    – John John
    May 23, 2017 at 23:38
  • now i even disable the Minimal Download Strategy site feature.. but this did not solve the issue..
    – John John
    May 23, 2017 at 23:44
  • 1
    The issue is not with MDS. After filter and remove filter the style property is not applying for filtered rows which we have to think about that. May 23, 2017 at 23:51
  • 1
    I did the debugging to see how it works when applying filter. It hits but not working as expected. May 24, 2017 at 1:43
  • 1
    If I execute my function with the delay it is working on sorting searching and filtering also. see my edited answer. May 24, 2017 at 1:50
1

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)

5
  • can you check my edit i removed the duplicate OnPostRender but i am still facing the same issue...
    – John John
    May 23, 2017 at 22:57
  • If the above file (tested and tried) does not work; you are doing something else wrong. May 24, 2017 at 8:32
  • i tried your updated script,, but it did not work even when i first load the list view.. as no colors will be applied to the list items... i am not sure what i can be doing wrong.. i just have a list view without any modifications or customization.. so not sure how it worked at ur end but not at my end?.
    – John John
    May 24, 2017 at 12:55
  • My end is a vanilla Office365 environment.. so you have to retrace all your steps and check where you did something different. May 24, 2017 at 14:42
  • i am not doing any thing special inside my list view and i am using the built-in master page.. seems the issue is related to on-premise..
    – John John
    May 25, 2017 at 22:55

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.