ASP.NET Multiple Selection DropDownList with AJAX HoverMenuExtender

• View this project in action
• Download source - 642 Kb

Added option to select all and deselect all per member request. As usual, you can follow the demo link to see the control in action and download the source code.

Introduction

Recently, I was looking for a multiple selection dropdownlist control for my new project. After spending some time researching for it, I decided to put together all my finding in one web user control. This web user control consists of an ASP.NET AJAX HoverMenuExtender, JavaScript, StyleSheet and CheckBoxListExCtrl. The final product will work with or without a masterpage and you can drag and drop more than one instances of the control on to the page. This is not a perfect control, feel free to modify it to tailor your requirement and share your thoughts. Below is a step by step tutorial on how I have accomplished this. Hope this tutorial will give someone an idea on how to use ASP.NET AJAX HoverMenuExtender and create multiple selection dropdownlist.

Before we begin, here is the structure of my project.

Using the Code

This is a usercontrol, just drag and drop. But make sure to include the ScriptManager.

The project includes:

• Default.aspx - this page do not use master page and user control
• MS_With_UserControl.aspx - this page use multiple instances of the user control and no master page.
• MS_With_UserControl_and_Masterpage.aspx - this page use multiple instances of the user control and a master page.
• CheckBoxListExCtrl - How to get the CheckBoxlist Value using Javascript?
• The rest of the files are fairly self explanatory.

CheckBoxListExCtrl

The code is pretty much the same except I had made a few changes to return the text of the selected checkbox. Please see comments.

//09042009 BT - var

string clientID = UniqueID + this.ClientIDSeparator + repeatIndex.ToString(NumberFormatInfo.InvariantInfo);

writer.WriteBeginTag("input");
writer.WriteAttribute("type", "checkbox");
writer.WriteAttribute("name", UniqueID + this.IdSeparator + repeatIndex.ToString(NumberFormatInfo.InvariantInfo));
writer.WriteAttribute("id", clientID);
writer.WriteAttribute("value", Items[repeatIndex].Value);
if (Items[repeatIndex].Selected)
writer.WriteAttribute("checked", "checked");
System.Web.UI.AttributeCollection attrs = Items[repeatIndex].Attributes;
foreach (string key in attrs.Keys)

writer.WriteAttribute(key, attrs[key]);
}
writer.Write("/>"); //09042009 BT - close the input tag
writer.Write("<label for="" + clientID + "">"); //09042009 BT - added label to hold the checkbox
text
writer.Write(Items[repeatIndex].Text); //text
writer.Write("</label>"); //close label tag
}

ultipleSelectionDDLCSS.css - style sheet

MultipleSelectionDDLJS.js

Here is the content of the JavaScript, please read the comments.

/*detect the browser version and name*/
var Browser = {
Version: function() {
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1)
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
return version;
}
}

function showIE6Tooltip(e){
//we only want this to execute if ie6
if (navigator.appName=='Microsoft Internet Explorer' && Browser.Version() == 6) {
if(!e){var e = window.event;}
var obj = e.srcElement;

tempX = event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
tempY = event.clientY + (document.documentElement.scrollTop || document.body.scrollTop);

var tooltip = document.getElementById('ie6SelectTooltip');
tooltip.innerHTML = obj.options.title; //set the title to the div
//display the tooltip based on the mouse location
tooltip.style.left = tempX;
tooltip.style.top = tempY+10;
tooltip.style.width = '100%';
tooltip.style.display = 'block';
}
}
function hideIE6Tooltip(e){
//we only want this to execute if ie6
if (navigator.appName=='Microsoft Internet Explorer' && Browser.Version() == 6) {
var tooltip = document.getElementById('ie6SelectTooltip');
tooltip.innerHTML = '';
tooltip.style.display = 'none';
}
}

/* get and set the selected checkbox value and
text and selected index to a hidden field */
function getCheckBoxListItemsChecked(elementId) {

//var
var elementRef = document.getElementById(elementId);
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
var checkedText = '';
var checkedSelIndex = '';
var myCheckBox = new Array();

for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];

if (checkBoxRef.checked == true) {

//selected index
if (checkedSelIndex.length > 0)
checkedSelIndex += ', ';
checkedSelIndex +=i;

//value
if (checkedValues.length > 0)
checkedValues += ', ';

checkedValues += checkBoxRef.value;

//text
var labelArray = checkBoxRef.parentNode.getElementsByTagName('label');

if (labelArray.length > 0) {
if (checkedText.length > 0)
checkedText += ', ';
checkedText += labelArray[0].innerHTML;
}

}
}

myCheckBox[0] = checkedText;
myCheckBox[1] = checkedValues;
myCheckBox[2] = checkedSelIndex;

return myCheckBox;
}

function readCheckBoxList(chkBox, ddlList, hiddenFieldText, hiddenFieldValue, hiddenFieldSelIndex) {
var checkedItems = getCheckBoxListItemsChecked(chkBox);

$get(ddlList).options[0].innerHTML = checkedItems[1]; //set the dropdownlist value
$get(ddlList).title = checkedItems[0]; //set the title for the dropdownlist
//set hiddenfield value
$get(hiddenFieldValue).value = checkedItems[1];
$get(hiddenFieldText).value = checkedItems[0];
$get(hiddenFieldSelIndex).value = checkedItems[2];
}

MultipleSelection.ascx