Wednesday, March 21, 2012

DropDownExtender LinkButton doesnt work

I am currently using a DropDownExtender to provide a SharePoint like experience with a drop down on a link button. This seems to work fine in IE7, but when I get to IE6, clicking on the LinkButton will activate the drop down (rather than firing the LinkButton's Click event). I've posted the pertinent code below. Thanks for any help!

Mike

<asp:LinkButton Style="padding-right: 25px; display: block; padding-left: 2px; padding-bottom: 2px;
padding-top: 2px;" ID="NameLink" runat="server" Text='<%# Bind("Name") %>'
Enabled='<%# Bind("HasChildren") %>' OnClick="NameLink_Click" CommandArgument='<%# Eval("ComponentIndex") %>'></asp:LinkButton>

<asp:Panel Style="display: none; visibility: hidden" ID="NameOptions"
runat="server">
<table>
<tbody>
<tr>
<td style="width: 6px">
<asp:Image ID="Image2" runat="server" ImageUrl="~/ReportTool/images/AddToPage.bmp"></asp:Image></td>
<td>
<asp:LinkButton ID="PropertiesLink" OnClick="EditProperties_Click" runat="server"
CommandArgument='<%# Eval("ComponentIndex") %>' Enabled='<%# Eval("Editable") %>'>Properties</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 6px">
<asp:Image ID="Image3" runat="server" ImageUrl="~/ReportTool/images/delete_16x.ico">
</asp:Image></td>
<td>
<asp:LinkButton ID="RemoveLink" OnClick="RemoveLink_Click" runat="server" CommandArgument='<%# Eval("ComponentIndex") %>'
Enabled='<%# Eval("Removeable") %>'>Remove</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 6px">
</td>
<td>
<asp:LinkButton ID="MoveItemButton" runat="server" CommandArgument='<%# Eval("ComponentIndex") %>'
Enabled='<%# Eval("Moveable") %>' OnClick="MoveItemButton_Click">Move Item</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 6px">
</td>
<td>
<asp:LinkButton ID="SequenceItemButton" runat="server" CommandArgument='<%# Eval("ComponentIndex") %>'
Enabled='<%# Eval("Sequenceable") %>' OnClick="SeqItemButton_Click">Sequence Item</asp:LinkButton></td>
</tr>
<tr>
<td style="width: 6px">
</td>
<td>
<asp:LinkButton ID="StyleButton" runat="server" CommandArgument='<%# Eval("ComponentIndex") %>'
Enabled='<%# Eval("Styleable") %>' OnClick="StyleButton_Click">Style</asp:LinkButton></td>
</tr>
</tbody>
</table>
</asp:Panel>
<cc1:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="NameLink"
HighlightBackColor="wheat" DropDownControlID="NameOptions">
</cc1:DropDownExtender>

Hi,

I tried it on IE 6 with following code, the click event is successfully fired.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void OnSelect(object sender, EventArgs e) { } protected void TextLabel_Click(object sender, EventArgs e) { Response.Write("fired"); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:LinkButton ID="TextLabel" Text="Select your favorite exotic ice-cream flavor" runat="server" Style="display: block; width: 300px; padding:2px; padding-right: 50px; font-family: Tahoma; font-size: 11px;" OnClick="TextLabel_Click">LinkButton</asp:LinkButton> <asp:Panel ID="DropPanel" runat="server" CssClass="ContextMenuPanel" Style="display :none; visibility: hidden;"> <asp:LinkButton runat="server" ID="Option1" Text="Mocha Blast" CssClass="ContextMenuItem" OnClick="OnSelect" /> <asp:LinkButton runat="server" ID="Option2" Text="Java Cyclone" CssClass="ContextMenuItem" OnClick="OnSelect" /> <asp:LinkButton runat="server" ID="Option3" Text="Dry Fruit" CssClass="ContextMenuItem" OnClick="OnSelect" /> </asp:Panel> <ajaxToolkit:DropDownExtender runat="server" ID="DDE" DropArrowImageUrl="../images/arrowvf2.gif" TargetControlID="TextLabel" DropDownControlID="DropPanel" /> <br /> </div> </form></body></html>

Can you update to the most recent version of AjaxControlToolkit and try again.

If it still doesn't work, can you post a simple page here? It seems you are using it in a GridView control, can you change the sample to use NorthingWind database?


Hi Raymond, Thank you for your reply!

I first loaded the update ajaxcontroltoolkit. That changed things so that link was getting clicking but then I couldn't activate the drop down. I then noticed that you had "width: 300px" and I wasn't specifying a width. After I added that, all is ok.

Now if only I can get it to work onFirefox ...

Mike


But it works on Firefox too according to my test.

No comments:

Post a Comment