Skip to main content

Good day all,

I have been trying otto 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);

})();

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;
}

}

Good day all,

I have been trying ot 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;

}

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;
}
Source Link
kovac
  • 295
  • 2
  • 8

SharePoint CSR using JQuery

Good day all,

I have been trying ot 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;

}