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

Question

How to hide a column that should be hidden from view. I handled this by hiding the object, but the column still appears in the user interface as a skinny column with nothing in the rows. Is there a way to prevent drawing an element?

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

Thanks.

Answer 1

The WebGrid Helper allows you to apply the CSS class to individual columns using the style property. Unfortunately, while this allows you to hide the column inside the tbody section, you cannot apply different styles to the column headings. You can apply the same style to all columns, which makes it pretty useless. So one of the possibilities is to use CSS:

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

It is assumed that you want to hide the first column and that the client browser supports the :first-child pseudo-selector, which may not be with legacy browsers.

So, if you need to support legacy browsers, you can use jQuery to apply a hidden style to the header and rows of the first column, or just hide them directly:

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

If you want more control, I would recommend you check out the MvcContrib Grid or Telerik Grid .

Answer 2

* strong text * Darin’s solution is only partial, since "table th: first-child" will also hide the "canPage:true" grid footer (used for swapping).

The solution is to add additional styling .

In the "head" section of yours (or, alternatively, in the CSS file, if you want to apply it to all tables):

 <style type="text/css"> .nodisplay {display: none;} </style> 

In the Webgrid section:

 footerStyle : "table-footer", ... grid.Column(null, null, style:"nodisplay", ... 

In the CSS file:

 .table-footer { display: normal }