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

0
JJoyce80
7/10/2008 8:21:57 PM
asp.net.client-side 24353 articles. 2 followers. Follow

6 Replies
987 Views

Similar Articles

[PageSpeed] 0
Get it on Google Play
Get it on Apple App Store

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.
0
conankingofcool
7/10/2008 9:01:21 PM

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/
0
codysechelski
7/10/2008 10:50:42 PM

 that's why i love you guys  Cool

 

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!
0
JJoyce80
7/11/2008 2:20:20 PM

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

aspx file:

<asp:datagrid id="DataGrid1" autogeneratecolumns="False" runat="server" OnItemDataBound="DataGrid1_ItemDataBound">
 <columns>
  <asp:templatecolumn>
   <itemtemplate>
    <asp:textbox id="gridTextBox" runat="server"></asp:textbox>
    <asp:DropDownList id="gridDropDownList" runat="server">
     <asp:listitem value="yes">Yes</asp:listitem>
     <asp:listitem value="no">No</asp:listitem>
    </asp:DropDownList>
   </itemtemplate>
  </asp:templatecolumn>
 </columns>
</asp:datagrid>

<script type="text/javascript">
<!--
function dropDownOnChange(elementRef, textBoxId)
{
 if ( elementRef.value == 'no' )
  document.getElementById(texboxId).style.display = '';
 else
  document.getElementById(texboxId).style.display = 'none';
}
// -->
</script>

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...

-1
NC01
7/11/2008 2:59:02 PM

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

0
JJoyce80
7/11/2008 3:15:39 PM

JJoyce80:

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

No problem. Good luck!

NC...

 

0
NC01
7/11/2008 3:36:39 PM
Reply:

Similar Artilces:

Client Side Javascript and Dynamic Client Ids
I have a gridview that has an edit row.  When I click on edit... It pops up a inline window with modal functionality in the css... I want to fire off a webservice to bring back data to populate the input fields on the form I created... one catch I created a tab container with panels to separate out the keyed in information... So, I found that the .net is doing this to the inputs...  <input name="ctl00$cphMainBody$tcEmployeeDetails$TabPanel1$txtFirstName" type="text" maxlength="25" id="ctl00_cphMainBody_tcEmployeeDetails_TabPanel1_txtFirstNa...

List of client side function of extenders and controls for client side
Hello All,I am using AJAX control toolkit for my current project. Now I need to find out what client side functions I can call on an extender. Lets say I am using a PopControlExtender. Now I want to show the popup from a JS funtions.If I can do a guess then it would be something like this$find('ppce').show();From where I can find what client side functions I can call on those extensders. This is really a frusterating thing. I learn about extenders only from Learn tutorials, no help here and there. Can anybody please tell me where are documentations about all the extenders in the tool...

client side table rows not showing up server side?
so my code is something like... <updatepanel><submit button><updatepanel> <div><table><row><cell><Table id="mytable" runat="server"><thead><thead><tbody>...I create client side rows here</tbody>.....<div> so I add a bunch of rows client side...input some data... and then click submit.  However, when I look at the contents of Me.myTable on the server...I only see my 2 static header rows?  I've tried adding the runat attribute to the client side rows ....still didn't work.&nb...

reading data at client side which is generated on server side
Hello, I am developing an application in which MS word templates will be on client side. The data will be read from the database and sent to client side. This data has to be entered in the word documents which will generated from the template. questions 1) In what format shud I send the data to client side? 2) how the client side script will read the data and place it in the word document at a proper place? Thanx AFAIK, if you make a form in word, you should be able to access all input places by program. Well, the problem could be, you can do this on the server,...

Data format in TextBox in both Server side and Client side?
HI,      I have a GridView which shows data in TextBox.      I was wondering if there is a way to do data format (Currency) like $12,203.00. I need it working in server side (for existing data) and client side (for new data or changed data). What I mean about client side is data automatically formatted after data is keyed in.     Thanks for your help. Hi you can use MaskEdit in AjaxControlToolkit please check here http://www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx this is a cool control. Hope it...

Server side Generating and client side executing javascript
Hi,  This is a really basic question.  If one has a piece of code on the server side that generates some javascript, how do you inject and execute this script n the client side?  For example, I have a server side function that inserts a bunch of calls to a the javascript function foo(), such as foo(1); foo(2);.....How can insert these calls into my webpage so that they are executed on a periodic basic.  I assume I would use an script manager tag, and inside this tag I would have an update panel, but am unsure where to go after that.  jerry   Hi, you can in...

Jscript, moving from client-side to server-side (.NET)
Hey all I’m working translating a web-app written in client-side Jscript to run on the server-side as JScript.NET. Without needing to get too specific, I am using Jscript because the original page aggregated raw data to produce statistical results (this was done dynamically based on user 'sort-by' options). The final output is an html report that can be emailed. Because this is currently being done on the client side, as the raw data grows the load-time grows as well (to the point that has almost become unusable). I’m posting here to see if anyone has any experi...

Validation Controls in .NET ( Client side or server side?)
 i have a very basic question. We have all these validation controls in asp.net ( required field, range validator and others)..my question is the required field validator is a server side control. So does that mean that it does a post back?..is it client side or server side control  The only controls that post back are buttons and other inputs where you set AutoPostback="True", such as a dropdownlist or a textbox.  Another way of posting back is using an UpdatePanel and placing a trigger in it for a specified control and/or event. All controls are considered clien...

Show/Hide Panel in Client Side
Hi. I have tow asp panels and tow html buttons to navigate between the panels.like this:document.getElementById('Panel1').style.display ='block'; document.getElementById('Panel2').style.display ='none';    the first button to show the first panel and hide the second panel . the second button had the opposite purpose. inside the panels there is asp controsl. every thing work good until I use postback  by any control in the panels,for example when I click an asp button in the panel evry panel return to the defaut style. I put this...

client side show and hide panel
I have several pages that I want to add some controlls that are normally not displayed. Say I have a datagrid and below the datagrid I add a panel. Just above the panel I have a link that executes some javascirpt to hide the span tag. In the panel I have a link that executes som js to hide the panel. All is working OK, but I want to have the panel hidden automatically when the page loads. I obviously can't use the visble propery of the panel since the html is never rendered to the client to be show. TIA, Craig p.s. my js is function HideAdminPanel() { if (document.getE...

Client side show/hide div
On the page I have a div: <div id="DivAddress" runat="server">   some content here</div> I want the div to be hidden when the page loads, therefore at the end of the page I run: <script type="text/javascript">$(document).ready(function(){$("#<%= this.DivAddress.ClientID %>").css({"display": "none"});});</script> Below that div there are also buttons which hide or show that div by setting the display to none or block in a similar way (this example uses jquery, but I also used traditional wa...

Client Side Hide/Show with Validation
Here is my setup... <asp:RadioButtonList ID="rbl1" runat="server"> <asp:ListItem Text="Collect My Info" Value="0" /> <asp:ListItem Text="Skip This Step" Value="1" /></asp:RadioButtonList><asp:Panel ID="Info" runat="server"> <asp:TextBox ID="tb1" runat="server" /> <asp:RequiredFieldValidator ID="rfv1" runat="server" ControlToValidate="tb1" Text="Error :)" /></asp:Panel><asp:Panel ID="Skip" runat...

Showing and hiding Panels on the client side?
hello, I have a couple of panels I am useing on a page to mimic a tab based navigation menu. I have been able to use linkbutton clicks to show and hide panels to simulate the tabs. Is it possible to do this on the client side rather than making trips back to the server? Is this similar to the UI validation controls that can validate input from either the client or server side, or would I have to write the script myself to accomplish this? Thanks, jigster... an asp:panel is just a <div> tag on the client-side. using view->source would have told you this.RTFM - straight ...

passing data to a server side textbox from client side script
Qu: passing data to a server side textbox from client side java script.Does anyone know how to do this?Thanks,Graham. Remember that when you view an aspx page in your browser, you are viewing straight html code (view the source).  Thus, access the textbox as you would a normal <input type="text> tag.HTH, rchern.Churned Ajax ToolkitPlease choose "Mark as Answer" for the posts that lead you to a solution....

Web resources about - Show/Hide Dynamically Generated Textboxes Client Side - asp.net.client-side

iPhone 5 A6 chip to dynamically up-clock up to 1.3GHz (and downclock too)?
Interesting video from our friends at TLDToday: If this is not just a Geekbench app glitch, it could indicate why that A6 processor is so 2X ...

Apple's Lightning port dynamically assigns pins to allow for reversible use
... a closer look at how Apple's new Lightning connector works, and has come to the conclusion that the 8 pins on each side of the plug are dynamically ...

iPhone 5 Lightning port dynamically reassigns pins
... of Apple's Lightning USB cable shows that the pins on the plug aren't arranged symmetrically, suggesting that the Lightning port can dynamically ...

Urlbox Launches Screenshots-as-a-Service Platform to Dynamically Update Galleries
... changes. Launched yesterday, Urlbox allows anyone with a gallery displaying website screenshots to automate the process and keep them dynamically ...

Everything.me launcher dynamically adapts to what you’re doing right now
... phone according to what you’re doing. Perform a search for ‘football’ and your background will change to the NFL logo. A launcher that dynamically ...


A YouTube Experiment Resizes the Player Dynamically
There's a new YouTube experiment that changes the video player's size, depending on the browser window's size. When resizing Chrome's window, ...

Apple Granted “Dynamically Changing Cursor for User Interface” Patent, Originally Filed in 2003
... a utility patent that covers the use of the mouse cursor that changes according to the context of the task it is engaged in. Called a “Dynamically ...

Atmel's FPSLIC II Dynamically Reconfigurable SoC Supports "Silicon-Sharing" For Peripherals & Interfaces ...
Silicon-Sharing Fits 200K Gate Design into 40K Gate FPSLIC II's, Cuts Power Drain by 97%

Everything.me Launcher Wants to Dynamically Change Phones Based on Location, Interests, and Mental State ...
What if your phone’s launcher dynamically changed based upon interests, your location, or topics you had in mind at a specific moment? A new ...

Resources last updated: 12/23/2015 8:54:51 AM