Sunday, March 11, 2012

Calendarextender and Lose Focus Or Mouse Out

Yes, you can use this:
I have my CalendarExtender like the following code and like the ajaxtoolkit shows and it hides when you click anywhwere in the page: <asp:ImageButton runat="Server" ID="Image1" ImageUrl="Images/Calendar_scheduleHS.png" AlternateText="Click to show calendar" />
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="txtGoLiveDate" Format="dd/MM/yyyy" PopupButtonID="Image1">


That's what I have, but it you do not choose a date and click on another calendar control the open calendar still stays open.


Hi Randy,

Based on my research, I think the best solution is modify its source code and add onmouseout event to the CalendarExtender. Here is another sample which I detect the document's onmousemove event. I tested it on AJAX Control Toolkit's V10920.

<%@. 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"></script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" > </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="show"/> <ajaxToolkit:CalendarExtender ID="CalendarExtender1" BehaviorID="myCEBID" runat="server" TargetControlID="TextBox1" PopupButtonID="Button1"> </ajaxToolkit:CalendarExtender> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Panel ID="Panel1" runat="server"> 123123 </asp:Panel> <script language="javascript" type="text/javascript">var flag = false; var hasMovedInside = false function pageLoad(){ $find("myCEBID").add_shown(enableMouseMove); $find("myCEBID").add_hidden(disableMouseMove) } function enableMouseMove(){ flag = true; } function disableMouseMove(){ flag = false; } document.onmousemove= function(sender,args){ if(!flag) return; if(event.srcElement.tagName.toLowerCase()=="div" && event.srcElement.outerHTML.indexOf("ajax__calendar")>0) hasMovedInside = true; if(hasMovedInside && event.srcElement.tagName.toLowerCase()!="div"){ hasMovedInside = false; $find("myCEBID").hide(); } } </script> </form></body></html>
Best regards,

Jonathan

No comments:

Post a Comment