locked
How to hide table row? RRS feed

  • Question

  • User-1329334484 posted

    I would like to hide the whole following row:

    <tr>

    <td class="checkoutlabel" >

    <asp:Label ID="lblEmail" runat="server" AssociatedControlID="txtEmail">E-mail</asp:Label>

    </td>

    <td height="28">

    <asp:TextBox Runat="server" ID="txtEmail"></asp:TextBox>&nbsp;

    </td>

    </tr>

     

    It is inside of the ASCX control... Now I expose those two controls in my ASCX code:

    public TextBox TxtEmail

    {

    get { return txtEmail; }set { txtEmail = value; }

    }

    public Label LblEmail

    {

    get { return lblEmail; }

    set { lblEmail = value; }

    }

    Than I hide the controls from my register.aspx page like this:

    protected void Page_Load(object sender, EventArgs e)

    {

    InfoLabel.Visible =
    false;

    AdLocation.TxtEmail.Visible = false;

    AdLocation.LblEmail.Visible = false;

    }

     The problem is there is blank space above Email (table row). I am not sure how to hide it....

     

    Saturday, June 9, 2007 6:02 AM

Answers

  • User-319574463 posted

     >What is C# type for trrHideMe?
    TableRow

    >Is this the best approach
    Yes because in one operation the line can be hidden or revealed!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 9, 2007 3:13 PM
  • User-2115483147 posted

    I would like to hide the whole following row:

    <tr>

    <td class="checkoutlabel" >

    <asp:Label ID="lblEmail" runat="server" AssociatedControlID="txtEmail">E-mail</asp:Label>

    </td>

    <td height="28">

    <asp:TextBox Runat="server" ID="txtEmail"></asp:TextBox>&nbsp;

    </td>

    </tr>

     

    It is inside of the ASCX control... Now I expose those two controls in my ASCX code:

    public TextBox TxtEmail

    {

    get { return txtEmail; }set { txtEmail = value; }

    }

    public Label LblEmail

    {

    get { return lblEmail; }

    set { lblEmail = value; }

    }

    Than I hide the controls from my register.aspx page like this:

    protected void Page_Load(object sender, EventArgs e)

    {

    InfoLabel.Visible =
    false;

    AdLocation.TxtEmail.Visible = false;

    AdLocation.LblEmail.Visible = false;

    }

     The problem is there is blank space above Email (table row). I am not sure how to hide it....

    Hi rfurdzik,

    Try to use Javascript to solve your proplem, see the follow demo: 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="HiddengTableRow.aspx.cs" Inherits="June_HiddengTableRow" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="Server"><title>
     Untitled Page
    </title>
       
      <script type="text/javascript">

    function poorman_toggle(id)
    {
     var tr = document.getElementById(id);
     if (tr==null) { return; }
     var bExpand = tr.style.display == '';
     tr.style.display = (bExpand ? 'none' : '');
    }
    function poorman_changeimage(id, sMinus, sPlus)
    {
     var img = document.getElementById(id);
     if (img!=null)
     {
         var bExpand = img.src.indexOf(sPlus) >= 0;
      if (!bExpand)
       img.src = sPlus;
      else
       img.src = sMinus;
     }
    }

    function Toggle_trGrpHeader2()
    {
        poorman_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');
        poorman_toggle('row1');
        poorman_toggle('row2');
        poorman_toggle('row3');
    }

    function Toggle_trGrpHeader1()
    {
        poorman_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');
        poorman_toggle('trRow1');
    }
    </script>
       
    </head>
    <body>

        <div>
        <table border="1">
        <tr id="trGrpHeader1">
     <td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td>
    </tr>
       
        <tr id="trRow1">
     <td>  Hello</td>
     <td class="number">10</td>
     <td class="number">1999-11-17 00:00:00</td>
     <td class="number">1999-12-15 00:00:00</td>
    </tr>
       
        <tr id="trGrpHeader2">
     <td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td>
    </tr>
       
        <tr id="row1">
     <td>  Ocean</td>
     <td class="number">10743</td>
     <td class="number">1997-11-17 00:00:00</td>
     <td class="number">1997-12-15 00:00:00</td>
    </tr>
        <tr id="row2">
     <td>  Roger</td>
     <td class="number">10768</td>
     <td class="number">1997-12-08 00:00:00</td>
     <td class="number">1998-01-05 00:00:00</td>
    </tr>
        <tr id="row3">
     <td>  Muhan</td>
     <td class="number">10793</td>
     <td class="number">1997-12-24 00:00:00</td>
     <td class="number">1998-01-21 00:00:00</td>
    </tr>
       
        </table>
        </div>
    </body>
    </html>

    Hope it helps,

    Hong Gang

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 10, 2007 10:50 PM

All replies

  • User-319574463 posted

     Modify
    <tr>

    to
    <tr runat="server" id=trrHideMe>

    In your code
    trrHideMe.Visible = false;
     

    Saturday, June 9, 2007 6:48 AM
  • User-1329334484 posted

    What is C# type for trrHideMe? I sthis the best aprooach I am using or is it better to declare one property only called Bool EmailVisible? This property would make invisible all 3 fields. What do you think?

    Saturday, June 9, 2007 10:32 AM
  • User-319574463 posted

     >What is C# type for trrHideMe?
    TableRow

    >Is this the best approach
    Yes because in one operation the line can be hidden or revealed!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 9, 2007 3:13 PM
  • User-2115483147 posted

    I would like to hide the whole following row:

    <tr>

    <td class="checkoutlabel" >

    <asp:Label ID="lblEmail" runat="server" AssociatedControlID="txtEmail">E-mail</asp:Label>

    </td>

    <td height="28">

    <asp:TextBox Runat="server" ID="txtEmail"></asp:TextBox>&nbsp;

    </td>

    </tr>

     

    It is inside of the ASCX control... Now I expose those two controls in my ASCX code:

    public TextBox TxtEmail

    {

    get { return txtEmail; }set { txtEmail = value; }

    }

    public Label LblEmail

    {

    get { return lblEmail; }

    set { lblEmail = value; }

    }

    Than I hide the controls from my register.aspx page like this:

    protected void Page_Load(object sender, EventArgs e)

    {

    InfoLabel.Visible =
    false;

    AdLocation.TxtEmail.Visible = false;

    AdLocation.LblEmail.Visible = false;

    }

     The problem is there is blank space above Email (table row). I am not sure how to hide it....

    Hi rfurdzik,

    Try to use Javascript to solve your proplem, see the follow demo: 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="HiddengTableRow.aspx.cs" Inherits="June_HiddengTableRow" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="Server"><title>
     Untitled Page
    </title>
       
      <script type="text/javascript">

    function poorman_toggle(id)
    {
     var tr = document.getElementById(id);
     if (tr==null) { return; }
     var bExpand = tr.style.display == '';
     tr.style.display = (bExpand ? 'none' : '');
    }
    function poorman_changeimage(id, sMinus, sPlus)
    {
     var img = document.getElementById(id);
     if (img!=null)
     {
         var bExpand = img.src.indexOf(sPlus) >= 0;
      if (!bExpand)
       img.src = sPlus;
      else
       img.src = sMinus;
     }
    }

    function Toggle_trGrpHeader2()
    {
        poorman_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');
        poorman_toggle('row1');
        poorman_toggle('row2');
        poorman_toggle('row3');
    }

    function Toggle_trGrpHeader1()
    {
        poorman_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');
        poorman_toggle('trRow1');
    }
    </script>
       
    </head>
    <body>

        <div>
        <table border="1">
        <tr id="trGrpHeader1">
     <td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td>
    </tr>
       
        <tr id="trRow1">
     <td>  Hello</td>
     <td class="number">10</td>
     <td class="number">1999-11-17 00:00:00</td>
     <td class="number">1999-12-15 00:00:00</td>
    </tr>
       
        <tr id="trGrpHeader2">
     <td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td>
    </tr>
       
        <tr id="row1">
     <td>  Ocean</td>
     <td class="number">10743</td>
     <td class="number">1997-11-17 00:00:00</td>
     <td class="number">1997-12-15 00:00:00</td>
    </tr>
        <tr id="row2">
     <td>  Roger</td>
     <td class="number">10768</td>
     <td class="number">1997-12-08 00:00:00</td>
     <td class="number">1998-01-05 00:00:00</td>
    </tr>
        <tr id="row3">
     <td>  Muhan</td>
     <td class="number">10793</td>
     <td class="number">1997-12-24 00:00:00</td>
     <td class="number">1998-01-21 00:00:00</td>
    </tr>
       
        </table>
        </div>
    </body>
    </html>

    Hope it helps,

    Hong Gang

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 10, 2007 10:50 PM