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()
{
System.Drawing.Color.FromName("#FFFFE6");
multiselect_foodItems.Width = 160;
multiselect_foodItems.Height = 15;
multiselect_Juices.Width = 160;
multiselect_Juices.Height= 15;
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()
{
multiselect_foodItems.DataSource = GetFoodItems().Tables[0];
multiselect_foodItems.DataTextField = "FoodItems";
multiselect_foodItems.DataBind();
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.
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.
History
- Version - v1.1. - Fixed the scrolling issue
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.