Monday, November 17, 2008

Pin It

Widgets

Multiple Selection Dropdown for ASP.net 2.0

It seems there is a large void out there for simple asp controls which provide multi-select combo box functionality.

As no control exists within the framework (or web standards), we have to create our own, through a combination of javascript and CSS.

I spent quite a while searching, and couldn't find anything free that worked well, (or even any good looking non-free controls) so I created my own.

I've created a custom web control, derived from a combobox, which supports databinding, and can easily be dropped onto your page in place of a normal drop down box. The main difference being that mine has checkboxes next to each list item, and returns the text value as a delimited list of selected items.

The screen shot is taken from IE7 in Vista, and the page is being rendered in Quirks mode (Transitional actually, the asp2.0 default)

There are some irritating hurdles to overcome matching the look between quirks and strict mode rendering, as of now, the best solution I have is a design-time boolean property to choose, I'll implement this in the coming days.

Here's a shot in design view, showing databinding support:

Status:

Currently IE6 and IE7 render properly in quirks mode.

Firefox renders properly, but the javascript has fewer features currently.
Grab the binary from http://www.xmilk.com/files/dropcheck.dll- All the scripts/image are embedded resources.

Grab the VS2005 project with sample from http://www.xmilk.com/files/dropcheck.zip - Excuse the mess of code for a few more weeks!

Please comment here if you find this useful, or make any enhancements, and let me know what you see missing! I'll be flushing out the more obvious features in the coming weeks, such as more theming support, better firefox support, etc.

If you'd like to use this for any corporate/commercial purposes, get in touch with me first!

Known Issues:

* No property to change delimiter
* Fixed border styling doesn't match default vista rendering of text boxes
* Can't change drop down image
* Ability to set maximum height of drop down box. Anything past this height is displayed via scrolling. This determines how many check boxes are shown before scrolling is enabled. Use the MaxDropDownHeight property.
* Code cleaned up slightly, with some comments added.
* Enable AutoPostBack works. You can catch the selected-index-changed event. Your not actually catching a new selected index, but you can get the new text value in the event. This works even if you have several instances of the control on your page.
* Added public property: "TransitionalMode". If enabled, the control renders properly in XHTML Transitional Doctype, (standard), if disabled, it renders properly in quirks mode. Basically, if it seems to be rendering wrong, change this property.
* Added scrollbars to drop-down pane if too many options are present.

3 comments:

Unknown said...

Hello, your control has issues on when you populate data that does not have closing parenthesis ? Specially for truncated productname values :
e.g. "SAMPLE DATA (TESTIN"
Can you fix these and what are the terms to use your control ?

Anonymous said...

Awesome Post

Nancy said...

I so much believe in the power of hackers cause i have tested there phone hack service so many times with access proof and it always come out successfully without any troubles. Thank you Contact: elizabethjone146@gmail.com
WhatsApp +18572012269
being the best to us all best hacker