Multiselect DropDown ListBox Control for Web Applications

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.

  private void 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.

private void LoadData()
        {
            //Binding the Dataset as the datasource
            multiselect_foodItems.DataSource = GetFoodItems().Tables[0];
            multiselect_foodItems.DataTextField = "FoodItems";
            multiselect_foodItems.DataBind();
            // Using the list item to add items
            multiselect_Juices.Items.Add("Apple");
            multiselect_Juices.Items.Add(new ListItem("Orange"));
            ListItem item = new ListItem("Grapes");
            multiselect_Juices.Items.Add(item);
        }

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 += 
	new Controls.MultiselectDropDownListBox.OnList_SelectedIndexChangedEventHandler
	(multiselect_Juices_OnMSDDSelectedIndexChanged);

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).

if(obj.parentElement.tagName.toUpperCase() == "TABLE")
	{
	        curleft -= Number(obj.parentElement.getAttribute('cellspacing'));
	        curleft -= Number(obj.parentElement.getAttribute('cellpadding'));
	}

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.