SharePoint CSR using JQuery

Question

Good day all,

I have been trying to wrap my head around SharePoint CSR. I have been fairly successful with using javascript to modify the list view. However, I have been trying to use the following code to hide a column which just doesn't work. The rest of the rendering logic works fine but the JQuery part of the code doesn't seem to work. Please help!

(function () {
//Create override object.
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.OnPostRender = [
    highlightDeliveredItem
];

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function highlightDeliveredItem (inCtx) {
    //Rendering logic.
    for (var i = 0; i < inCtx.ListData.Row.length; i++) {
        var listItem = inCtx.ListData.Row[i];
        var iid = GenerateIIDForListItem(inCtx, listItem);
        var row = document.getElementById(iid);

        if (listItem.Status_x0020_Complete == 'No') {
            if (row != null) {
                row.style.backgroundColor = "rgb(50, 205, 50)";
            }
        }else {
            if (i%2 != 0) {
                row.style.backgroundColor = "rgb(220,220,220)";
            }
        }
    }
        var cell = $("div [name='Status_x0200_Complete']").closest('th'); 
        var cellIndex = cell[0].cellIndex + 1; 

        $('td:nth-child(' + cellIndex + ')').hide(); 
        $('th:nth-child(' + cellIndex + ')').hide(); 
    inCtx.skipNextAnimation = true;
}

Answer 1

Make sure the jQuery library is loaded as it is not automatically available on native MasterPages.

Also, you might want to execute your code within a $(document).ready event to make sure the objects you are selecting are available.