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.
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.
- Ability to select multiple items
- Higher z-index compared to the other web controls such as
dropdown which have relatively higher Z-index than the normal web controls. This prevents the
dropdown list in a page overriding the multi select
- 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
- 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.
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()
multiselect_foodItems.Width = 160;
multiselect_foodItems.Height = 15;
multiselect_Juices.Width = 160;
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()
multiselect_foodItems.DataSource = GetFoodItems().Tables;
multiselect_foodItems.DataTextField = "FoodItems";
ListItem item = new ListItem("Grapes");
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.
dropdown opens up when user clicks anywhere on the control and is hidden when the user clicks anywhere outside the control.
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
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
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
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
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.
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.
- Version - v1.1. - Fixed the scrolling issue