ASP.NET ComboBox

Total votes: 4
Views: 199,862
Comments: 64
Category: ASP.NET
Print: Print Article

Please login to rate or to leave a comment.

Published: 16 Feb 2007
By: Muhammad Mosa

The ASP.NET ComboBox is an attempt to try and enhance some of the features of the Normal ASP.NET DropDownList.

Introduction

The ASP.NET ComboBox idea is simple; it is a custom composite control that contains two controls (TextBox, Image). The ComboBox Control inherits directly from System.Web.UI.WebControls.ListControl to inherit all design time capabilities; after all it is a ListControl like all other List Controls such as DropDownList, ListBox, RadioButtonList etc.

ASP.NET ComboBox Control Layout

I've chosen a div to align the ASP.NET ComboBox child controls. The control is rendered as a container div and child controls placed within that container. ASP.NET ComboBox is using the base content rendered by its base class ListControl.

Figure 1. ASP.NET ComboBox Layout

Why did I choose ListControl?

The ListControl by default will render <select> HTML tag element. ASP.NET ComboBox will render its selection options as ListBox control which also inherits from the ListControl, but will allow only one option to be selected. As we are going to simulate a ListBox rendering, a property named Rows is added to ASP.NET ComboBox to limit the number of rows inside the list and it will enable scrolling if the number exceeds the Rows. The ListControl has 90% of my needed functionality implemented and comes with a lightweight viewstate. As for styling, I just need the fore color, background color, Font styles and the Css Class. The ListBox doesn't allow border styles, so even if you try to apply them it will not work.

ASP.NET ComboBox Control JavaScript

Initially the control visibility style is hidden. The visibility is toggled to visible when the TextBox or Image is clicked. In other words, when the first row is clicked. When the ListBox itself is clicked while visible of course the selected item text is displayed on the TextBox and the ListBox is hidden again. The same interaction is done when the Enter or Esc keyboard buttons are pressed. Below are the JavaScript functions used to hide and show ListBox:

Listing 1. JavaScript functions to hide and show list of options

Note: All JavaScript functions are available on ScsComboBoxUtil.js file on the source code attached to the article.

ASP.NET ComboBox Support for AutoPostBack

I didn't try to implement handling for PostBack because it is already implemented in the ListBox or TextBox child controls. So I decided to delegate this to the TextBox control. If you enabled the AutoPostBack Property, and change the selection on the ListBox, the TextBox Text property will set programmatically through the JavaScript. However this will not invoke the onchange client event of the TextBox, so I enforced the onchange client event to fire if the Text is changed on the TextBox.

Listing 2. JavaScript to display selected item text on the TextBox Listing 3. C# code for AutoPostBack overridden property, delegate AutoPostBack to the TextBox Control

Implementing IPostBackDataHandler

It is important to handle the postback data, since this could not be delegated to any child controls; we need to post the selected value as well as the text. Below is the implementation of the IPostBackDataHandler interface.

Listing 4. IPostBackDataHandler implementation

Delegate Properties to child controls

As the ListBox and TextBox have most of the properties needed already implemented, I delegated my needed properties to these controls properties. Some properties are handled by the control itself and not delegated, such as the Rows property.

Listing 5. Property delegation

Implementing PerformDataBinding method

I've added an additional feature to the ASP.NET ComboBox control, this feature enables you to insert a default option at the top of the ListItems. This is simple in case of a declarative list of options, but will require additional handling incase of data binding. Simply before binding data from the data source to the control, I add the default item if enabled to the top and all binded options will be added afterwards.

Listing 6. PerformDataBinding Implementation

protected override void PerformDataBinding(System.Collections.IEnumerable dataSource)
{
  if (dataSource != null)
  {
    bool flag1 = false;
    bool flag2 = false;
    string dataTextField = this.DataTextField;
    string dataValueField = this.DataValueField;
    string dataTextFormatString = this.DataTextFormatString;
    if (!this.AppendDataBoundItems) this.Items.Clear();
    if(EnableDefaultItem)  //Insert Default Item
      this.Items.Insert(0, new ListItem(this.DefaultItemText, this.DefaultItemValue));

ICollection collDataSource = dataSource as ICollection;
    if (collDataSource != null) 
    this.Items.Capacity = collDataSource.Count + this.Items.Count;
    if ((dataTextField.Length != 0) || (dataValueField.Length != 0)) 
      flag1 = true;
    if (dataTextFormatString.Length != 0) flag2 = true;
    foreach (object obj in dataSource)
    {
      ListItem item = new ListItem();
      if (flag1)
      {  
        if (dataTextField.Length > 0)
        {
          item.Text = DataBinder.GetPropertyValue(obj, dataTextField, dataTextFormatString);
        }
        if (dataValueField.Length > 0)
        {
          item.Value = DataBinder.GetPropertyValue(obj, dataValueField, null);
        }
      }
      else
      {
        if (flag2)
        {
          item.Text = string.Format(CultureInfo.CurrentCulture, dataTextFormatString, new object[] { obj });
        }
        else
        {
          item.Text = obj.ToString();
        }
        item.Value = obj.ToString();
      }
      this.Items.Add(item);
    }
  }

if (this.cachedSelectedValue != null)
  {
    int index = -1;
    index = this.FindByValueInternal(this.cachedSelectedValue, true);
    if (index == - 1)
    {
      throw new ArgumentOutOfRangeException("value", String.Format(_selectionOutOfRange, new object[] { this.ID, "SelectedValue" }));
    }
    this.SelectedIndex = index;
    this.cachedSelectedValue = null;
    this.cachedSelectedIndex = -1;
  }
  else if (this.cachedSelectedIndex != -1)
  {
    this.SelectedIndex = this.cachedSelectedIndex;
    this.cachedSelectedIndex = -1;
  }
}

Note: This implmenetation is almost similar to the implementation written in the base PerformDataBinding method in ListControl.

Control Style Support

I'm not going through this point right now, but I'll provide another article that describes how to support special styles for your controls. Basically we need to support the style for TextBox, Image and ListBox child controls. So the control will contain three properties, TextBoxStyle, ListBoxStyle and ImageStyle. In the next article I'll talk about these three properties.

Web Resources

The ASP.NET ComboBox control contains some JavaScript code, this code is wrapped in a ".js" file. The file is added as an embedded resource in the control assembly and the assembly Meta data, this file is marked as Web Resource file.

It worth mentioning also that the Image used in the control is stored as Web Resource too. If you do not provide the ImageUrl property, the control will render its default embedded image. This is commonly used in all third party controls to provide consistent look and feel for their controls.

To read a tip about how to register a file as web resource and render it with your control, please read my blog entry: System.Web.UI.WebResourceAttribute Issue

Control Rendering

I have applied control rendering by overriding the AddAttributesToRender and Render methods. I've also made a helper method to prepare the child controls for rendering. You may refer to the attached download file to see how these methods are implemented.

Listing 7. Render Methods

private void PrepareChildControlsForRender()
{
  _img.Enabled = this.Enabled;
  _txtBox.Enabled = this.Enabled;

//Apply ReadOnly
  _txtBox.ReadOnly = this.ReadOnly;
  string jsNormal1 = String.Format(_jsNormal1, this.TextBoxStyle.CssClass, _txtBox.ClientID);
  string jsHover = String.Format(_jsHover, TextBoxHoverCssClass, _txtBox.ClientID);
  string jsActive = String.Format(_jsActive, TextBoxActiveCssClass, _txtBox.ClientID);
  string jsNormal2 = String.Format(_jsNormal2, this.TextBoxStyle.CssClass, _txtBox.ClientID);

_txtBox.Attributes["onkeydown"] = "if(event.keyCode != 9)return false;";
  _txtBox.Attributes["onmouseover"] = jsHover;
  _txtBox.Attributes["onmouseout"] = jsNormal1;
  _txtBox.Attributes["onfocus"] = jsActive;
  _txtBox.Attributes["onblur"] = jsNormal2;

//Apply Styles
  if (_txtBxStyle != null) _txtBox.ApplyStyle(_txtBxStyle);

_txtBox.Width = this.Width;

if (_imgStyle != null) _img.ApplyStyle(_imgStyle);

_img.ImageUrl = this.ImageUrl;
  _img.ImageAlign = ImageAlign.AbsMiddle;

if (_lstBxStyle != null) this.ApplyStyle(_lstBxStyle);
  if (this.SelectedValue != String.Empty) this.Text = this.SelectedItem.Text;
}

protected override void Render(HtmlTextWriter writer)
{
  if (this.DesignMode)
  {
    EnsureChildControls();
  }

PrepareChildControlsForRender();
  //Render TextBox & Dropdown Image
  writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID);
  writer.AddAttribute(HtmlTextWriterAttribute.Nowrap, "nowrap");
  writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "auto");
  writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "inline");

//Render onclick event handler for ListBox drop down 
  //if the control is Enabled or not ReadOnly
  if (this.Enabled && !this.ReadOnly)
    writer.AddAttribute(HtmlTextWriterAttribute.Onclick, 
    ListBoxShowClientFunction);

writer.RenderBeginTag(HtmlTextWriterTag.Div);
  _txtBox.RenderControl(writer);
  _img.RenderControl(writer);

//Render ListBox Wrapper
  writer.AddAttribute(HtmlTextWriterAttribute.Id, ListBoxWrapperClientID);
  writer.AddStyleAttribute(HtmlTextWriterStyle.Position, "absolute");
  writer.AddStyleAttribute(HtmlTextWriterStyle.Visibility, "hidden");
  writer.AddStyleAttribute(HtmlTextWriterStyle.Top, "-100px");
  writer.AddStyleAttribute(HtmlTextWriterStyle.Left, "-100px");
  writer.RenderBeginTag(HtmlTextWriterTag.Div);

//Render ListBox
  AddAttributesToRender(writer);
  writer.RenderBeginTag(this.TagName);
  base.RenderContents(writer);
  writer.RenderEndTag();

writer.RenderEndTag();
  writer.RenderEndTag();
}

Composite Control Tips

Be sure to create you child control in the CreateChildControls method, and to call EnsureChildControls method before accessing your child controls in any property as shown in the above code, except in the Render method, as in that time all child controls would be created and ready.

Listing 8. Common Implementation for CreateChildControls

Implement the INamingContainer interface

Any control that implements this interface creates a new namespace in which all child control ID attributes are guaranteed to be unique within the entire page. It is interesting to know that this is a marker interface that has no methods or properties to implement.

Design Time and Code Editor support Tips

You'll find that some of the inherited properties are not used, or could be replaced with others. It is better to hide such properties from design time and from code editor. To do this, mark these properties with the following attributes.

Listing 9. Design Time and Code Editor Support

ASP.NET ComboBox What might not be good

The generated HTML of these controls is not 100% supported with Opera or other browsers, I've tested it with Opera, it is working but sometimes the behavior is not as expected. Also the positioned list box under the text box, sometimes is not 100% accurate. You may find some other issues as it has not tested thorouhly as it should be. I've added it to a production project and it didn't so far present in issues.

Conclusion:

The ASP.NET ComboBox is a simple control that is built to satisfy specific needs. It doesn't include many of the advanced features available in third party controls. It is based on the simple idea to hide the ListBox under the TextBox, and to show it only on demand. It can be enhanced to support auto suggest e.g. you type the first characters of the word and the ListBox automatically selects the first match. It also doesn't support multi column drop downs, which could be another enhancement. For bugs or enhancement, kindly contact me at mohammed_moses@yahoo.co.uk

Downloads

ASP.NET ComboBox Version 1.51
ASP.NET ComboBox Version 1.5
ASP.NET ComboBox Version 1.0

History

Version 1.5:
- Drop down list is only displayed when the drop down arrow is clicked
- Text box is enabled to enter free text by setting ScsComboBox.EnableFreeText Property
- Support for key board up and down
- Support for auto complete by searching the drop down list for match (type text and press tab key)
- Javascript error when placed inside GridView
- Drop down Image not displayed when placed inside GridView
version 1.0:
- Initial Release

<< Previous Article

Continue reading and see our next or previous articles

Next Article >>

About Muhammad Mosa

Sorry, no bio is available

This author has published 8 articles on DotNetSlackers. View other articles or the complete profile here.

You might also be interested in the following related blog posts

WPF DataGrid as ComboBox Dropdown read more
Multiple-Selection ComboBox for Silverlight read more
WPF Release History : Q2 2009 (version 2009.2.701) read more
ASP.NET combobox dropdownlist with images read more
How to Customize the New AjaxControlToolkit Tools read more
Silverlight Release History : Q2 2009 (version 2009.2.701) read more
Reporting Release History : Q2 2009 SP1 (version 3.1.9.807) read more
ORM Release History : Q2 2009 (2009.2.701.5) read more
Menu Merge (RadControls for WinForms) read more
A Default Command for Silverlight read more

Top

Discussion

Subject	Author	Date
Right to left issues	Ariel R	6/3/2007 11:39 AM
Hey, i downloded your solution and it was just what i was looking for! thank you very much for that!! my problem is that since i am working in another language and my entire site direction is set to rtl (right to left) the control is going crazy and the list is not aligned with the textbox. i tried playing with the positioning in the javascript file but with not much success so far. maybe you'll have a better solution for it... thanks! Reply \| Permanent link
Firefox compatibility problem	Ariel R	6/4/2007 3:19 AM
hi again, i solved my right to left problem but now i found out that the control does not function when using firefox. are you aware of that? and if so, is there a possibility that you will fixing it? Reply \| Permanent link
FireFox issue	Muhammad Mosa	6/4/2007 7:52 AM
Yes I know that, I tested it. that is because of I'm using fireEvent which is not supported by FF Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
RE: FireFox issue	Ravindra Thakur	12/24/2007 11:16 AM
Hello Muhammand Mosa, I am trying to use your autocomplete dropdown, It work fine in IE but problem in Firefox. I spent much time to solve this problem, but i am not able to solve this problem. I have read all issue of firefox but exact problem is that when we attach a event from c# code, it attach for IE but problem in firefox. When i simply attach an attribute like private const string _jsListBoxShow = "javascript:alert('Thakur');"; it work in both IE & Firefox but when i give the argument then firefox doesn't support argument. Please solve the problem as soon as posible. and I am also trying to solve this problem. private const string _jsListBoxShow = "ScsComboBox_ListBoxShow({0},{1});"; Reply \| Permanent link
Firefox compatibility problem	Ariel R	6/4/2007 9:40 AM
I am not that familier with java script, can you maybe think of a way to overcome this problem? Reply \| Permanent link
Firefox compatibility problem	Ariel R	6/5/2007 3:56 AM
Hey Muhammad. i tried replacing the fire events with this: var clickEvent = window.document.createEvent("MouseEvent"); clickEvent.initEvent("click", false, true); [control].dispatchEvent(clickEvent); and it still doesn't work in firefox. i get the following error: cmbCats_Wrapper is not defined onclick(click clientX=0, clientY=0) do you have any idea what might be the problem? Reply \| Permanent link
FF Issue	Muhammad Mosa	6/5/2007 4:10 AM
I'm not very familier wiht FF. I'll need sometime to have a look at its compatible Javascript code. Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Firefox problem	Yao Rb	12/19/2009 3:22 PM
hi Muhammad Mosa, i use your code, and find it not work well in firefox, i find that may be your script is error, i change your code ScsComboBox_ListBoxShow(txtBxWrapper, lstBxWrapper) to function ScsComboBox_ListBoxShow(txtBxWrapper, lstBxWrapper) { var objTxtBxWrapper = document.getElementById(txtBxWrapper); var objLstBxWrapper = document.getElementById(lstBxWrapper); if (objLstBxWrapper.style.visibility == "visible") { ScsComboBox_ListBoxHide(lstBxWrapper); return; } var pos = findPos(objTxtBxWrapper); var top = pos[1]; var left = pos[0]; //objLstBxWrapper.style.left = left + 1; //objLstBxWrapper.style.top = top + objTxtBxWrapper.offsetHeight; objLstBxWrapper.style.visibility = "visible"; objLstBxWrapper.all[0].focus(); //objLstBxWrapper.all[0].style.width = objTxtBxWrapper.offsetWidth; } in server side : make private const string JSListBoxShow = "ScsComboBox_ListBoxShow({0},{1});"; to : private const string JSListBoxShow = "ScsComboBox_ListBoxShow('{0}','{1}');"; then firefox can work, so i think you should check your script code. Reply \| Permanent link
Firefox compatibility problem	Ariel R	6/8/2007 9:36 AM
Hi Muhammad. Thanks. I appreciate it! Reply \| Permanent link
TextBox updates not working and Code changes	Chris Porter	6/19/2007 12:56 PM
I've tried this code in both a GridView and a FormView and changes to the dropdown selection do update properly but if I type something into the textbox, it is ignored during the update. I'm attempting to use debug to trace the process and figure out the issue but I wanted to see if anyone else had the text entry working properly. I made a the following changes to the code (in another code set, not the one I'm having the update issues with): =========================== = ScsComboBox.cs Line 910 = =========================== _txtBox.Width = this.Width; =========================== ========= becomes ========= =========================== if (Convert.ToInt32(this.Width.Value) > 23) { _txtBox.Width = Unit.Pixel(Convert.ToInt32(this.Width.Value) - 23); } else { _txtBox.Width = this.Width; } =========================== This change will downsize the control to its actual outsize width. Normally the width size applies to the textbox control making the control much larger than its exterior size once it is resized to fit the downarrow. =========================== = ScsComboBox.cs Line 968 = =========================== writer.RenderBeginTag(HtmlTextWriterTag.Div); =========================== ========= becomes ========= =========================== writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "#A5ACB2"); writer.AddStyleAttribute(HtmlTextWriterStyle.BorderStyle, "solid"); writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "1px"); writer.RenderBeginTag(HtmlTextWriterTag.Div); _txtBox.BorderColor = System.Drawing.Color.White; _txtBox.BorderStyle = BorderStyle.Solid; _txtBox.BorderWidth = 1; =========================== This change will move the visible border from the outside div instead of the textbox. This gives the control the appearance of an actual ComboBox in WinForms. This does not work in FF. =========================== ====== DropArrow.gif ====== =========================== I used photoshop to grab the 2 Reply \| Permanent link
Ouch, comments are hard to read when posted... Let me try this	Chris Porter	6/19/2007 12:57 PM
=========================== ====== DropArrow.gif ====== =========================== I used photoshop to grab the 20 pixel high image from a dropdown list and used it to replace the 19 pixel high image included in this project. This makes the control look more like a WinForm ComboBox. Reply \| Permanent link
The first code changes (sorry for the order)	Chris Porter	6/19/2007 12:59 PM
I made a the following changes to the code (in another code set, not the one I'm having the update issues with): =========================== = ScsComboBox.cs Line 910 = =========================== _txtBox.Width = this.Width; =========================== ========= becomes ========= =========================== if (Convert.ToInt32(this.Width.Value) > 23) { _txtBox.Width = Unit.Pixel(Convert.ToInt32(this.Width.Value) - 23); } else { _txtBox.Width = this.Width; } =========================== This change will downsize the control to its actual outsize width. Normally the width size applies to the textbox control making the control much larger than its exterior size once it is resized to fit the downarrow. Reply \| Permanent link
The second code change	Chris Porter	6/19/2007 12:59 PM
=========================== = ScsComboBox.cs Line 968 = =========================== writer.RenderBeginTag(HtmlTextWriterTag.Div); =========================== ========= becomes ========= =========================== writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "#A5ACB2"); writer.AddStyleAttribute(HtmlTextWriterStyle.BorderStyle, "solid"); writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "1px"); writer.RenderBeginTag(HtmlTextWriterTag.Div); _txtBox.BorderColor = System.Drawing.Color.White; _txtBox.BorderStyle = BorderStyle.Solid; _txtBox.BorderWidth = 1; =========================== This change will move the visible border from the outside div instead of the textbox. This gives the control the appearance of an actual ComboBox in WinForms. This does not work in FF. Reply \| Permanent link
TextBox text changes not being updated	Chris Porter	6/19/2007 1:01 PM
(please feel free to delete my previous combined post) I've tried this code (1.51, not my updated code) in both a GridView and a FormView and changes to the dropdown selection do update properly but if I type something into the textbox, it is ignored during the update. I'm attempting to use debug to trace the process and figure out the issue but I wanted to see if anyone else had the text entry working properly. Reply \| Permanent link
Fixed	Chris Porter	6/19/2007 5:13 PM
I worked with Muhammad to come up with a solution to this issue and I was able to fix it. The issue with TextBox changes is that onPostBack, the DataBind uses the SelectedValue of the ListBox regardless of what changes were made to the TextBox. I put in code to see if the TextBox.Text value is different from the SelectedText and if it is, add a new ListItem with the TextBox.Text value and set it as the SelectedValue. I also added in code to better handle a value that is not in the ListBox's DataSource. In this event, the value is put into a new ListItem with an index of 0. I've sent him the code to review and add to his code if it looks good to him. I also put in the border and image changes to make the appearance more closely match a ComboBox/DropDownList. Reply \| Permanent link
New version soon	Muhammad Mosa	6/20/2007 3:39 AM
Thanks so much to Chris Porter. Actually he guided me to fix some issues as well as he made his own modifications. In cooperation with him, I think we'll put another version after finalizing the code. Thanks Chris for your cooperation Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
RE: New version soon	Ketaki Pore	12/23/2007 5:29 AM
When is the new version coming up? Also i am facing issues with Textbox typed data is not getting maintained on postback. Thanks, Ketaki Reply \| Permanent link
RE: New version soon	Ketaki Pore	12/23/2007 5:29 AM
When is the new version coming up? Also i am facing issues with Textbox typed data is not getting maintained on postback. Thanks, Ketaki Reply \| Permanent link
Firefox issues	Ariel R	6/20/2007 3:48 AM
hey Muhammad, i finally managed to get the control to work in Firefox, i will send you the code to your email. only problem i have now is that when i open the dropdown list in FF it hides under another div and you cannot fully see it. The problem is with the Zindex but i have not been able to fix it so far. Reply \| Permanent link
I got it Ariel	Muhammad Mosa	6/20/2007 4:35 AM
Well, I'll check it with FF and combine your code with mine and Chris to see what we can come out with. Thanks Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Abs Positioning	Michael Cofer	7/9/2007 5:13 PM
I'v been looking for a aspnet combobox that works inside a updatepanel. This is great thanks. But I am having trouble geeting abs-position to work. Do i need to place the control inside a div or panel? Reply \| Permanent link
Re Abs Positioning	Muhammad Mosa	7/10/2007 8:12 AM
No you don't have to! but I'm not sure what is your issue is about?! anyway, could send me your e-mail to send my latest version so you can check it out! Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Can not enter Text	Suhas Ghorpadkar	7/23/2007 5:54 PM
I still can not enter text into the textbox. What do I need to do? Thank you. Reply \| Permanent link
AutoComplete without pressing Tab	Bob Boffin	9/5/2007 6:04 AM
Thanks for this very useful control Mohammad. I wanted to avoid having to use the Tab key to cause the currently selected item's text to display so I have added the following code after the lstBx.selectedIndex = i; statement in ScsComboBox_TextBoxKeyup txtBx.value = lstBx.options[lstBx.selectedIndex].text; var tRange = txtBx.createTextRange(); tRange.moveStart("character", part.length); tRange.moveEnd("character", txtBx.value.length - 1); tRange.select(); The effect of this is that the part of the text from the listbox that matches the characters typed in so far is shown normally while the rest of the text is highlighted. When you type the next character this replaces the highlighted text and the search is repeated using the non highlighted characters. I have also removed the addition of the onkeydown script that checks for the Tab character when EnableFreeText is true and allowed the Tab character through (return true;) in ScsComboBox_TextBoxKeyup. This means that the Tab key now operates normally and autocomplete operates broadly in line with a typical Windows combo box. Reply \| Permanent link
listbox position	Greg Brotzge	9/11/2007 11:34 AM
First of all, thanks much for this control, I've looked for days for a good combo box before finding this one It works great for me on a typical page, but when I use the control in a content page of a master/content page scenario the list box appears way off to the right and below the text box. It may help you to know, I think the width between the left edge of my content page and the left side of the screen, and the number of pixels between the textbox and the listbox is the same. Same goes for the height. So it looks pretty obvious that the master page is interfering somehow with the javascript positioning. I wish I knew javascript so I could fix it myself! :) Thanks Reply \| Permanent link
RE: listbox position	Muhammad Mosa	9/11/2007 11:57 AM
Dear Greg, I've tested this with Master Page and it was working fine. if you could send me your page code so I can look at it. My contact is mentioned above at the end of the article. And kindly be patience as I'm busy these days with few things. Thank you Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
RE: RE: listbox position	Greg Brotzge	9/12/2007 10:45 AM
Thanks for your quick reply. Once I knew there was no problem with master pages I looked around for other causes. On my master page I was wrapping the content page with a div that was relative positioned. When I took off the relative positioning the control worked great. I'm not sure why it was relative positioned in the first place really... Reply \| Permanent link
TabIndex	Rhajjie Yap	10/19/2007 3:06 AM
Hi, theres a tabindex property but how does it works? thanks...i try to set the tabindex but it seems not working... Reply \| Permanent link
RE: TabIndex	Anderson Rocha	11/8/2007 7:52 AM
Hi, if you find solution for tabindex problem, please contact me. anderllr@hotmail.com thanks. Reply \| Permanent link
VB version?	Pong Ting	12/5/2007 4:34 AM
It is a great tool! But any VB version code?? Reply \| Permanent link
RE: VB Version	Muhammad Mosa	12/5/2007 5:08 AM
Oh, so far I don't have one! sorry. Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Autocomplete not work	Pong Ting	12/5/2007 10:22 PM
I can bind the data from the db in the list but Y I cannot key in the text and autocomplete in the textbox?? Anything need to set? Reply \| Permanent link
Javascript error	Keith Smith	5/3/2007 12:52 PM
Lokks like a nice custom control but I get a Javascript error on my .aspx page. Specifically _activeComboBoxTextBox is undefined. Does the control like being within a table? I put it initially within a table only to get the above error. I then moved it into a View control and got the same error but this time the first item of the control said [Please select]. The error occurs when the mouseover event is triggered i.e. when I move the cursor over the control it generates the error. Any help would be appreciated. wallahhonky Reply \| Permanent link
CSS positioning of element containing the ComboBox	Gary Momenee	1/8/2008 6:57 PM
I see two topics in the discussion that bring up the same problem, which, as far as I can tell, has not been fixed. The topics are "Abs Positioning" and "listbox position". The problem is caused by the ComboBox being placed inside an element that uses css positioning. For example, if you put the ComboBox inside a fieldset or table and position the containing element absolutely, say top: 20px; left: 20px, then the ComboBox inherits these values in relation to the textbox. Does anyone have a remedy other than to not use css positioning? Reply \| Permanent link
RE: CSS positioning of element containing the ComboBox	Muhammad Mosa	1/11/2008 8:52 PM
I've fixed this bug recently in the newly ASP.NET AJAX ComboBox http://dotnetslackers.com/community/blogs/mosessaur/archive/2008/01/07/asp-net-ajax-combobox.aspx Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
ASP.NET AJAX ComboBox	Muhammad Mosa	1/8/2008 9:02 PM
Dear all checkout the latest version of the ComboBox. Most of old issues is resolved on latest version that support ASP.NET AJAX and actually built with it ASP.NET AJAX ComboBox Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
ASP.NET AJAX ComboBox	Muhammad Mosa	1/8/2008 9:03 PM
Dear all checkout the latest version of the ComboBox. Most of old issues is resolved on latest version that support ASP.NET AJAX and actually built with it: http://dotnetslackers.com/community/blogs/mosessaur/archive/2008/01/07/asp-net-ajax-combobox.aspx Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Update on using this control	Keith Smith	5/5/2007 2:46 AM
I've managed to get rid of the Javascript error. I hadn't compiled the two resources - droparrow.gif and ScsComboBoxUtil.js correctly into the dll assembly using csc at the sdk command prompt. I suspect it was something to do with incorrect casing of the namespaces. Now the control displays correctly(?) on the page within table tag but whilst the listbox part is filled from the datasource OK, when I come to insert text I find that the focus will NOT remain within the textbox - it keeps selecting the top item of the listbox underneath. At the moment all I have is a glorified listbox and I cannot add any text myself. The Javascript itself may need tweaking - any ideas? Reply \| Permanent link
TabIndex is not working	Muthu Krishnan	2/14/2008 4:50 AM
Mohammed really good work. everything clear but the tabindex is not working. please advice Reply \| Permanent link
RE: TabIndex is not working	Muhammad Mosa	2/14/2008 6:45 AM
Muthu, could you please try the new version that based on ASP.NET AJAX. I guess tab index was forgotten to be supported. but I would do that if it is missing in the new version Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
RE: RE: TabIndex is not working	Muthu Krishnan	2/15/2008 6:52 AM
where is the link buddy? Reply \| Permanent link
Facing same problem	CARLOS AGUSTÍN	5/5/2007 8:48 PM
Yes I cannot also editing or insert text in the text box, but I noticed this line in your code: _txtBox.Attributes["onkeydown"] = "if(event.keyCode != 9)return false;"; When I commented this line I was able to enter text.. but did you support autocomplete to select item from the dropdownlist?! Thanks Reply \| Permanent link
Sorry for being late	Muhammad Mosa	5/6/2007 8:43 AM
Well the current implementation which is posted on this article is doesn't support AutoComplete or writing free text on the text box. But I made another version which support that, you can contact me through e-mail so I can send you the new version I have And I'll try to post the update on the article. Sorry again for being late to reply Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Update on control	Keith Smith	5/6/2007 5:32 PM
Yes I did the same as Carlos - commenting out _txtBox.Attributes in the .cs file allowed me to insert text into the textbox. However, what I didn't like was that as soon as I put the I beam into the textbox, the listbox would open to show its contents. This is not very 'user friendly' and not what you would expect it to do. After all when you click on the dropdown arrow do you expect the I beam to populate the textbox? No you click on the dropdown arrow to see the items within the control and then make a selection. In addition, inserting text into the textbox only inserts -1 into the database which isn't what is needed. Reply \| Permanent link
Thanks for the hints Smith	Muhammad Mosa	5/7/2007 9:31 AM
Thanks a lot Smith. Actually I'm not very familier in UI experiance. and about -1 issue, you can get the text from your text box by using Text Property not Value Property. So let me summarize your comments: 1)DropDownList should only opened when you click the arrow button. 2)When click on the arrow, the focus should go to the DropDownList not to the TextBox. I'll work to update this. Thanks once again for your hints Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
The Text Value gets ost when some item is selected in the combo	Hemangajit Dutta	5/29/2008 10:16 AM
Hi, Thanks for such a nice control in web. I found it very useful, however running into one issue. When I select some item in the combo and then do a postback of the page, then the Text value always returns blank. But if we directly type in some string in the combo and do a postback, the Text value returns the string that we typed. Can you please provide me suggestion how as to retain the Text value when we select a item in the combo. The Text value should the the selected text of the combo in this case. Thanks Hemangajit Reply \| Permanent link
Update on control	Keith Smith	5/8/2007 2:56 AM
Yes, Muhammad - I did like the control at first but the usability issue was a problem with my test page. When I clicked the textbox it opened the listbox. I would type in a piece of text and then try to move to the next textbox on my form. However the listbox retained focus and covered my textbox so I couldn't enter text in this textbox. What I had to do was click on the first item in the listbox, which I had set as a blank string using DefaultItemtext, which then REMOVED the text string I had already entered in the textbox. So, I had to keep entering the text string again before I could then go down the next textbox on my form. You can imagine how frustrating that would be in a production environment. I know I could have started off by clicking the listbox, then the first blank item and then key in the text but users don't think logically Muhammad. Reply \| Permanent link
I'll work on updates	Muhammad Mosa	5/8/2007 7:18 AM
Smith, I'll work on your comments! and update the controls. hopfuly this will be soon. Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Combo - Listbox stlye	Lay Lim	7/22/2008 7:34 PM
Hi Muhammad I wondered if you could assist me. I am trying to use the combo component that you created (version 2008-01-07) and everything works fine. However, how can i change the styling for the listbox to flat? Example: http://www.obout.com/combobox/aspnet_combobox_mode.aspx I really appreciated if you could assist me. Thank you so much in advance Reply \| Permanent link
RE: Combo - Listbox stlye	Muhammad Mosa	7/23/2008 5:23 AM
Actually you can't :( the reason is because every browser treat listbox styles in different ways. For example, IE will not apply "border: solid 1px black" style to the list box. It will not be flat as you wish. But this is different in Opera. I tried to do that but I faild. The reason that other comboboxes successful to do that is that they use DIVs to display items. but my idea was to use ListBox. Its been a long time I didn't update this control and it has few bugs. I hope that I get sometime to tweak it. Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
RE: RE: Combo - Listbox stlye	Lay Lim	7/23/2008 6:56 PM
Thanks for replying my post. Well, please let me know if you do come up with a new version for the control . At the moment, feature and functionality wise are doing great in my app. Anyway, once again...thanks :) Reply \| Permanent link
ASP.NET AJAX ComboBox Page	asdfg1as	8/12/2008 1:47 PM
Don't know if it's just me, but the attached file on the AJAX ComboBox post doesn't seem to be a valid archive file (WinZip gives this error when opening the file and then shows that there's nothing in the archive). I'd post this in the comments on that page, but it seems that I can't see any comments or post any. This happens when I'm logged in and when I'm logged out. Reply \| Permanent link
Update on new version of the control	Keith Smith	5/17/2007 10:34 AM
Hmm - been playing around with the new version 1.5. Put it into an EditItemTemplate within a GridView and it's acting bizarrely. Sometimes it will render correctly with the arrow and the box is populated with items from the database. Other times it doesn't display the .gif and only the first item is displayed. Moving or clicking produces a Javascript error - something really useful like 'Object not found at line 242'. Any ideas Muhammad off the top of your head? Reply \| Permanent link
I'll Check that up	Muhammad Mosa	5/17/2007 11:22 AM
Smith, again thank you a lot. I'll check that up and try to apply your scenario using GridView. I think by saturday I may comeup with an answer or a resolution. Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Fixed!	Muhammad Mosa	5/17/2007 3:46 PM
Hey Keith Smith, I've fixed the issue you've came up with. It was my mistake. To resolve this: Inside ScsComboBox.cs file location OnPagePreLoad method and cut this code: Page.ClientScript.RegisterClientScriptResource(this.GetType(), "SCS.WebControls.Scripts.ScsComboBoxUtil.js"); if (String.IsNullOrEmpty(this.ImageUrl)) { this.ImageUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "SCS.WebControls.DropDownImage.DropArrow.gif"); } Now override OnPreRender method of the control and place the above code on it like this: protected override void OnPreRender(EventArgs e) { Page.ClientScript.RegisterClientScriptResource(this.GetType(), "SCS.WebControls.Scripts.ScsComboBoxUtil.js"); if (String.IsNullOrEmpty(this.ImageUrl)) { this.ImageUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "SCS.WebControls.DropDownImage.DropArrow.gif"); } base.OnPreRender(e); } Hope this will help I think an update of the source code will be published soon Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
ComboBox and EditItem template	Keith Smith	5/22/2007 9:23 AM
Managed to get the control to render correctly within the EditItem template of my Gridview - well, almost but see at the bottom. The combobox doesn't work straight out of the box when it is placed within such a template. You can pull the data from the database into the control using DefaultItemText='<%#Eval("source")%>' but when you click the update button to push the data back to the database all you get is ...'could not find a non-generic method '....' that has parameters: resultdate...', etc, etc. One solution is define a SessionParameter and place it in the section - something like - and then assign the Session variable cmbEditSource from within the OnRowCommand event for the Gridview. dim index as integer dim row as gridviewrow row = gridview.Rows(index) If (e.CommandName = "Update") then Dim cmbEditSource as ScsComboBox = CType(row.Cells(3).Controls(1), ScsComboBox) Then use an If..End if block to set the Session variable so that Session("cmbEditSource") = cmbEditSource.Text or cmbEditSource.SelectedItem.Text etc, etc depending on whether the user has clicked on an item in the listbox or just entered some text. This works OK but two usability problems still raise their head Muhammad. First setting the TextBoxStyle-CssClass property of the control inline seems to be a bit flaky within the EditItem template. I set mine to 200pixels within a stylesheet and when I went to click on the droparrow.gif the control resized itself down to about 150px! Finally clicking the droparrow.gif suitably exposes the listbox but surprisingly clicking the arrow again doesn't roll up the box, contrary to the usual behaviour of dropdownlist boxes. Reply \| Permanent link
RE: ComboBox and EditItem template	Muhammad Mosa	2/15/2008 8:47 AM
Checkout the new version, it is working fine. http://dotnetslackers.com/community/blogs/mosessaur/archive/2008/01/07/asp-net-ajax-combobox.aspx Muhammad M. Mosa Soliman Software Engineer Reply \| Permanent link
Firefox and Google crome Issue	Ramesh Nagineni	1/10/2009 11:34 AM
Hi I integarted this control in my application .. whatever u propvding sample appication working fine all the browres onece integardting this control in my application ..In firefox..dropdown image showing..not propely ( i mean not at exact position..)first its shwoing textbox and at next line shoing dropdown img.. Shall I send the Imgs to ur mail or sample code for u? can u provide me mail plz... thanks & regrads ramesh Reply \| Permanent link
RE: Firefox and Google crome Issue	Ramesh Nagineni	1/10/2009 11:37 AM
Hi shall I send the Images (whatever I got the issues in firefox and google crome ) to this mail mohammed_moses@yahoo.co.uk can u give me confirmation to send the mail to u...? Thanks rammesh Reply \| Permanent link
Firefox Wrapper not defined	Sfdfhkls Fsdkhfks	3/27/2009 8:52 AM
The following error occurs in FireFox when clicking the dropdown box: Error: ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper is not defined Source File: http://localhost:1981/user_area.aspx Line: 1 I suspect this is due to ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper being referenced within itself: [simplified version of the code] <div id = " ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper "> ScsComboBox_ListBoxShow(ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper) </div> I beleive that changing these references to this should work. I am currently attempting a workaround, has no one else noticed this problem? Reply \| Permanent link
Firefox Wrapper not defined	Sfdfhkls Fsdkhfks	3/27/2009 8:52 AM
The following error occurs in FireFox when clicking the dropdown box: Error: ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper is not defined Source File: http://localhost:1981/user_area.aspx Line: 1 I suspect this is due to ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper being referenced within itself: [simplified version of the code] <div id = " ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper "> ScsComboBox_ListBoxShow(ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper) </div> I beleive that changing these references to this should work. I am currently attempting a workaround, has no one else noticed this problem? Reply \| Permanent link
Firefox Wrapper not defined	Sfdfhkls Fsdkhfks	3/27/2009 8:52 AM
The following error occurs in FireFox when clicking the dropdown box: Error: ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper is not defined Source File: http://localhost:1981/user_area.aspx Line: 1 I suspect this is due to ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper being referenced within itself: [simplified version of the code] <div id = " ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper "> ScsComboBox_ListBoxShow(ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper) </div> I beleive that changing these references to this should work. I am currently attempting a workaround, has no one else noticed this problem? Reply \| Permanent link
Firefox Wrapper not defined	Sfdfhkls Fsdkhfks	3/27/2009 8:52 AM
The following error occurs in FireFox when clicking the dropdown box: Error: ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper is not defined Source File: http://localhost:1981/user_area.aspx Line: 1 I suspect this is due to ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper being referenced within itself: [simplified version of the code] <div id = " ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper "> ScsComboBox_ListBoxShow(ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper) </div> I beleive that changing these references to this should work. I am currently attempting a workaround, has no one else noticed this problem? Reply \| Permanent link
Firefox Wrapper not defined	Sfdfhkls Fsdkhfks	3/27/2009 8:53 AM
The following error occurs in FireFox when clicking the dropdown box: Error: ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper is not defined Source File: http://localhost:1981/user_area.aspx Line: 1 I suspect this is due to ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper being referenced within itself: [simplified version of the code] <div id = " ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper "> ScsComboBox_ListBoxShow(ctl00_ContentPlaceHolder1_ComboBoxCompany_Wrapper) </div> I beleive that changing these references to this should work. I am currently attempting a workaround, has no one else noticed this problem? Reply \| Permanent link

Please login to rate or to leave a comment.

Login

Lost Password?