Introduction
ASP.NET is a very fast and efficient way to program small as well as enterprise level web applications. It provides lot of controls and components to build web pages. But my requirement was to select multiple choices/options from a drop down combo box in a web page. ASP .NET 1.1 does not provide such control but ASP .NET provides the option to the developer for developing custom control. It was good option for me and I developed the custom control which will act like a multi select combo box.
This custom control can be used in IE without any changes. This component is not tested on mozilla/firefox. In order to use it on firefox, little changes (change in client script) are required.
Development Components and Notes
For developing this control, simple html classes, CSS and javascript are used. Server side code is written in C# and .NET framework 1.1. But this component can be used in .NET framework 2.0 with little changes in server script. This component consists of a mulline <SELECT> and a <DIV>. <DIV> contents the options with a check box infront of each options.
Also component provides some properties through which developer can set some value to render it in ASP.NET engine.
Properties are like:
1. ListItems : Developer can set/get NameValueCollection for populating options.
2. BackColor : Developer can set/get background color of drop down list;
3. Name : Developer can set/get the name of the control to distuguise betwen multiple
control.
4. DisableMethod : Developer can set teh disable method. This method is used to hide
the <select> component in the page. Developer has to write the
statements to hide <select> componenets. Because Z-Index does not
work in case of <select>.
5. OnChange : Developer can attach javascript method which will be called when select
is changed by user.
6. MaxSize : Developer can set the Maximum size of ListBox.
7. MaxListHeight: Developer can set the Maximum height if drop down list.
Screen Shots
1. Expanded DropDown List.
2. Selected values are shown in a html Label after submitting the page.
How to use the control
This component is a ASP.NET user control. It can be used in any ASP.NET web page. Also to populate the List, component takes a NameValueCollection object as its Property
"ListItems". So web page should contain reference to "System.Collections.Specialized" namespace. Also the component is using some images. Before using the control, make sure code contains correct image references.
After selecting the options from the drop down list developer can get the selected items in form of a semocolon(;) seperated string using a javascript method GetDataListFromMultiSelectCombo()
Sample Code to use the control
<%@ Page language="c#" AutoEventWireup="false" %>
<%@ Import namespace="System.Collections"%>
<%@ Import namespace="System.Collections.Specialized"%>
<%@ Register Tagprefix="Custom" Tagname="MultiSelectCombo" Src="MultiSelectCombo.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Defult Page</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function OnSubmit()
{
document.Main.hid_selected_lang.value = GetDataListFromMultiSelectCombo();
document.Main.action = "MultiSelectComboBox.aspx";
return true;
}
</script>
</head>
<body MS_POSITIONING="GridLayout">
<form id="Main" method="post" runat="server">
<%
NameValueCollection opItems = new NameValueCollection();
opItems.Add("C#","Visual C#");
opItems.Add("VC++","Visual C++");
opItems.Add("VB","Visual Basic");
opItems.Add("J#","Visual J#");
Languege.ListItems = opItems;
%>
Select Language: <Custom:MultiSelectCombo id="Languege" Name="Languege" MaxSize="2" MaxListHeight="4" runat="server"></Custom:MultiSelectCombo>
<%
string sValues = Request["hid_selected_lang"];
if (sValues != null &&
sValues.Equals("-1"))
{
sValues = "None";
}
if (sValues != null && sValues != "")
{
%>
<label id="selected_lang" name="selected_lang">Selected Laguges : <%=sValues%></label>
<%}%>
<input type="submit" value="Submit" onclick="OnSubmit()">
<input type="hidden" id="hid_selected_lang" name="hid_selected_lang">
</form>
</body>
</html>
Supported Environment
While developing the component, .NET Framework 1.1 is used. But this control can be used in .NET Framework 2.0 with little or no changes.
