4

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.

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
kermitforney
  • 93
  • 2
  • 4

2 Answers2

6

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.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • I tried this way and it worked perfectly. The column is hidden but the problem is that the `Webgrid` does not have the paging functionality anymore. It is only displaying the first 20 records (20 is the maximum number of rows) without displaying the pages at the bottom. Do you think this might be happening because the hidden column is the `id` of the record? – Hanady Dec 27 '13 at 09:43
  • thanks i too facing this problem, its working perfectly – user1557020 Aug 19 '14 at 19:00
  • What should to select when I have more than one table? – Franziee Oct 27 '14 at 10:17
0

*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
}
user1455103
  • 123
  • 2
  • 16