kermitforney
kermitforney

Reputation: 93

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

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.

Upvotes: 4

Views: 8004

Answers (2)

user1455103
user1455103

Reputation: 123

*strong text*Solution from Darin is only partial as the "table th:first-child" will also hide the "canPage:true" grid footer (used for paging).

Solution is to add additional styling.

In the "head" section of your (or alternatively in the CSS file if you want to apply it on 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
}

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039578

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.

Upvotes: 6

Related Questions