ASP.NET 2.0 HtmlTable Rows - hiding without making invisible

Question

I need to find a way to hide HTML Rows (or Tables) from view without blocking them from being rendered. Setting this.myTable.Visible = false would seem to be the easiest way to hide tables from the user, but it prevents the HTML Table from being sent to the browser and that causes a problem because I am using Validators and need to make sure the non-visible elements are validated (because of page navigation logic, only some elements will be made visible to the user at a time).

I was attempting to change the Style property but asp.net says it is read-only so I cannot make it invisible using CSS. Also I would prefer not to use Javascript but if there is a simple solution with JS that is fine.

Any help is greatly appreciated. :)

Answer 1

To hide a complete table (but still render it to the client), wrap it in a div with style="display:none":

<div style="display:none;">
 asp.net table goes here
</div>

Although, for single rows, this does not work. You will probably have to use some javascript (e.g. jquery, as another user recommended).

Answer 2

You can set this server-side by adding a display property to the style collection. The style collection property itself is read-only (you can't replace it), but you can an element to it to reflect setting that style property.

 table.Style.Add("display","none")

or

 table.Style["display"] = "none";

The same is true for table rows as the Style collection is inherited from HtmlGenericControl.

EDIT: The HTML control needs to be runat="server" for this to work, which I'm assuming yours is since you are able to set the Visible property.

Answer 3

You could make your <tr>s server tags. To do this, change your rows in

<tr id="rowID" runat="server">

So you can access their properties, such as rowID.style or class properties.

Answer 4

Besides using the style property, you can always put the style on the element either right on the tag itself, or in code via element.Attributes["style"] = "display: none;";. To do it in code, you need to make them server controls by adding runat="server" and setting an ID.

Answer 5

Thanks for the useful information guys. I was able to actually combine two of the earlier answers to come up with a great solution. For reference here it is:

I used div tags around the tables I wanted to show and hide like:

<div style="display:none;" id="tblHideItems1" runat="server">

I referenced these in the code-behind like this:

Definition:
    protected System.Web.UI.HtmlControls.HtmlGenericControl tblHideItems1;

To show:
this.tblHideItems1.Style.Add("display", "inline");

To hide:
this.tblHideItems1.Style.Add("display", "none");

This allows me to show or hide the tables, without taking up blank space on the page when they are hidden, but still rendering them so they'll work with Validation controls (that was my ultimate goal) while hidden or showing. The style tag in the definition may not be necessary but since it works now as it is, I will probably just leave it since it is being modified at runtime.

Again thanks for the insight!!

Answer 6

guys even table.Visible = False works provided u've set the runat= "server" for the table ofcourse