How to hide a column in the Webgrid in aspasp.net MVC?

Question

I am new to MVC and I use Webgrid to display some customer values. I need to hide columns together with their headers. How do i do this?

CSS: gridhide { visibility:hidden }
Code: grid.Column("Id", "ID", style: "gridhide"),

Solution 1

I hide particular column: Please Try This: WEBGRID

grid.Column(null,null, format: @<input type="hidden" name="IDHidden" value="@item.IDHidden"/>),

Solution 2

I ended up using jQuery to hide the column on the client side. Not ideal but easy to implement. Eg to hide the second column:

$('td:nth-child(2),th:nth-child(2)').hide();

Another option would be to simply not add the column to the grid in the first place like so, as seen here: https://forums.asp.net/post/5850519.aspx

var books = db.Query(sql);
var columns = new List<WebGridColumn>();
columns.Add(new WebGridColumn(){ColumnName = "BookId", Header = "Book Id" });
if(books.Any(b =>b.Price != null)){
    columns.Add(new WebGridColumn(){ColumnName = "Price", Header = "Price" });
}
var grid = new WebGrid(books);

Comments

[Praveen S]

The column values will hide..still header is on display i want to hide even header also

[Amit]

define class on header.

[Praveen S]

I use this code to hide column grid.Column(null,null, format: @<input type="hidden" name="IDHidden" value="@item.IDHidden"/>),

[Matthew Lock]

this almost works for me but seems to leave a tiny blank column in my table where the column has been excluded