Click here to Skip to main content
Click here to Skip to main content

Extended DropDownList

, 17 Dec 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
This article illustrates the custom drop down list that allows to display the items having longer size than the drop down width.
DropDownListEx.gif

What is DropDownListEx?

Most of the time when the items in the drop down list are lengthy, developers find it difficult to control their appearance. If the drop down width is not set, the size of the drop down list gets lengthy and if the size of the drop down list is set, the items get cropped during display. DropDownListEx is the solution for such a problem. You can control the width of the dropdown with the items displaying without getting cropped.

A sample code is attached along with the DropDownListEx source for you to understand how to use and set the properties of the control.

Background

Including myself, many of my colleagues were facing the dropdownlist problem. Therefore, I thought of developing the custom control to get rid of this problem. And it's not like I am the first person to do this. There are custom controls available, but you have to pay for them. After I developed it, I thought why not share with the other developers across the world who also face the same problem. So here I am presenting my efforts to you. Your suggestions are always welcome.

Using DropDownListEx

This custom control includes:

  • DropDownListEx.cs: A custom control source code file
  • DropDownListEx.js: JavaScript to handle the client side task
  • DropDownListEx.css: A stylesheet to control the appearance of the dropdown and its item
  • DownArrow.gif: An image file to display the dropdown button

Rendering DropDownList

DropdownListEx is inherited from DropDownList & IPostBackHandler classes, so we get all the properties, events & methods of standard dropdownlist & IPostBackHandler interface to handle the postback event.

By overriding the rendering functionality of the standard dropdownlist, we create our own rendering functionality. Instead of displaying the standard dropdown, we use the textbox and the bullet tree (ul li) to render the dropdown & its items.

We use HTMLTextWriter to render these controls as shown in the below code:

private void RenderTextBoxSpan(HtmlTextWriter writer)
{
	writer.WriteBeginTag("div");
	writer.Write(">");
	writer.WriteFullBeginTag("table cellpadding='1' cellspacing='0' border='0'");
	writer.WriteFullBeginTag("tr");
	writer.WriteFullBeginTag("td");
	writer.WriteBeginTag("span");
	if (!string.IsNullOrEmpty(CssClass))
	{
		writer.WriteAttribute("class", "textBoxWrapper " + CssClass);
	}
	else
	{
		writer.WriteAttribute("class", "textBoxWrapper");
	}
		writer.Write(">");
	.
	.
	.
	.
	writer.WriteBeginTag("div");
	writer.WriteAttribute("ID", this.ClientID + "_listBox");
	writer.WriteAttribute("class", "listBox");
	writer.WriteAttribute("tabindex", "0");
	writer.Write(">");
	writer.WriteLine();

	// opening ul... the rest is rendered in the RenderContents()
	writer.WriteFullBeginTag("ul");
}

By rendering, the following HTML structure is designed:

<div>
        <table>
    <tr>
    <td>
     <table>
          <tr>
       <td>TextBox<td><td>ImageButton</td>
      </tr>
     </table>
     <div>
          <ul>
            <li>First Item of the dropdown</li>
            <li>Second Item of the dropdown</li>
      </ul>
     </div>
    </td>
  </tr>
 </table>
</div>

Some spans are also added in the structure to change the appearance of the controls so that it looks like a dropdown.

The TextBox displays the selected item, Image Button is used to drilldown the items. With use of stylesheets, the appearance of bullets (ui, li) are made similar to the standard dropdown items.

Using DropDownListEx.js

Now since the dropdown is rendered, it's time for the browser to get into action. Using the powerful yet easy features of JQuery, the functionalities of the dropdown at client side are controlled. The functionalities include drilling down the items on image button click, changing the appearance of item on mouse hover, hiding the items when mouse leaves or item is selected, etc.

History

  • 16th December, 2010: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Imran Saiyed
Team Leader
United Arab Emirates United Arab Emirates
I am working as a Team Leader in a IT Solution Company operating in United Arab Emirates, Dubai. I started programming as hobby from the age of 14. And since then Programming is running into my blood. My professional career began in 2002 and since then I am working fulltime and dedicating my time and effort in various programming languages.

Comments and Discussions

 
QuestionImages? Pinmemberaspdotnetdev17-Dec-10 13:34 
AnswerRe: Images? PinmemberImransyed6318-Dec-10 3:11 
GeneralRe: Images? Pinmemberaspdotnetdev18-Dec-10 9:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 17 Dec 2010
Article Copyright 2010 by Imran Saiyed
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid