How to make columns visible false while using WebGrid Helper

Question

I am using @grid.GetHtml gridview to show the grid in my ASP.NET MVC4 application.

I want to visible some columns in my grid view and also i will use these columns for my future functionality.

Please help how to make the columns as visible false in @grid.GetHtml razor grid.

My code

@grid.GetHtml(
    htmlAttributes: new
      {
          id = "XXXX"
      },
    tableStyle: "table table-bordered table-condensed table-hover table-striped",
    headerStyle: "info",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "gridrow",
    columns: grid.Columns(
        grid.Column("AAAA", "AAA"),
        grid.Column("BBBB", "BBB")
    ) 

Answer 1

Try adding the columns you wish to hide with

grid.Column("BBBB", "BBB",  style:"hidecol")

Then write some css

.hidecol {
    display: none;
}

If you wish to hide that column header as well, then you can use some JQuery like this

$(document).ready(function() {
    $("#yourGridId th:nth-child(2)").hide();
}

Where you need to replace #yourGrid with an identifier for your grid. This will hide the header above the 2nd column.