A
Abbas
Hi,
I have a nested DIV structure where both have an onclick event, hence
I am cancelling the event from bubbling up to the outer DIV, but this
has caused the Panel to remain opened when I click on another dropdown
(in another item within my repeater) or anywhere else on the page, and
I am wondering if anyone knows how to close the panel manually using
the AjaxControlToolkit.DropDownBehavior?
Here is some source code:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<%# Eval("Text") %>
<div id="test<%=counter++ %>" onclick="cancelEvent(event)";>
<asp:Label ID="TextLabel" runat="server" Text="Select your
favorite exotic ice-cream flavor"
Style="display: block; width: 300px; padding:2px; padding-
right: 50px; font-family: Tahoma; font-size: 11px;" />
<aspanel ID="DropPanel" runat="server"
CssClass="ContextMenuPanel" Style="display :none; visibility:
hidden;">
<asp:LinkButton CommandArgument="www.google.ca"
runat="server" ID="Option1" Text="Mocha Blast"
CssClass="ContextMenuItem" OnClick="OnSelect"/>
<asp:LinkButton CommandArgument="www.google.ca"
runat="server" ID="Option2" Text="Java Cyclone"
CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton CommandArgument="http://www.google.ca"
runat="server" ID="Option3" Text="Dry Fruit"
CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:HyperLink ID="HyperLink1" runat="server"
Text="HyperLink" NavigateUrl="http://www.google.ca"
CssClass="ContextMenuItem" />
</aspanel>
<ajaxToolkitropDownExtender runat="server" ID="DDE"
TargetControlID="TextLabel"
DropDownControlID="DropPanel" /></div>
<br />
<asp:UpdatePanel id="Update" runat="server">
<ContentTemplate>
<asp:Label id="lblSelection" runat="server"
Style="padding: 5px;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Option1"
EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option2"
EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option3"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</Repeater>
The JavaScript:
function cancelEvent(e) {
//var test =
AjaxControlToolkit.DropDownBehavior.get_isOpen();
//src.onclick();
alert('cancel');
if(window.event) {
alert('1');
if (!e) e = window.event;
e.cancelBubble = true;
}
else if ( e.stopPropagation) {
// alert('2');
e.stopPropagation();
}
else {
alert('3');
return false;
}
}
I have a nested DIV structure where both have an onclick event, hence
I am cancelling the event from bubbling up to the outer DIV, but this
has caused the Panel to remain opened when I click on another dropdown
(in another item within my repeater) or anywhere else on the page, and
I am wondering if anyone knows how to close the panel manually using
the AjaxControlToolkit.DropDownBehavior?
Here is some source code:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<%# Eval("Text") %>
<div id="test<%=counter++ %>" onclick="cancelEvent(event)";>
<asp:Label ID="TextLabel" runat="server" Text="Select your
favorite exotic ice-cream flavor"
Style="display: block; width: 300px; padding:2px; padding-
right: 50px; font-family: Tahoma; font-size: 11px;" />
<aspanel ID="DropPanel" runat="server"
CssClass="ContextMenuPanel" Style="display :none; visibility:
hidden;">
<asp:LinkButton CommandArgument="www.google.ca"
runat="server" ID="Option1" Text="Mocha Blast"
CssClass="ContextMenuItem" OnClick="OnSelect"/>
<asp:LinkButton CommandArgument="www.google.ca"
runat="server" ID="Option2" Text="Java Cyclone"
CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:LinkButton CommandArgument="http://www.google.ca"
runat="server" ID="Option3" Text="Dry Fruit"
CssClass="ContextMenuItem" OnClick="OnSelect" />
<asp:HyperLink ID="HyperLink1" runat="server"
Text="HyperLink" NavigateUrl="http://www.google.ca"
CssClass="ContextMenuItem" />
</aspanel>
<ajaxToolkitropDownExtender runat="server" ID="DDE"
TargetControlID="TextLabel"
DropDownControlID="DropPanel" /></div>
<br />
<asp:UpdatePanel id="Update" runat="server">
<ContentTemplate>
<asp:Label id="lblSelection" runat="server"
Style="padding: 5px;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Option1"
EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option2"
EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Option3"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</Repeater>
The JavaScript:
function cancelEvent(e) {
//var test =
AjaxControlToolkit.DropDownBehavior.get_isOpen();
//src.onclick();
alert('cancel');
if(window.event) {
alert('1');
if (!e) e = window.event;
e.cancelBubble = true;
}
else if ( e.stopPropagation) {
// alert('2');
e.stopPropagation();
}
else {
alert('3');
return false;
}
}