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:-
- Do a column based filtering.
- Sorting.
- 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...