Back to April 2007 I posted about building an ASP.NET AJAX ComboBox. It was an attempt to rewrite a ComboBox Control I made to fulfil certain issues I faced with 3rd Party Controls. One of those issue was performance as most of 3rd Party control are rendering heavy HTML because of extinsive features they put on their controls which I do not need. So This post is supposed to be an extensions to my old post as well as my article about building Simple ASP.NET ComboBox.

Attached to this post is the ASP.NET AJAX ComboBox. The archive is also containing 3 other very simple controls. The controls are developed using ASP.NET AJAX 1.0. Client Side Controls are written using Script#. I've posted earlier about Script# and my experience with it, so feel free to have a look at that post.

Now back to ASP.NET AJAX ComboBox. The control is very simple, you can consider it as composite control of simple ListBox and TextBox, however it doesn't inherit from CompositeControl. It directly inherit from ListControl to support binding out of the box and many other features that do need any to be rewritten.

How to use this simple control? The control has a property called EditingStyle. The property accepts one of the following values:

• DropDownList: Pretty similar to normal DropDownList behavior.
• ComboBox: TextBox is enabled for free text editing. No auto complete is offered.
• DropDownCombo: TextBox is enabled for free text editing, Auto complete is offered for the available list items.

For the look and feel of the control there are few CSS style properties described bellow:

• CssClass: Normal CSS class for the TextBox.
• HoverCssClass: Hover CSS class for the TextBox when mouse goes over it.
• FocusCssClass:Focus CSS class for the TextBox when recieving input focus.
• ReadOnlyCssClass: ReadOnly CSS class, used when the control is in read only state. Note that ReadOnly is different from Enabled property.
  

I did not expose any client side method to public, actually because there are no needed client side methods so far. But there are few properties are exposed as public, I did that for development time use, but never face a case that I needed to use them from client code. These properites represents the DOM Elements of:

• Text box -> get_textBox()
• Drop down image -> get_dropDownImage()
• List control -> get_listBox()

Also there are some useful properties exposed that represents selected item Index,value and text:

• get_selectedIndex() returns integer
• set_selectedIndex(ndx) accepts integer parameter
• get_value() returns selected item value
• get_text() returns text of the TextBox
  

The control expose only one event to develpers. This event is change event of the List Box. The client function name used to handle this event should be set to OnClientChange property of the control. This function should have the following signature

function onClientChange(s,e) {.....}

s parameter is the sender onject, it always hold a reference to the control itself.
e parameter is an EventArgs argument, it is always empty not used in other words currenlty.

So if you wish to access curently selected index of the comboBox you could something similar to this:

   1: function ProductChanged(s,e){ 

   2: alert(s.get_selectedIndex()); 

   3: } 

Now the following is code sample of how to declare the ComboBox.

   1: <cc1:combobox id="ComboBox1" 

   2: EditingStyle="DropDownList" CssClass="textbox" 

   3: HoverCssClass="textboxhover" ReadOnlyCssClass="textboxreadonly" 

   4: FocusCssClass="textboxfocus" OnClientChange="ProductChanged" 

   5: datasourceid="SqlDataSource1" datatextfield="ProductName" datavaluefield="ProductId" runat="server" /> 

.....

   1: <scripttype="text/javascript">
   2:  function ProductChanged(s,e)
   3:  {
   4:      alert(s.get_selectedIndex());
   5:  }
   6:</script> 

There is an issue with this control, that it is missing good design time support so sorry for this, sorry for this!

I think this is all I have in mind now, if I found something important to be mentioned I'm gonna posted as soon as I can. Thanks for all those who supported me by suggestions and testing in my previous version. And sorry if the old one wasn't that much satisfying! hopefully this one would be better.

UPDATE:

1. BUG 01 09 Jan 2008:When placing the control inside a container (DIV, Fieldset etc....) and set positioning to this container, the List Box is not displayed in its approperiate location.
2. BUG 01 FIX 12 Jan 2008: Fixed normally on Opera and IE. FireFox is also fixed with workaround that I cannot guarantee 100% that it is totally fixed. For some reason FF do not calculate position the way IE and Opera do:
   Here is how IE and Opera fix work:

      1: var textBoxBounds = Sys.UI.DomElement.getBounds(this._textBox);

      2: var offsetParent = Sys.UI.DomElement.getLocation(this._textBox.offsetParent);

      3: var x = textBoxBounds.x - (offsetParent.x + 2); //Added extar 2 pix to make the list display exactly underneath the textBox 

      4: var y = (textBoxBounds.y + textBoxBounds.height) - (offsetParent.y + 1); //Same thing as above 

      5: Sys.UI.DomElement.setLocation(this._listBoxContainer, x, y);

3. The above code work perfectly in both IE and Opera but not in FF for some reasons I don't know! So I had to write similar code but I had to increase those extra pixels extra ordinary like this

      1: var x = textBoxBounds.x - (offsetParent.x + 12); //Added extar 2 pix to make the list display exactly underneath the textBox

      2: var y = (textBoxBounds.y + textBoxBounds.height) - (offsetParent.y + 27); //Same thing as above

4. I've tested it and it is working properly, but my test was very fast. Hopfully this bug is fixed. Download attached Project as it contains the fix.
5. Bug 02, fixing Bug 01 caused a bug when placing ComboBox within GridView. The list is not positioned correctly under the TextBox, and actually it flies away.
6. Bug 02, FIX . 6th Feb 2008.
7. New version 1.0.2.1 24th Feb 2008. Support for Tab and Enter key selection. Resolve an issue when only one item is in the list and this item is selected. You type something in TextBox and still that item is selected, now it is being deselect.

SCS.Web.Controls.AJAXv1.1.20.zip (65.55 kb)
SCS.Web.Controls.AJAXv1.0.21.rar (51.87 kb)