0

I'm trying to hide a column in List View Web Part using JS Link with Client Side Rendering. I'm able to color or make formatting changes to the column, but not able to hide it. Below is the code snippet that I have tried but it just does not displays the value rather than hiding the whole column. Here I am trying to hide column field2

var is_display;
    (function() {
        function registerMyListTemplate(){
            var  is_display = '';
            var fieldContext = {};
            fieldContext.Templates = {};
            fieldContext.Templates.Fields = {
                "field1":{
                    "View": changeView
                },
                "field2":{
                    "View": hideField
                }
            };
            fieldContext.Templates.Item = renderListItemTemplate;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
        } 
        ExecuteOrDelayUntilScriptLoaded(registerMyListTemplate, 'clienttemplates.js');
    
    })();

    function hideField(ctx){
        var op = '';
        if (is_display !== ""){
            op = "";
        }else{
            op = '<div>' + ctx.CurrentItem.field2 + '</div>';
        }
        return op;
    }

I also checked out a code which helps to hide the column in the PostRender function but it doesn't work if the List View Web Part has paging. It only works for the first page of the List View Web Part.

function postRenderHandler(){
    ["field2"].forEach(function(name) {
        var header = document.querySelectorAll("[displayname=" + name + "]")[0].parentNode;
        var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
        header.style.display = "none";
        for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
            cells[i].style.display = "none";
        }
    });
}

2 Answers 2

1

My test code:

<script>
(function () {
    
    function RemoveFields(ctx) {
        var fieldName = "Title"; // here Date is field or column name to be hide
        var header = document.querySelectorAll("[displayname=" + fieldName + "]")[0].parentNode;
        var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
        header.style.display = "none";
        for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length-1; i++) {
            cells[i].style.display = "none";
        }
    }

    function registerRenderer() {
        var ctxForm = {};
        ctxForm.Templates = {};
        ctxForm.OnPostRender = RemoveFields;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxForm);
    }
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();</script>

Test result:

enter image description here

Updated:

enter image description here

6
  • I checked out above code already, but it doesn't work when paging is present. For example, it works on page 1 of paging but not on other pages.
    – BBRK
    Jun 29, 2020 at 8:40
  • It works well in my environment,check the update.
    – Amos
    Jun 29, 2020 at 9:06
  • Let me check it again and get back. Is it necessary to place the function 'RemoveField' in the onLoad ?
    – BBRK
    Jun 29, 2020 at 10:47
  • How can I make it work for mutiple list view webparts?
    – BBRK
    Jun 30, 2020 at 5:02
  • For modern experience,you could add a SPFX Extension.For classic experience,you could use pnp powershell add jslink.You could know more about this here:sharepoint.stackexchange.com/questions/281581/…
    – Amos
    Jun 30, 2020 at 6:04
0

Based on the @Asmos_MSFT answer, I was able to solve my issue. To hide a specific column in List View Web Part using Client Side Rendering with JSLink, use the below code.

var is_display;
    (function() {

      function postRenderHandler(ctx) {
        var fieldName = "field2"; // here Date is field or column name to be hide
        var header = document.querySelectorAll("[displayname='" + fieldName + "']")[0].parentNode;
        var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
        header.style.display = "none";
        for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length-1; i++) {
            cells[i].style.display = "none";
        }
      }

        function registerMyListTemplate(){
            var  is_display = '';
            var fieldContext = {};
            fieldContext.Templates = {};
            fieldContext.Templates.Fields = {};
            fieldContext.Templates.Item = renderListItemTemplate;
            fieldContext.OnPostRender = postRenderHandler;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
        } 
        ExecuteOrDelayUntilScriptLoaded(registerMyListTemplate, 'clienttemplates.js');
    
    })();

Make sure that the function that you want to run to hide on OnPostRender is inside OnLoad function. If it is written outside the OnLoad then it might not work.

To hide same column on all available List View webparts on the page then change your OnPostRender function as below

var web_part_count = 0 // declare as global variable.

    function postRenderHandler(ctx) {
                var fieldName = "field2"; // mention the column name that needs to be hidden.
                var header = document.querySelectorAll("[displayname='" + fieldName + "']")[web_part_count].parentNode;
                web_part_count = web_part_count + 1;
                var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
                header.style.display = "none";
                for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length-1; i++) {
                    cells[i].style.display = "none";
                }
              }

Before Implementing above code, make sure that the column position that needs to be hidden should be same across all the List View Web Parts present. The web_part_count variable gets incremented on the OnPostRender of each webpart hence it hides the column in each available web part on the same page.

To Implement it for multiple columns, you need to make changes to the OnPostRender function as follows

var global_arr = ['field2','field3'] // global variable

function postRenderHandler(){
    global_arr.forEach(function(name) {
        var header = document.querySelectorAll("[displayname='" + name + "']")[0].parentNode;
        var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
        header.style.display = "none";
        for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
            cells[i].style.display = "none";
        }
    });
}

In the above function, It will loop through each of the column mentioned in the global_arr variable. Make sure that column name you mentioned in the array are available on the List View Web Part.

Hope this helps someone.

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.