I have a listview 1 and I'm using CSR for set specific rows with Hyperlinks and hide only a column (called Id with InternalName Id0) in the OnPreRender > Templates. Here is the code that I have so far:

    OnPreRender: function(ctx) {
        var arrayLength = ctx.ListSchema.Field.length;
        for (var i=0; i < arrayLength;i++) {                
            switch (ctx.ListSchema.Field[i].DisplayName) {
            /* This is the column that I'm trying to remove the filtering control. */
                    case 'Id':
                         ctx.ListSchema.Field[i].DisplayName = '';
                         ctx.ListSchema.Field[i].AllowGridEditing = 'FALSE';
                         ctx.ListSchema.Field[i].AutoHyperLink = 'FALSE';
      },Templates: {
            Fields: {
                    'Name': {
                            'View': function(ctx) {
                                    var url = String.format('URL_SAMPLE.aspx?DetailsId={0}&', ctx.CurrentItem.Id0);
                                    url = url + "IsDlg=1";          
                                    return String.format('<span class=\'cssCSRLinkStyle\' onclick="{0}">{1}</span>', url, ctx.CurrentItem.Id0);
               /* Here, I just removed the value before rendering. */
                    'Id0': {
                            'View': function(ctx) {
                                    return '<span></span>';


The value of the cells (from the hidden column Id) now are hidden and the displayname of the header column too, but after tried with no success, the header column stills having the filter column.

how can be disabled/removed filter control in column using CSR?

1 I created a view for use only a few columns.

1 Answer 1


The cell is not hidden, you have emptied the contents.

You have to hide that whole column by hiding every individual cell .. including the TH header row where the label resides.

The DOM is not there yet in your OnPreRender so you have to do another loop over those Fields in the OnPostRender
With either new CSS nth-child(i) you add to the page, or JavaScript to set the style.

Search for 'Javascript hide table column'

And you do not need jQuery for this.. search for document.querySelector solutions

Update #1

Here is generic code,

function tableActions(table, rowaction, cellaction) {
    //convert HTML node object of elements to an array
    Array.prototype.slice.call(table.rows).forEach(function (row, rownr) {
        rowaction && rowaction(row);
        Array.prototype.slice.call(row.cells).forEach(function (cell, colnr) {
            cellaction && cellaction(cell, rownr, colnr);

Example Usage:

var table = document.getElementById(ctx.clvp.tab.id);
tableActions(table, false ,
    function (cell, rownr, colnr) {
        if (colnr === 3) cell.style.display = 'none';

You have to match that colnr with i from the loop like in your OnPreRender

If you have more complex CSS layout going on, note that (for performance reasons) the Table width is not recalculated when you hide table elements... you know... DOM Repaints.. reflows..etc. etc.

  • The cell is not hidden, you have emptied the contents. that is correct. I already was modifying the code provided on this source but, after hide one field, an error ocurrs "I suppose is because, it's needed for the next row". I'll keep trying the approach that you're mention in your answer and I'll accepted it if I can make it work. Thanks. Dec 15, 2015 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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