Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

HOW-TO: Implement eBay's Slick Dropdown Popup -- Part 2

Surprised?

In the previous eBay post, I mentioned eBay's Slick Dropdown ComboBox.

Slick seems like an accurate word.

If you take a look at the above mentioned combobox on eBay's site (Under My eBay) then you'll find something very interesting. Here is the ComboBox before clicking on the dropdown:

image

Here it is after clicking the dropdown:

image

Do you notice something peculiar? It's not a DropDown ComboBox at all. It's just a cleverly disguised Popup control.

 

ASPxPopupControl to the Rescue

You easily can create popups like this with the versatile ASPxPopupControl. Do you want to see a sample? No problem.

Attached to this post is a sample you can open in Visual Studio 2005 with our DXperience or ASPxperience v2007 Volume 2 ASP.Net controls installed.

You can download the sample here: ASPxPopupControl_eBay_Sample.zip

The sample code shows that you don't need to do much to achieve the same look and feel. Let's take a further look at this sample:

image

The top button placed in a small 2-column table with a dropdown image labeled Image1 next to it.

Then place an ASPxPopupControl and set it's PopupElementID to Image1. This will activate the popup when the dropdown image is clicked. This method leaves the button free to still be clicked as a separate command and still have the dropdown activate the popup control to display more options (or links in this case).

To get the same look as eBay's, you'll need to do some HTML coding and set some more properties. There isn't very much to create and luckily you can find this already coded for you in the sample. Within the ASPxPopupControl is a panel with a table and some links inside of it:

image

Now simply run the project, click the dropdown image and we have the slick eBay-like dropdown made with the ASPxPopupControl:

image

As you can see there is no difference in look or functionality. You can create some amazing and versatile websites with the ASPxperience Subscription.

Other Resources

You might also want to check out these cool online demos of the ASPxPopupControl:

Features, Templates - Shows you how customizable the ASPxPopupControl is.

DataBinding - Very slick. You'll find ways to use this after seeing this demo.

ContentUrl - You might find this handy to allow your customers to give you feedback.

Transparency - Yes, you can create something similar. Take a look at the ASPx page for the sample's code.

Client-Side Events and Functionality - If you need, the ASPxPopupControl supports a powerful Client-Side object model.

 

Note: If you're curious about the colors and fonts used in the screenshot above, from my Visual Studio 2005 IDE, then check out the following posts:

In search of the perfect monospaced programmers font - Inconsolata

Is Your IDE Hot or Not?

Published Jul 27 2007, 06:22 AM by
Bookmark and Share

Comments

No Comments

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners