Hi Neelvn,
If you're using the ASP.NET AJAX Control Toolkit you may notice that when you load the page a control that you wish to be hidden is visible and then disappears (most frequently observed when people try to use CollapsiblePanel and expect it to be collapsed initially or have a PopupControl that should be hidden until a user clicks something). This occurs because of the delay between when the page first renders and when the JavaScript is run to modify it. In order to avoid this problem altogether, we recommend you have all of the controls positioned and styled as you would expect them to look after the script has initialized them.
If you have a PopupControl you should set it's visibility to false using style="visibility: false;". Do not use the ASP.NET property Visible="false" because this will prevent your control from rendering on the client.
You may also refer to my sample code which works pretty well locally.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestPopup.aspx.vb" Inherits="TestPopup" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div >
<asp:TextBox ID="TextBox1" runat="server" autocomplete="off" onblur="hidePopupPanel()"></asp:TextBox>
<ajaxToolkit:PopupControlExtender ID="TextBox1_PopupControlExtender"
runat="server"
DynamicServicePath=""
Enabled="True"
ExtenderControlID=""
TargetControlID="TextBox1"
PopupControlID="PopupPanel"
Position="Bottom">
</ajaxToolkit:PopupControlExtender>
<asp:Panel ID="PopupPanel" runat="server"
BackColor="#999966"
style="display:none"
onblur="hidePopupPanel()" >
This is the PopupPanel!
</asp:Panel>
</div>
</form>
<script language="javascript" type="text/javascript">
function hidePopupPanel(){
if(document.activeElement==$get("PopupPanel")){return;}
$find("<%=TextBox1_PopupControlExtender.ClientId %>").hidePopup();
}
</script>
</body>
</html>
Please let me know whether this helps or not.
Best regards,
Zhi-Qiang Ni