styling a dynamically created htmlInput control and calling javascript

[davidrobin]

I am trying to write a web app that has a page that contains a table which lists people with the following columns

column1 - Text
column2 - Text
column3 - Textbox
column4 - Text
column5 - dropdownlist
column6 - Text

Each row has Text, Text, Textbox, Text, Dropdown, Text

There will be n number of people in the list.

This table is created dynamically in VB.net code.

How it should work
When a user types a particular character (maxlength = 1) in the textbox the dropdownlist needs to be visible otherwise not visible.
It would be inefficient to postback every time someone types in the textbox as there will be n number of people in the list.
Unless someone can tell me there is a way around that.

The other way I have thought to do it is to use htmlcontrols (Input for the text and select for the dropdownlist) with a runat=server attribute.
To make the select control visible or not the page contains javascript.

function gohere(){
	if (document.getElementById('Text1').value == 'L')
	{document.getElementById('Select1').style.display = 'none'}									
	else
	{document.getElementById('Select1').style.display = ''}
}

I prefer to use display instead of visible, thats just me.

The code for creating the input box is

tbcCell = New TableCell
Dim txtMarkBox As New System.Web.UI.HtmlControls.HtmlInputText
txtMarkBox.ID = "Mark" & i.ToString
txtMarkBox.EnableViewState = True
txtMarkBox.MaxLength = 1
tbcCell.Controls.Add(txtMarkBox)
tbrRow.Cells.Add(tbcCell)

How do I tell the input what javascript to call?
How do I associate a style class to the input (held in a CSS file)?

I have to declare the input this way because I have validation controls associated with the input.
I did have a VB.NET function which returns a string of the input control which has the style and onblur call but as it is not a control so I cannot associate a validation control with it.

Public Shared Function HTMLMarkText(ByVal strID As String) As String
 
        Dim strText As String
 
        strText = "<INPUT type=""text"" maxlength=""1"" runat=""server"" " & _
        " class=""markbox"" onblur=""gohere();"" ID=""" & strID & """" & _
        " name=""" & strID & """"
        Return strText
    End Function

Any help would be appreciated
I realise its a bit of a longwinded explanation.

[dj4uk]

Ok then *ROLLS UP SLEEVES*

I think I understand what you are asking. Basically unless there is a character in the textbox the dropdownlist is not visible but when there is a character or one is added it becomes visible, however you want to do this client-side instead of having to postback after OnTextChanged - correct?

It really won't make any difference if you use TextBox and DropDownList controls or HTML controls - I'd use the Web Controls for the extra server-side functionality.

Your JavaScript function needs to change element ID for each TextBox/DropDownList pair as each row will have different client-side IDs.

As for linking your server controls to this JavaScript function I think you'll need to do the following:
1. Add the dynamic TextBox and DropDownList controls to the TableRow as you are doing.
2. Use the FindControl method of the TableRow to load the just created TextBox and DropDownList into local variables. (Sorry this is in C# but my VB.NET is crap)

TextBox tempTxt = (TextBox) tbrRow.FindControl("mark" + i.ToString)

3. You will then be able to access the ClientID property of the TextBox and DropDownList - these are the IDs that will be in the final generated HTML code.
4. You can use these ClientIDs to add a onblur event to the TextBox:

tempTxt.Attributes["onblur"] = String.Format("gohere('{0}','{1}')", tempTxt.ClientID, tempddl.ClientID);

You'll need to change you JavaScript function to use these two arguments:

function gohere(textboxID, dropdownlistID){
	if (document.getElementById(textboxID).value == 'L')
	{document.getElementById(dropdownlistID).style.display = 'none'}									
	else
	{document.getElementById(dropdownlistID).style.display = ''}
}

That should cover it - let me know if something doesn't make sense.

Also:

How do I associate a style class to the input (held in a CSS file)?

I'm not sure if this was related or not but you just need to set the CssClass property e.g. if the textbox css class was called womble then:

tbcCell = New TableCell
Dim txtMarkBox As New System.Web.UI.HtmlControls.HtmlInputText
txtMarkBox.ID = "Mark" & i.ToString
txtMarkBox.EnableViewState = True
txtMarkBox.MaxLength = 1
txtMarkBox.CssClass = "womble"
tbcCell.Controls.Add(txtMarkBox)
tbrRow.Cells.Add(tbcCell)

HTH

DJ