Introduction

The developer community has come across many scenarios where the customer would like to make multiple choices and the developer wishes to make intelligent usage of screen space. The objective of "multi select drop down list" (MSDD) control is to allow the user to select multiple options as in a check box list that behaves like a dropdown list. The multi select dropdown list (MSDD) will consume the space as of a dropdown list and deliver the functionality of a Check Box list.

Motivation Factor

By default, the .NET web programmers go by using the ListBox control with multi select option or the checkbox list. No doubt many of us would have felt the need to integrate the dropdown list and the checklist box. We have done just that in this article.

Features

This user control is built using C# as server side and JavaScript for client side scripting. The following lists the unique features:

Ability to select multiple items

Ability to attach JavaScript functions to check/uncheck events

Higher z-index compared to the other web controls such as Listbox and dropdown which have relatively higher Z-index than the normal web controls. This prevents the Listbox/dropdown list in a page overriding the multi select dropdown panel.

Highlight property - highlights the item when the mouse hovers over the item. The highlight color is fixed

Filter property - moves to the item with the alphabet keyed, only when the scroll bar appears

About the Control

Important Properties

Client scripts can be added using attributes to the control

The selected items can be read as either comma separated values or as array list. The selected items will also be displayed by the tooltip.

The text "All" and "Please select" will be displayed when all the options are selected or none selected respectively.

Hooking the event handlers.

Usage Flow

Initialising the Control

The control has to be initialized on page load, if the properties size, colors, etc. are set at runtime rather than at design time.

privatevoid InitialiseDropDownControls()
{
// To set the background colors
// multiselect_foodItems.TextBoxBackColor =
System.Drawing.Color.FromName("#FFFFE6");
// multiselect_foodItems.DropDownBackColor = System.Drawing.Color.Aqua;
// Set the height and width of dropdown controls.
// The default size is set in pixels.
multiselect_foodItems.Width = 160;
multiselect_foodItems.Height = 15;
multiselect_Juices.Width = 160;
multiselect_Juices.Height= 15;
//Any attributes to be added to the checkboxlist.
//These events will be performed ahead of the default events that come with the control
multiselect_foodItems.AddAttribute("onclick", "alert('test');");
}

Setting the Datasource

The multiselect drop-down supports the dataset and the list items as the data source. It is not yet tested with other data sources such as object, XML, etc.

Attaching Scripts

The JavaScript functions can be attached to the check/uncheck event as follows:

multiselect_foodItems.AddAttribute("onclick", "alert('test');");

Any events that are added to the default events (those that come along with the control such as the "onclick" event) will be performed after the default event. This will help the user to perform actions apart from the defaults. For e.g.: Enable another control based on the value selected.

Collapse dropdown

The dropdown opens up when user clicks anywhere on the control and is hidden when the user clicks anywhere outside the control.

Events

The server side event handler for checkbox selected item change has been provided. The event has to be hooked on the containing class as follows:

multiselect_Juices_OnMSDDSelectedIndexChanged is the method that will be invoked on the event.

Changing the Highlight Color

If the user is interested in changing the highlight color, he can do so in the style sheet class itemSelected.

Challenges Faced

Why CheckBoxList Rather than Adding the HTML Checkbox at Runtime?

Initially, we thought of constructing a dynamic checkbox within a div on the server side and display/hide the div on click events. However, we realized that we will have problems in retaining state, for server side operations and will need to loop through the items when bound to the dataobjects. Hence, the checkbox list was chosen which will make things easier.

Attributes of ListItem

In .NET Frameworks 1.0 and 1.1, the attributes added to the listitem are not rendered. This is a bug with all the controls using the listitem. This had to be circumvented while the page is rendered. In .NET Framework 2.0, this has been rectified and the attributes of the listitem are rendered. However, when the dataset or any other datasource is bound to the checkbox list, item highlight "onmouseover" and to check/uncheck items when clicked anywhere on the item (not specifically on the label/checkbox) will need to be handled while the control is rendered.

Positioning of the CheckBoxList

The positioning of the checkbox list to be in alignment with the textbox has been calculated based on the offsetLeft of all its parents, but cannot be guaranteed for accuracy in all cases. For proper positioning, if the control is placed inside HTML tables, remember to set the cellpadding and cellspacing attributes. When these attributes are set to values other than zero and you feel that the checkbox list does not align with the textbox, try modifying the curleft variable set in the Left function in MultiselectListBox.js file. Please note that this is valid only when the "RepeatLayout" property of the checkbox list has been set to "Table" (default value of the control).

Higher Z-index for the Checkboxlist Control

When the div is positioned dynamically, the checkboxlist inside the div is overridden by controls such as the listbox which are actually placed beneath the div and the containing checkboxlist. To overcome this issue, an iframe was positioned as the div, so that the div gets a higher z-index value. The iframe overrides the listbox control and hence the div and the checkboxlist are shown. Here the src of the iframe is not set.

Enhancements

A MultiselectEventArgs derived from EventArgs can be used. This can hold the list of selected items and its corresponding indexes.

The code has been tested only on Internet Explorer. It needs changes to make it compatible with other browsers.

Thanks for raising the issue. Currently, the "All" item appears when we add individual listitems. However, there are two ways to achieve what you are trying for:

1. RegionList.Items.InsertItem at index 0 adter the dataset has been bound in your code.
2. Modify the source code when the dataset is set.
perform step 1 at the datasource property in source code (i.e) at Multiselect.aspx.cs file as below

First of all, thanks for your help on this. I followed step one by doing the following but for some reason I got the word "Region" in the dropdown list instead of the list of countries that I have in my table. Also I used Items.Insert because I didn't find InsertItem that you mentioned.

Hi, I was finishing a program and I noticed that dropdownlist sometimes blocks and then I noticed that I can unblock if I move the scroll to the top. Then I checked your default.aspx and I changed the height of the field set from 413px to 913px and I moved the scroll down a bit and I was not able to expand the dropdownlist until I moved it back to the top.
Any suggestion?

Hi Daniel..Ya thats right, we noticed that too and we have fixed that issue, will soon upload the next version. else its only a small change in the javascript part - Multiselectlistbox.js
Can you please replace the Top function with the one below and try. I shall upload the latest version tomorrow.

I replaced the "function top" with the code that you gave me and now the dropdownlist of the top is blocked and I am only able to unblock it if I move the navigation pane a little bit to the bottom. You can replicate the issue in the default.aspx if you move the dropdownlist named "multiselect_foodItems" below of the ListBox named "LBItemsListBox".

I updated the controls but for some reason the drop down list do an auto post back every time that I select an item. I added autopostback=false i n the aspx and in the code. But it is still doing the autopostback.

Not sure why this happens. Have you tried the sample that is attached with the article. I do have one sample with autopostback set to false. The juices drop down. can you check that one please. If youare still not able to solve then email me the code. I will have a look at it.