Hiding a Row in ASP.NET


Many things that I come across are “No Duh”. This is one of them.

I frequently see code from other programmers that incorrectly use Panel for
the purpose of hiding content. What they don’t understand is that a Panel tag
renders a table, and as such can’t be used around Table Rows. For instance,
this:

  1 <asp:panel id="test" visible="True" runat="server">
  2    Ewoks aren't mini-wookies.
  3 </asp:panel> 

will render as:

  1 <table id="test" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
  2   Ewoks aren't mini-wookies.
  3 </td></tr></table>

So
that means you can’t do something like:

  1 <tr>
  2 	<th>name:</th>
  3 	<td>something...</td>
  4 </tr>
  5 <asp:Panel ID="test" Runat="server" Visible="True">
  6 	<tr>
  7 		<th>date of birth:</th>
  8 		<td>something...</td>
  9 	</tr>
 10 </asp:Panel>
 11 <tr>
 12 	<th>email:</th>
 13 	<td>something...</td>
 14 </tr>

To do so will create a table between two rows. The reason this has gone
unnoticed by many developers is that they are developing for Internet Explorer
exclusively, which will forgive some of these mistakes. Firefox shows them clear
as day.

I was thinking about a solution this morning, wondering if I would have to
create my own Panel control which renders no table, but thought I would try the
obvious first. Could I just do this?:

  1 <tr>
  2 	<th>name:</th>
  3 	<td>something...</td>
  4 </tr>
  5 <tr id="Tr1" runat="server">
  6 	<th>date of birth:</th>
  7 	<td>something...</td>
  8 </tr>
  9 <tr>
 10 	<th>email:</th>
 11 	<td>something...</td>
 12 </tr>

And then use the following in the code behind?:

  1 protected HtmlControls.HtmlTableRow Tr1;
  2
  3 private void Page_Load(object sender, EventArgs e)
  4 {
  5    Tr1.Visible = false;
  6 }

Sure enough it hid the row!

,

15 responses to “Hiding a Row in ASP.NET”

  1. Why don’t you just use an inline style?

    Argo was here!

    ….

    Unless you want to hide AND show the row then you shouldn’t have to add another server control.

  2. That was the whole point…to replace a Panel. That way I can show it or not. Having an inline style doesn’t really help…if I never want to show the row then I would just delete it.

  3. I’d already figured out that assigning an ID to the table row would allow me to hide or show the row. Sadly forgot the runat=server bit. Your post saved my hair. Cheers,

  4. One clarification…

    “The reason this has gone unnoticed by many developers is that they are developing for Internet Explorer exclusively, which will forgive some of these mistakes”

    Although IE is very forgiving, and that often makes this statement true, for Panels, the Framework generates DIVS in IE vs TABLES in other browsers.

  5. I just happened upon this thread today and the solution appears to be exactly what I need to implement role-based access for specified db fields on a FormView (admittedly a quick & dirty version).

    However, upon implementation & execution the page threw and exception:

    System.NullReferenceException was unhandled by user code

    Message=”Object reference not set to an instance of an object.”

    Source=”App_Web_-yigdorv”

    StackTrace:

    at EditProperty.Page_Load(Object sender, EventArgs e) in c:\Inetpub\wwwroot\trump\EditProperty.aspx.cs:line 31

    My code in aspx page:

    My code in aspx.cs page:

    public partial class EditProperty : System.Web.UI.Page

    {

    protected HtmlTableRow trMP_Latitude;

    protected void Page_Load(object sender, EventArgs e)

    {

    if (!Page.IsPostBack) { // first-time logic

    trMP_Latitude.Visible = false; <=== THROWS EXCEPTION

    No doubt the problem stems from the fact that the table is contained within a FormView inside a ContentPageHolder which, in turn, is contained within the master page. I will mess around with the FindControl() method until I figure out the necessary syntax (hopefully ASP.Net 3.0 will enable a cleaner syntax for finding a buried control).

    Troy

  6. Thanks for this information Scott.

    For anyone interested, you can also achieve the same for multiple TR tags by adding a TBODY tag to wrap the rows, and then giving it an ID and runat=server attribute.

    You can have as many TBODY’s in a table as you like, so you can use them just like asp:PANEL tags.

  7. Mike, thank you for that, tbody is actually a much cleaner solution for any rows beyond one or two.

    Again, thank you very much!

Leave a Reply

Your email address will not be published. Required fields are marked *