Hiding columns in a webgrid in mvc application

Question

I have two columns that I will like to hide in a webgrid. This webgrid resides in a partial view. Here are the columns below

    gridColumns.Add(grid.Column("PaymentAmount", header: T("Payment<br/>Amount"), canSort: false, format: item => Html.TextBox("PaymentAmount", (object)string.Format("{0:#,0.00}", item.AmountDue))));
    gridColumns.Add(grid.Column("ExpText", header: T("Explanation"), canSort: false, format: item => Html.TextBox("ExpText", "")));

Here is my attempt with jquery below

    function hidecolumns(column) {
            $('td:nth-child(' + column + '),th:nth-child( ' + column + ')').hide();        
        }

This does not work. Kindly assist.

Why don't you simply leave the columns out of the grid? (e.g. don't include the gridColumns.Add for those two columns). — Splendor, Nov 14 '13 at 20:41
I will like to use the columns later. I want to be able to turn it on and off — Baba, Nov 14 '13 at 20:47

score 1 · Answer 1 · answered Aug 05 '19 at 14:10

You can use a datatable, if thats ok. It makes things way easier and better looking.

Just add this in your script:

$('#GridID').DataTable({
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
});

You will be able to use the column later too.

Hiding columns in a webgrid in mvc application

1 Answers1