2

I am having the following problem. I wrote a custom JavaScript to color list view rows using the OnPostRender event. It works fine and all until the following steps are executed:

  1. Open the list view (all colored everything is fine)
  2. Click on the quick edit (still all colored and looking fine)
  3. Click on "Stop editing" and i get an error:

TypeError: Cannot set property 'innerHTML' of null

TypeError: Cannot set property 'innerHTML' of nullTypeError: Cannot read property '_events' of null

This error is not caused by my code because my code event for OnPostRender is fired after this message is displayed on the page.

(function () { var getListColoringProperties = function (listTitle, callback) { SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { var clientContext = SP.ClientContext.get_current(); var list = clientContext.get_web().get_lists().getByTitle(listTitle); var rootFolder = list.get_rootFolder(); var properties = rootFolder.get_properties(); clientContext.load(rootFolder); clientContext.load(properties); clientContext.executeQueryAsync(function () { var values = properties.get_fieldValues(); var keysOfInterest = Object.keys(values).filter(function (key) { return key.indexOf("ColorManager/") == 0 && key != "ColorManager/fieldForCompare"; }).map(function (key) { return key.substring("ColorManager/".length); }); var fieldForCompare = values["ColorManager/fieldForCompare"]; callback(fieldForCompare, values, keysOfInterest); }) }); }; var afterRendering = function (dataContext) { getListColoringProperties(dataContext.ListTitle, function (fieldForCompare, values, keysOfInterest) { var rows = dataContext.ListData.Row; for (var i = 0; i < rows.length; i++) { //logic to select row colors var currentRow = rows[i]; var indexOfKey = keysOfInterest.indexOf(currentRow[fieldForCompare]); var isColored = indexOfKey >= 0; if (isColored) { var color = values["ColorManager/" + keysOfInterest[indexOfKey]]; highlightRow(dataContext, currentRow, color); } } }); }; SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () { SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ Templates: { Footer: "<a href='#' onclick='unreleatedFunction()'>Modify coloring for this list</a>" }, OnPostRender: afterRendering }) }); function highlightRow(dataContext, row, color) { var tableRow = getTableRow(dataContext, row); if (tableRow) { tableRow.style.backgroundColor = color; if (hasLowIntensity(color)) { setForegroundColor(dataContext, row, "rgb(200, 200, 200)"); } else { setForegroundColor(dataContext, row, "rgb(35, 35, 35)"); } } }; function getTableRow(dataContext, row) { var rowElementId = row.iid || GenerateIIDForListItem(dataContext, row); // if (!ctx.inGridMode) { // return document.getElementById(rowElementId); // } return document.querySelector('[iid="' + rowElementId + '"]'); }; function hasLowIntensity(color) { var matches = color.match(/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/); var R = hexToDec(matches[1]); var G = hexToDec(matches[2]); var B = hexToDec(matches[3]); var includedArguments = 0; if (R > 0) { includedArguments++; } if (G > 0) { includedArguments++; } if (B > 0) { includedArguments++; } if (includedArguments == 0) { return false; } var intensity = (R + G + B) / includedArguments; if (intensity < 128) { return true; } else { return false; } }; function setForegroundColor(dataContext, row, color) { // tableRow.style.setProperty("color", "white", "important"); var sheet = window.document.styleSheets[0]; var ruleNumber = sheet.cssRules.length; var rowElementId = GenerateIIDForListItem(dataContext, row); var selector = ""; // selector = '[id="' + rowElementId + '"]'; // sheet.insertRule(selector + ", " + selector + " > td, " + selector + " a, " + selector + " span, " + selector + " div { color: " + color + " !important; }", ruleNumber); selector = '[iid="' + rowElementId + '"]'; sheet.insertRule(selector + ", " + selector + " > td, " + selector + " a, " + selector + " span, " + selector + " div { color: " + color + " !important; }", ruleNumber); }; function hexToDec(hex) { var result = 0, digitValue; hex = hex.toLowerCase(); for (var i = 0; i < hex.length; i++) { digitValue = '0123456789abcdefgh'.indexOf(hex[i]); result = result * 16 + digitValue; } return result; }; })();

Any idea why this is caused. I found a topic that described the error exactly but didn't solve this behavior for me. Null Reference Type Error using Javascript in Sharepoint 2013

Improve this question
1
  • I also want to add that it appears that the footer template is causing this error but I am not yet sure why or how. Commented Oct 18, 2017 at 10:32

1 Answer 1

Reset to default
2

After a little debugging I found the answer myself. It was caused because the template overrides the normal footer and after changing from "edit" to "display" mode the SharePoint code was searching for an element inside the default footer.

Changed the code and it now looks like this:

var footerTemplate = function (dataContext) { var defaultFooter = RenderFooterTemplate(dataContext); if (!dataContext || dataContext.inGridMode) { return defaultFooter; } if(dataContext.ListTitle) { return defaultFooter + "<a href='#' onclick='unrelevantFunction()'>Modify coloring for this list</a>" } return defaultFooter; }
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.