How do I hide list columns in a view

Question

I have 3 list webparts on my home page. I've used this script to hide 2 columns on page load and changes (sorting, filtering).

// Override list views to hide language columns based on locale
listOverride: {
    set: function () {
        var overrideCurrentContext = {};
        overrideCurrentContext.Templates = {};


        overrideCurrentContext.OnPostRender = listOverride.hideLanguageColumns;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
    },
    hideLanguageColumns: function () {
        // Loop through columns which need to be hidden and hide from view
        cca.locale.hiddenLangColumns.map(function (column) {
            // Get column position
            var columnIndex = $("tr.ms-viewheadertr th:contains('" + column + "')").first().index() + 1;
            // Find and Hide column
            $('th:nth-child(' + columnIndex + '),td:nth-child(' + columnIndex + ')').hide();
        })
        console.log("list post render done")
    }
},

I'm experiencing two problems:

1. The CSR do not do anything on page load. I need to call listOverride.hideLanguageColumns explicitly on page load for it to take effect.
2. When I upload documents through drag n drop, the row Cells for the columns I've hidden are displayed again for the new item, but the columns are still hidden so I've got a table now with less columns then row cells.

I'm a bit stuck on both issues.

Answer 1

1. You are missing half the boilerplate CSR code,

always use the Chrome Browser & the Cisar Extension to WYSIWYG edit CSR code

2. Your CSR does not execute for the new Row

Rethink how to solve this. You are now trying to update the UI with JavaScript, which is a fine approach if you have to do one update.

CSS is the Browser technology that always updates the UI

So instead of deleting/hiding the columns with JavaScript

Use CSS to hide TDs and THs with CSS

You can add <STYLE> tags with JavaScript

Answer 2

Well, this got bumped to the top by Community, so I guess I'll throw my two cents in here...

Now, this is completely untested, but since I have found that you can add fake columns that aren't actually present in the list to a view by altering the ctx.ListSchema.Field collection in onPreRender, I'm guessing that the reverse might be possible - in the onPreRender stage, find the column you want to hide in the ctx.ListSchema.Field collection, and just splice it out.

Then the CSR engine won't render it, because it won't know about it.