How do you hide a column for a hidden field within a webgrid using ASP.Net MVC3?

asp.net-mvc-3 razor hide webgrid
kermitforney picture kermitforney · Dec 3, 2011 · Viewed 7.8k times · Source

How would I hide a column that should be hidden from view. I handled this by hiding the object, but the column still shows in the UI as a skinny column with nothing in the rows. Is there way to prevent the item from being drawn?

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

Thanks.

Answer

Darin Dimitrov picture Darin Dimitrov · Dec 3, 2011

The WebGrid helper allows you to apply a CSS class to individual columns using the style property. Unfortunately while this will allow you to hide the column inside the tbody section you cannot apply different styles to column headers. You can apply the same style to all columns which makes it pretty useless. So one possibility is to use CSS:

table th:first-child, table td:first-child {
    display: none;
}

This assumes that you want to hide the first column and that the client browser supports the :first-child pseudo selector which might not be the case with legacy browsers.

So in case you need to support legacy browsers you could use jQuery to apply a hidden style to the header and the rows of the first column or to simply hide them directly:

$(function () {
    $('table th:first-child, table td:first-child').hide();
});

If you want to have more control I would recommend you checking out the MvcContrib Grid or Telerik Grid.

Related questions

HTML.ActionLink vs Url.Action in ASP.NET Razor

Is there any difference between HTML.ActionLink vs Url.Action or they are just two ways of doing the same thing? When should I prefer one over the other?

Read More
How to write "Html.BeginForm" in Razor

If I write like this: form action="Images" method="post" enctype="multipart/form-data" it works. But in Razor with '@' it doesn't work. Did I make any mistakes? @using (Html.BeginForm("Upload", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" })) { @…

Read More
How to declare a local variable in Razor?

I am developing a web application in asp.net mvc 3. I am very new to it. In a view using razor, I'd like to declare some local variables and use it across the entire page. How can this be done? …

Read More