MultiSelect Dropdown Control

Introduction

It’s
an internet era where everything is coming to internet. Now a days, Users seem to be more diverted
towards online purchasing than ever before. Day by day, It’s getting 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 tools and controls and the way they are presented
on the web page along with other information.




If we specifically talk about web controls, Visual Studio .NET comes with a wide
range of web server controls. These controls possess DHTML characteristics (e.g. Autopostback
and EnableSessionState) and at the same time are easy to use. They also require less space to
present a bunch of information on the web page. Two of these controls are DropdownList and CheckboxList.
Both of the controls are powerful and rich in functionality in a sense that they
provide with efficient ways to add and delete individual items, exhibit
multi-select functionality and also have a DataSource property which makes them qualify
for data bound controls. One limitation which is common in both the controls is
the way they display information on the page. In comparison to other controls,
they take relatively more space to render information. 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 controls
which take huge amount of space just to display once type of information.



When I got into the same situation where I had to create a search page having
15 to 20 search filters and each with more than 25 items, I decided not to occupy
the whole page with ListBoxes or CheckboxLists but, to develop a user control
that would not only display a full list checkbox items but will also be a
dropdown in nature

About User Control

It’s an easy to use and light weight control. The code is also fairly simple to understand. I have developed it using .Net C# as server side and JavaScript as client side scripting. Although it’s not a full blown web server control but, it does provide with some useful features that help users in displaying and managing the information on the page easily. Following is a small list of those features:

• Autopostback

  A property, by which the page will be posted back to the server automatically on firing of OnSelectedItem event, which will happen only when the value of this property is set to true and toggle on/off button is pressed.
  
  

• EnableViewState

  A property, that says whether the current value of the control must be saved in the __VIEWSTATE hidden field and restored during a page postback. For this control, to display the list of selected options, I have used ASP.NET default textbox control that will take care of view state thing for our control.

  
  

• DataSource
  

  Through this property the control gets or sets the data source of type DataTable. It makes the control a true data bound control. Other than this property, the control also supports DataTextField and DataValueField, Similar to that of a standard dropdownlist control, for text content of the list items and value of each list item respectively.
  
  

• Z-Index:
  

  This property sets the stack order of our user control. It is very useful when on the same page, more than one instances of control are going to be used. Since the control expands in the downward direction, the instance with greater stack order is always in front of instance with lower stack order.
  
  
  
  
  

• Expand/Collapse
  

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

• Selected Options
  

  On postback, control will pass its current state to the server in the form a comma separated list where it can be used for further processing.
  .

Using the code

Using this control in your ASP.NET project is fairly simple as it gets or sets everything through properties it exposes. On the page It first needs to be registered which can be done by pasting the following line on top of your aspx page:

Collapse

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

After the registration is done, the control can be initialized by pasting the following code anywhere on the page but within HTML body. It’s important to note that in the attached demo project, I have encapsulated the control inside <DIV> tags which is not required of course but, as I mentioned above, to avoid z-index problems it’s better to enclose it with <DIV> and give it a z-index value based on the order of appearance on the page.

Collapse

<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>

That’s all from the aspx side. It’s time to write a bit of server side code. To load and configure the control, following lines of code can be pasted in Page_OnLoad event. Two separate instances of the control MultiSelectDropDown1 and MultiSelectDropDown2 are being used in the below code. CallingPage is a property exposed by the control that will supply a reference of the host page to the control. By using this reference, user control will emit necessary code for __doPostBack method.

Collapse

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);
}      

One last thing, is to register OnSelectedItem event and to provide its event handler. For event arguments I have created a separate class with the name MultiSelectDropDownItemSelectedEventArgs.
That will wrap the arguments (__EVENTARGUEMNT) and pass them to event handler. The demo project will give you the output shown below.

Collapse

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);
}

Scope

Before I actually started working on the control, like most of the other obedient developers, I tried to find the control with the similar look and functionality same on the internet just to support code re-usability (you know what I mean ;). After failing to do so, I decided to take on this endeavor for myself and for those who might be interested in using it in their projects.

As far as the scope of control is concerned, It can be extended to both version of .NET (1.1 and 2.0). Note that, not only a web page but also other user control can host this user control.