Today I came across a problem of making the DropDownExtender appear as if it is a standard drop down like it is when you hover over it (as shown in the image to the right). Initially I was thinking you could do something with the Animation framework, but after a bit of research I found the way to do it. This forum post (look for the accept answer by KristoferA), has the solution. The source code below the full working solution.
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<%@ register assembly=”AjaxControlToolkit” namespace=”AjaxControlToolkit” tagprefix=”cc1″ %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Always Visible Drop Down</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<script language=”javascript” type=”text/javascript”>
function DropDownExtender1_pageLoad()
{
$find(‘DropDownExtender1′).unhover = doNothing;
$find(‘DropDownExtender1′)._dropWrapperHoverBehavior_onhover();
}
function doNothing() {}
Sys.Application.add_load(DropDownExtender1_pageLoad);
</script>
<div>
<asp:scriptmanager id=”sm” runat=”server” />
<asp:label id=”Label1″ text=”Select a value” runat=”server” width=”200″ />
<asp:panel id=”DropPanel1″ runat=”server”>
<asp:linkbutton id=”Link1″ runat=”server” text=”Item 1″ /><br />
<asp:linkbutton id=”Link2″ runat=”server” text=”Item 2″ /><br />
<asp:linkbutton id=”Link3″ runat=”server” text=”Item 3″ /><br />
<asp:linkbutton id=”Link4″ runat=”server” text=”Item 4″ />
</asp:panel>
<cc1:dropdownextender id=”DropDownExtender1″ TargetControlID=”Label1″
DropDownControlID=”DropPanel1″ runat=”server”>
</cc1:dropdownextender>
</div>
</form>
</body>
</html>
6 Comments
Thanks for this. Your taking the time to synthesize the solution from forum_post into a functioning sample really saved me some time.
Instant Host-
See this: http://forums.asp.net/t/1216432.aspx
-Damien
hey,
I integratec this in my project.
I want additional functionality:
when i press up or down key
it should focus on result and sho the selected result highlighted.
It doesn’t work like a "normal" dropdown list, because there isn’t a DropDownList control underlying the extender. It’s designed to allow you to extend any control, and provide a panel as the drop down. Think of it as a link with a popup. It’s not rendering an HTML SELECT, and therefore doesn’t act as a standard drop down.
-Damien
This code doesn’t work for me.DropDownExtender Doesnot work Like normal DropDown.
I like what you’ve done here it’s a simple solution for it. But do you have any idea how to make it perform like a normal dropdown? Meaning have a ID value attached to the selection not just a text value? I’ve been looking around for this tool and this post got one of my questions answered.
Thanks.
Tim