So I got to have some fun in the last 24 hours playing around with Atlas some more. We're currently rebuilding the company's remote enrollment engine and we've decided that the April Atlas build is stable enough that we're going to go ahead and integrate it for a smoother client experience.
In the initial "Postback" version we were using the Telerik Radcombo because it has some nice features like being able to type into the drop down box and filtering the list. If you've never noticed by default the dropdownlist packaged with ASP .NET only allows for filtering by a single keypress. As such, if you have a list with:
Babbs, Bobby, Brutus
You would have to hit the "b" key three times in order to select brutus rather than typing a more intuitve "br". I find this highly annoying hence the use of the Telerik Control. Much to my chagrin, however, I discovered that when wrapping the telerik control in an Atlas update panel it would promptly lose its skin/css after the asynch postback. Searched the forums, found a solution that involved hardcoding the telerik javascript include but it didn't seem to work.
Hey Scott Guthrie! Can we get a prop on the dropdownlist control to allow typing instead of the default behavior? =)
In the meantime, I implemented my own with some help from Jonathan Cogley. Note that it uses .NET 2.0 features for registering client script blocks etc. I also stripped out any case sensitivity logic since I don't want it. Being that it inherits from dropdownlist, it plays nice with Atlas, and seems to work just fine Firefox and IE.
Note that it's all case insensitive. Without further ado, here's the control source:
public class TypeableDropDownList : DropDownList
{
private static string functionName = "TypeableDropDownList_OnKeyPress";
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
// define the client-side script
StringBuilder script = new StringBuilder();
script.Append("<script language=\"javascript\" type=\"text/javascript\"> \n");
script.Append(" function " + functionName + "(ddl) \n");
script.Append(" { \n");
script.Append(" var undefined; \n");
script.Append(" if (ddl.searchKeys == undefined) \n");
script.Append(" { \n");
script.Append(" ddl.searchKeys = ''; \n");
script.Append(" } \n\n");
script.Append(" var key = String.fromCharCode(window.event.keyCode); \n");
script.Append(" ddl.searchKeys += key; \n\n");
script.Append(" // convert to lowercase for compare \n");
script.Append(" ddl.searchKeys = ddl.searchKeys.toLowerCase();\n\n");
script.Append(" // loop options to find matches \n");
script.Append(" var optionsLength = ddl.options.length; \n");
script.Append(" for (var n=0; n < optionsLength; n++) \n");
script.Append(" { \n");
script.Append(" var itemText = ddl.options![No [N]](/emoticons/emotion-45.gif)
.text; \n");
script.Append(" // option text should also be lower case \n");
script.Append(" itemText = itemText.toLowerCase();\n");
script.Append(" if (itemText.indexOf(ddl.searchKeys,0) == 0) \n");
script.Append(" { \n");
script.Append(" ddl.selectedIndex = n; \n");
script.Append(" return false; // found it, returning false cancels Microsoft Default \n");
script.Append(" } \n");
script.Append(" } \n\n");
script.Append(" // nothing was found, reset the search string and use the Microsoft Default \n");
script.Append(" dropdownlist.searchKeys = key; \n");
script.Append(" return true; \n");
script.Append(" } \n");
script.Append("</script>");
if(!this.Page.ClientScript.IsClientScriptBlockRegistered(functionName))
{
this.Page.ClientScript.RegisterClientScriptBlock(Type.GetType("System.String"), functionName, script.ToString());
}
this.Attributes.Add("OnKeyPress", "return " + functionName + "(this)");
}
}
