Its an internet era where everything is coming to internet. Now a days users seem to be more interested towards purchasing online than ever before . Its getting harder and harder for the companies to make their online users happy because of the tough competition. One thing which is common across all of websites on the internet in terms getting more and more hits and to make their internet shop successful is their use of state of the art web controls and they way they are presented along with other information on the page.

Similarly when it comes to use these controls while developing the websites, choice is not much. But thanks to Visual Studio .NET which provides most of the required tools and controls as default. Not only these default controls show DHTML behavior (e.g. Autopostback and EnableSessionState) but are also easy to use and require less space to present a bunch of information. Two of these controls are DropdownList and CheckboxList. Both of them are powerful and rich in functionality in a sense they provide efficient ways to add and delete individual items to controls. They provide multi-select functionality and also have a DataSource property which qualify them for data bound controls. One thing which is not good about these controls is the way they present information on the page. Comparatively, they take more space to render information. I won't call this a drawback but this is the way they were developed initially. But, now we have got to a stage where companies are tying up with other companies and trying to get involved in more than one businesses. They like to see as much content on their site as possible. They can't afford these sorts of controls which take huge space just to display once type of information.

When I got into this situation where I had to develop a search page for the user having 15 or 20 search filters and each filter/criteria with more than 50 records to display, I decided not to fill up the whole page with ListBoxes or CheckBoxLists but to develop a user control that would not only display full list checkbox items but will also be a dropdown in nature.

About User Control

Its very easy to use and light weight control and at the same time easy to understand. I have developed it using .Net C# as server side scripting and JavaScript as client side. I won't say that it qualify for a full blown server control but it provides many features that a built-in .NET server control provides. Following is a small list of features this control provides:

• Autopostback

  This property lets the user send data to server when the toggle ON/OFF is pressed.

• EnableViewState
  

  ViewState can be saved with the help of this property.
  

• DataSource

  This property makes the control a data bound control.
  NOTE: Currently control supports only DataTable.

• Z-Index:

  Z-Index order is very important when on a page more than one instances of the control are going to be used. Since the control expands in the downward direction, User has to set a higher value to z-index property of the control that will come first on the page. It will give you the following effect on the page when the option list gets expanded.
  
  
  
  
  
  

• Expand/Collapse

  Just like a normal dropdown control, this selection list can be collapsed automatically once the selection is made by clicking any where on the page or on the control except on the region which displays the selection list. Its is because of the fact that user might want to select more than one items.
  

• Selected Options

  On the server side, control will pass the selections made by the user in two formats. A comma separated list of items and an array items.

Using the code

Using this control in your project is fairly simple. The control gets or sets everything through properties which it exposes. There are total nine properties in the control which all are self explanatory. In order to use the control on an aspx page you need to first register it by writing following line on top of your page:

 <%@ Register TagPrefix="DDMS" TagName="MultiSelectDropDown" Src="MultiSelectDropDown.ascx" %>

Once that is done, you can paste the following code anywhere inside HTML body that will actually do the control initializing job for you. Altough its not mendatory to put the user control inside the <DIV> but as I mentioned above, in order to avoid z-index problems better to enclose it with <DIV> tag give and give it z-index value based on the order of appearance on the page. <DIV> which is coming on the first will get the higher value than the one getting displayed after that.

OnSelectedItem is the event that will get fired on the server when selection is done and user click on Toggle ON/OFF button. Its necessary to note that in order to get this event fired AutoPostBack property should be set to true.

<div id="divMultiSelectDropDown1" style="Z-INDEX: 101; LEFT: 20px; POSITION: absolute; TOP: 20px">
<ddms:multiselectdropdown id="MultiSelectDropDown1" runat="server"></ddms:multiselectdropdown><br>
<br>
</div>
<div id="divMultiSelectDropDown2" style="Z-INDEX: 100; LEFT: 20px; POSITION: absolute; TOP: 60px">
<ddms:multiselectdropdown id="Multiselectdropdown2" runat="server"></ddms:multiselectdropdown>
</div>

Thats all for ASPX page. Now you need to write a bit of code in code behind file as well. you can paste following code in your web pages' Page_OnLoad method. In the following code you can see that I am using two separate instances of the my control MultiSelectDropDown1 and MultiSelectDropDown2. CallingPage is a property exposed by the control. Through this property you supply a reference of your webpage to the control. By using this reference, Control will emit out code for __doPostBack method.

protected void Page_Load(object sender, System.EventArgs e)
{
if(!this.IsPostBack)
{
this.MultiSelectDropDown1.DataSource = GetCurrencyDataSource();
this.MultiSelectDropDown1.DataTextField = "Description";
this.MultiSelectDropDown1.DataValueField = "CurrencyID";
this.MultiSelectDropDown1.AutoPostBack = true;
this.MultiSelectDropDown1.DataBind();
this.Multiselectdropdown2.DataSource = GetEmployeeDataSource();
this.Multiselectdropdown2.DataTextField = "EmpName";
this.Multiselectdropdown2.DataValueField = "EmpID";
this.Multiselectdropdown2.AutoPostBack = false;
this.Multiselectdropdown2.DataBind();
}
this.MultiSelectDropDown1.CallingPage = this;
this.Multiselectdropdown2.CallingPage = this;
this.MultiSelectDropDown1.OnItemsSelected +=new MultiSelectDropDownDelegate(MultiSelectDropDown1_OnItemsSelected);
}

After registering the event handler, you need to write the code the handler. You can see that in the following code I have used a class MultiSelectDropDownItemSelectedEventArgs
This class will wrap the arguments (selection options), sent by the user, and will pass them to event handler. To see the result I have used two textbox fields and one listbox on my sample webpage.

private void MultiSelectDropDown1_OnItemsSelected(object sender, MultiSelectDropDownItemSelectedEventArgs args)
{
this.tbSelectedFullText.Text = string.Empty;
this.tbSelectedOptionsValue.Text = string.Empty;
this.lbSelectedItemList.Items.Clear();
this.tbSelectedOptionsValue.Text = args.SelectedOptionValueText;
this.tbSelectedFullText.Text = args.SelectedOptionText;
foreach(string selectedOption in args.SelectedOptionList)
this.lbSelectedItemList.Items.Add(selectedOption);
}

The output is shown below:

Scope

Before I started working on this control, like many other developers, I did some Google first for the same just to promote the reuseability (you know what I mean;) ). After failing to do so, I decided to take up this opportunity and write one for myself and for anyone else out there who might be interested in using it.
The control is very easy to use and its scope its extende both versions of .NET (1.1 and 2.0).

Points of Interest

I would like to comment on a few things that I learned and small problems I faced while writing this control.

• CheckBoxList and <ASP:CheckBox> were not a right choice:

  It took some of my time to decide which control shall I use to display the list of checkboxes because CheckBoxList doesn't provide any facility to apply attributes for individual items and I had to have an onclick for every checkbox. Even server side ASP:Checkbox was not a feasible option because so far it doesn't have a Value property.
  

• UserControl's CLIENTID

  Its important to note that whenever you are going to create a control, lets say Control1, that will act as a container for other child controls and webpage will have multiple instances of such control, always access your child controls by concatenating their ids with that of the Control1.
  
  
• __doPostBack , EVENTARGUMENT and EVENTTARGET
  I had to write my own version of __doPostBack which is sent to the page hosting the control. The reason for that was, clientSide __doPostback only becomes available if and only if on your page there is atleast one built-in server side control. Since my control is a server side control in itself I couldn't rely on __doPostBack generated by other .NET server controls as they might or might not be available at all on the page. So using AutoPostBack property user control generates code for __doPostBack as well as for EVENTARGUMENT and EVENTTARGET.
  
  
  Below are some of the features I would to see in the control. I would be glad If anyone implements those features otherwise I will implement them myself and update it here.
  
• Items.Add()
• Changing orange color for onmouseover to windows default 'blue' color for controls
• Ability to Change the size of the control through a property
• Postback through AJAX.