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

  • 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. – hristo stamenov Oct 18 '17 at 10:32
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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.