One control per page
You can follow this simple example for an editable DropDownlist in a code project that uses the standard ASP.NET TextBox and DropDownList text block in combination with some JavaScript.
However, the code did not work for me until I added a link to get ClientID values for TextBox and DropDownList:
<script language="javascript" type="text/javascript"> function DisplayText() { var textboxId = '<% = txtDisplay.ClientID %>'; var comboBoxId = '<% = ddSelect.ClientID %>'; document.getElementById(textboxId).value = document.getElementById(comboBoxId).value; document.getElementById(textboxId).focus(); } </script> <asp:TextBox style="width:120px;position:absolute" ID="txtDisplay" runat="server"></asp:TextBox> <asp:DropDownList ID="ddSelect" style="width:140px" runat="server"> <asp:ListItem Value="test1" >test1</asp:ListItem> <asp:ListItem Value="test2">test2</asp:ListItem> </asp:DropDownList>
Finally, in the code, as in the original example, I added the following to load the page:
protected void Page_Load(object sender, EventArgs e) { ddSelect.Attributes.Add("onChange", "DisplayText();"); }
Multiple controls per page
I put all the above code in my own custom ASCX element to make it reusable in my project. However, the above code only works if this page requires only one editable DropDownList.
If you need to support multiple DropDownList custom controls on the same page, you need to have a unique JavaScript function name to avoid conflicts. Do this again using the ClientID:
in the ASCX file:
function DisplayText_<% = ClientID %>(){...}
in the code behind:
/// ... ddSelect.Attributes.Add("onChange", "DisplayText_" + ClientID + "();"); ///..
This is one way to avoid using third-party controls.
Ray vega
source share