AJAX Control Toolkit - DropDownExtender Always Visible

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″ />
<asp:linkbutton id=”Link2″ runat=”server” text=”Item 2″ />
<asp:linkbutton id=”Link3″ runat=”server” text=”Item 3″ />
<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>

Damien White Twitter