Show/Hide Dynamically Generated Textboxes Client Side

 Hello,
 
my problem is that i have a datagrid with a template column.  this column containts a drop down list, and a text box.
 
when the page is loaded, i would like the text boxes to be hidden (there could be up to 75 individual textboxes depending on how many records the end user chooses to display at once), but they need to appear when a certain option is selected from the drop down list.
 
i know how to make them visible and enabled when the option is selected, my problem is hiding them to begin with.
 
since asp.net doesn't render the control to the browser if the visible property is set to false, i am thinking that i would need a java function to somehow loop through my datagrid, find the textboxes, and make them invisible, while ignoring the other text boxes on my page.
 
my java skills are somewhat weak (my background is mainly in windows based applications).  i am using VB.NET and ASP.NET 2.0, and am not familiar with AJAX.
 
suggestions, comments, and code examples would be greatly appreciated.
 
cheers.
 
justin 

Instead of using the Visible property of the textbox, you can use its display style property.  style="display:none;"  this still renders it to the page, but you just can't see it. Then when you want to see it, just remove the display attribute from the style.
We're all in this together.

 conankingofcool:
 
Instead of using the Visible property of the textbox, you can use its display style property.  style="display:none;"  this still renders it to the page, but you just can't see it. Then when you want to see it, just remove the display attribute from the style.

I agree. Here are some code snippets I worte to toggle the visability of comments on my blog. You should be able to adapt it to fit your needs.
JavaSript:
// SHOW-HIDE COMMENTS SCRIPT
<script type="text/javascript">
  function togglecomments (postiddiv, postidimg) { 

     var w = document.getElementById(postID);
     
     if (w.className=="commentshown") { 
        w.className="commenthidden";
     } 
     else { 
        w.className="commentshown";
     } 
  }
script>
 CSS
.commentshown
  {
    display:inline;
  }
..commenthidden
  {
    display:none;
  }
 
I'm at: http://www.codysechelski.com/

 that's why i love you guys  
 
i had to make a few tweaks to the script to get it to work right with the browser here.  this i what ended up working.
 
 
1    script><script type="text/javascript">
2    function HideText(id, id2) { 
3    var TagThree = document.getElementById(id)
4    var txtOther = document.getElementById(id2)
5    var selIndex = TagThree.selectedIndex;
6    if (TagThree.options[selIndex].value== '9999')
7    {
8    //alert ('shown');
9    document.getElementById(id2).style.display = 'inline';
10   } 
11   else { 
12   document.getElementById(id2).style.display = 'none';
13   } 
14   }
15   script>
 
 
here is how i am adding it to my asp.net page
 
 
1    jScript = "<script type=""text/javascript"">" & vbNewLine & _
2                            "function HideText(id, id2) { " & vbNewLine & _
3                            "var TagThree = document.getElementById(id)" & vbNewLine & _
4                            "var txtOther = document.getElementById(id2)" & vbNewLine & _
5                            "var selIndex = TagThree.selectedIndex;" & vbNewLine & _
6                            "if (TagThree.options[selIndex].value== '9999')" & vbNewLine & _
7                            "{" & vbNewLine & _
8                            "//alert ('shown');" & vbNewLine & _
9                            "document.getElementById(id2).style.display = 'inline';" & vbNewLine & _
10                           "} " & vbNewLine & _
11                           "else { " & vbNewLine & _
12                           "document.getElementById(id2).style.display = 'none';" & vbNewLine & _
13                           "} " & vbNewLine & _
14                           "}" & vbNewLine & _
15                           "script>" & vbNewLine
16   
17           ClientScript.RegisterClientScriptBlock(Me.GetType, "HideText", jScript)
18   
19   ThirdTag.Attributes.Add("javascript: onChange", "HideText('" & ThirdTag.ClientID + "', '" + OtherText.ClientID + "')")
20               
  
  many thanks guys!

The best way to do that is in the ItemDataBound server-side event of the DataGrid. Here's an example:
aspx file:

 
  
   
    
    
     Yes
     No
    
   
  
 


aspx.cs file:
protected void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{   
 if ( (e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem) )
 {
  TextBox gridTextBox = (TextBox)e.Item.FindControl("gridTextBox");
  DropDownList gridDropDownList = (DropDownList)e.Item.FindControl("gridDropDownList");
  if ( (gridTextBox != null) && (gridDropDownList != null) )
  {
   string eventHandler = string.Format("dropDownOnChange(this, '{0}');", gridTextBox.ClientID);
   gridDropDownList.Attributes.Add("onchange", eventHandler);
   if ( gridDropDownList.SelectedValue == "no" )
    gridTextBox.Style.Add("display", string.Empty);
   else
    gridTextBox.Style.Add("display", "none");
  }
 }
}
NC...

 thank you for the tip and source code NC01, i will give that a try!  

 JJoyce80:
 
 thank you for the tip and source code NC01, i will give that a try!  


No problem. Good luck!
NC...