Ajax ModelpopupExtender Cant work - asp.net

I am using modelpopupextender in asp.net and this code is working window is popup sucessfuly but cancel button can't work; can anybody tell me why?
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"
%>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Button ID="buttonOpen" runat="server" style="display:none" ></asp:Button>
<asp:Panel ID="Panel3" runat="server" BackColor="#99CCFF" Height="269px" Width="350px"
style="display:none">
<table width="100%" style="border:Solid 3px #D55500; width:100%; height:100%"
cellpadding="0" cellspacing="0">
<tr style="background-color:#333399">
<td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger"
align="center">Time Details</td>
</tr>
<tr>
<td>
<asp:Label ID="Label19" runat="server" Text="Time From"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label20" runat="server" Text="Time To"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label21" runat="server" Text="Number of Slots"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Add" />
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" OnCancelScript="btnCancel" PopupControlID="panel3" TargetControlID="buttonOpen" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>

You need to set the CancelControlID property, not the OnCancelScript property (unless you want to execute a script after the cancel button is clicked). So for your scenario, do this:
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel" PopupControlID="panel3" TargetControlID="buttonOpen" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>

Related

Control inside repeater causing full postback even after keeping in update panel

In my page, I have one search button and a repeater. I have wrapped everything inside UpdatePanel. My search button do not causes full postback, i.e ideal but RadioButtonList inside Repeater control does. I have no idea what to do.
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<table align="center" border="1" cellspacing="0" class="tabmn6">
<tr id="trheader" runat="server">
<th id="trEdit" runat="server">Edit</th>
<th>User Name </th>
<th>Role</th>
<th>From Date</th>
<th>To Date</th>
<th>Comment</th>
<th>Status</th>
</tr>
<asp:Repeater ID="rpUserDetails" runat="server" OnItemDataBound="rpUserDetails_ItemDataBound">
<ItemTemplate>
<tr>
<td id="tdRPEdit" runat="server" align="center">
<input type="button" class="editbtn" name="btnEdit" id="btnEdit" runat="server" onclick='<%# string.Format("javascript:return AddBoardCast(\"{0},{1}\")", Eval("BC_ID"),"Edit") %>'>
</td>
<td id="trRPTL" runat="server" align="center">
<asp:Label ID="lblUName" runat="server" ForeColor="Red" Text='<%#Eval("UserName")%>' />
</td>
<td align="center">
<asp:Label ID="lblRoleName" runat="server" ForeColor="Black" Text='<%#Eval("RoleName")%>' />
</td>
<td align="center">
<asp:Label ID="lblToDate" runat="server" ForeColor="Black"><%#DataBinder.Eval(Container.DataItem, "BC_FromDate", "{0:dd/MM/yyyy}")%></asp:Label>
</td>
<td align="center"><asp:Label ID="lblFromDate" runat="server" ForeColor="Black"><%#DataBinder.Eval(Container.DataItem, "BC_TODate", "{0:dd/MM/yyyy}")%></asp:Label></td>
<td align="center" width="20%">
<div style="color: black"><%#Eval("BC_Comment")%></div>
</td>
<td align="center">
<asp:HiddenField ID="hdnBC_ID" runat="server" Value='<%#Eval("BC_ID") %>' />
<asp:HiddenField ID="hdnUserID" runat="server" Value='<%#Eval("UserID") %>' />
<asp:RadioButtonList ID="rdStatus" runat="server" Height="48px" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="rdStatus_SelectedIndexChanged" CssClass="rad">
<asp:ListItem Text="Active" Value="1"></asp:ListItem>
<asp:ListItem Text="Deactive" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</ContentTemplate>
</asp:UpdatePanel>

CommandName and CommandArguments are not properly working in ListView

I am facing problems while using the ListView Control in asp.net
I used two buttons links in a ListView ItemTemplate. For both buttons, I used Command Name and Command Argument. But first one is working fine and the second one is giving errors. I.e.
System.InvalidOperationException: Insert can only be called on an insert item. Ensure only the InsertTemplate has a button with CommandName=Insert.
If I want to add the InsertTemplate, where do we have to place it?
I am copying my code. Please help me.
Design View :
<asp:ListView ID="ListView1" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1" GroupItemCount="2" OnPagePropertiesChanging="ListView1_PagePropertiesChanging" DataKeyNames="InventoryID" OnItemCommand="ListView1_ItemCommand">
<LayoutTemplate>
<table width="100%">
<tr style="background-color:lightblue;color:blue;text-align:center;font-size:25px;font-weight:bold">
<td colspan="2">Available Books</td>
</tr>
<asp:PlaceHolder ID="groupPlaceHolder1" runat="server"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder ID="itemPlaceHolder1" runat="server"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<table cellpadding="2" cellspacing="0" border="1" style="width:100%;height:100px; border:dashed 1px #04AFEF;background-color:#B0E2F5">
<tr>
<td>
<asp:Button ID="btnReview" runat="server" Text="Review" CommandName="Select" CommandArgument='<%# Eval("InventoryID") %>'/>
</td>
<td></td>
<td>
<asp:Button ID="btnAddToCart" runat="server" Text="Add To Cart" CommandName="Insert" CommandArgument='<%# Eval("InventoryID") %>' />
</td>
</tr>
</table>
</td>
</ItemTemplate>
</asp:ListView>
Well you can insert a InsertItemTemplate like here :
<InsertItemTemplate>
<tr style="background-color:#D3D3D3">
<td valign="top">
<asp:Label runat="server" ID="FirstNameLabel"
AssociatedControlID="FirstNameTextBox" Text="First Name"/>
<asp:TextBox ID="FirstNameTextBox" runat="server"
Text='<%#Bind("FirstName") %>' /><br />
<asp:Label runat="server" ID="LastNameLabel"
AssociatedControlID="LastNameTextBox" Text="Last Name" />
<asp:TextBox ID="LastNameTextBox" runat="server"
Text='<%#Bind("LastName") %>' /><br />
<asp:Label runat="server" ID="EmailLabel"
AssociatedControlID="EmailTextBox" Text="E-mail" />
<asp:TextBox ID="EmailTextBox" runat="server"
Text='<%#Bind("EmailAddress") %>' />
</td>
<td>
<asp:LinkButton ID="InsertButton" runat="server"
CommandName="Insert" Text="Insert" />
</td>
</tr>
</InsertItemTemplate>
Used From : https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.insertitemtemplate(v=vs.110).aspx

Couldn't see my Popup window

I given my coding for a modal popup using AJAX. The problem is when I click the button, the popup is not displaying instead, it is just blinking once. Look at my code and tell me what is the problem with it.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:LinkButton ID="LinkButton1" runat="server">Login</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" Width="241px" Style="display:none" >
<table style="border-style: inherit; border-width: thin; width:100%;">
<tr>
<td class="style2">Username</td>
<td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td class="style3">Password</td>
<td class="style1"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td class="style2"><asp:Button ID="Button1" runat="server" Text="Signin" /> </td>
<td><asp:Button ID="Button2" runat="server" Text="Cancel" /></td>
</tr>
</table>
</asp:Panel>
<ajaxTK:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
OkControlID="Button1"
CancelControlID="Button1"
BackgroundCssClass="modepop">
</ajaxTK:ModalPopupExtender>

Modalpopup wont close when dropdown is selected

I've been having this odd issue with modal popups. For some reason when I choose a dropdown item my update button wont fire a click event. but then I leave the dropdown at their default values the update button works just fine.
here's my aspx page code
<asp:Button ID="Button1" CssClass="hide" runat="server" Text="Button" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="cfPopUp" PopupControlID="Panel4"
TargetControlID="Button1" OkControlID="cfUpdateBtn" CancelControlID="cfCancelBtn" />
<asp:Panel ID="Panel4" runat="server" CssClass="modalPopup">
<asp:UpdatePanel ID="UpdatePanel2" runat="Server">
<ContentTemplate>
<asp:Panel ID="Panel13" CssClass="" runat="server">
<asp:Panel ID="Panel14" CssClass="" runat="server">
<div style="padding: 10px; border: 3px solid black; background-color: White; color: Black;">
<asp:Label ID="Label25" Width="200px" runat="server" Text="Health and Safety Net" /><div
class="seperator">
</div>
<table class="style143">
<tr>
<td class="style185">
<asp:Label ID="cfCategorylbl" runat="server" Text="Category:"></asp:Label>:
</td>
<td>
<asp:DropDownList ID="cbFactors_Categories" runat="server" Width="350px" Font-Names="Tahoma"
Font-Size="Small" ForeColor="DimGray" Height="24px" CssClass="style75">
</asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="cbFactors_Categories"
Category="categories" ServiceMethod="getCategory" ServicePath="~/2012/IrSubmitWebService.asmx"
PromptText="Select Category" />
</td>
<td align="center" rowspan="3" valign="top">
<asp:Label ID="lblFactor_ID" runat="server" Font-Names="Tahoma" Font-Size="Small"
ForeColor="DimGray" Style="font-style: italic" TabIndex="56"></asp:Label>
<cc1:DynamicPopulateExtender ID="lblFactor_ID_DynamicPopulateExtender" runat="server"
Enabled="True" TargetControlID="lblFactor_ID" BehaviorID="dp1" ServiceMethod="getFactorID"
ServicePath="~/2012/IrSubmitWebService.asmx">
</cc1:DynamicPopulateExtender>
<hr class="style157" />
<asp:Label ID="cfID" runat="server" Font-Names="Tahoma" Font-Size="Small" ForeColor="DimGray"
Style="font-style: italic" Width="400px" TabIndex="57"></asp:Label>
</td>
</tr>
<tr>
<td class="style185">
<asp:Label ID="cfTypeslbl" runat="server" Text="Type:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="cbFactors_Types" runat="server" ForeColor="DimGray" Height="24px"
TabIndex="54" Width="350px" Font-Names="Tahoma" Font-Size="Small" CssClass="style75">
</asp:DropDownList>
<cc1:CascadingDropDown ID="cbFactors_Types_CascadingDropDown" runat="server"
TargetControlID="cbFactors_Types" ParentControlID="cbFactors_Categories" Category="type"
ServiceMethod="getTypeofAction" ServicePath="~/2012/IrSubmitWebService.asmx"
PromptText="Select Type">
</cc1:CascadingDropDown>
</td>
</tr>
<tr>
<td class="style185">
<asp:Label ID="cfFactorslbl" runat="server" Text="Factor:"></asp:Label>
</td>
<td>
<asp:DropDownList ID="cbFactors_Factors" runat="server" ForeColor="DimGray" Height="24px"
TabIndex="55" Width="350px" Font-Names="tahoma" Font-Size="Small" CssClass="style75">
</asp:DropDownList>
<cc1:CascadingDropDown ID="cbFactors_Factors_CascadingDropDown" runat="server"
TargetControlID="cbFactors_Factors" ParentControlID="cbFactors_Types" Category="category"
ServiceMethod="getFactor" ServicePath="~/2012/IrSubmitWebService.asmx" PromptText="Select Factor">
</cc1:CascadingDropDown>
</td>
</tr>
<tr>
<td class="style185">
<asp:Label Text="Justification:" ID="cfJustificationlbl" runat="server"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="txtJustification" runat="server" ForeColor="DimGray" Height="29px"
Style="font-family: Tahoma; font-size: small" TabIndex="56" TextMode="MultiLine"
ToolTip="Provide a justification for this factor." Width="775px" Font-Names="Tahoma"
Font-Size="Small"></asp:TextBox>
</td>
</tr>
</table>
<br />
<div style="text-align: center">
<asp:Button CausesValidation="false" ID="cfUpdateBtn" runat="server"
Text="Update" CssClass="button" /><span style="margin-left: 10px"><asp:Button CausesValidation="false"
ID="cfCancelBtn" runat="server" Text="Cancel" CssClass="button" /></span></div>
</div>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
and my code behind for my update (it just closes the popup)
Protected Sub cfUpdateBtn_Click(sender As Object, e As EventArgs) Handles cfUpdateBtn.Click
cfPopUp.Hide()
End Sub
For the life of me I can't figure out why the update button wont work when the dropdowns are not the default value.
Thanks for your help guys
The possible reason may be you are binding your dropdownlist with a webservice. Whenever you click to an item on dropdownlist webservice may be called. If webservice is called then may be your page again loaded ? I don't know the exact reason why it is not working. You have to check the service behavior what happened when the service is called.
I basically rebuilt my modal popup and update panel like so
<asp:Panel ID="pnlEditPopup" runat="server" CssClass="modalPopup">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlEditPopupContent" runat="server">
<div style="padding: 10px; border: 3px solid black; background-color: White; color: Black;">
<table cellpadding="0" cellspacing="4" border="0">
<tr>
<td class="name">Category:</td>
<td class="value">
<asp:DropDownList id="ddCat" runat="server">
<asp:listitem value="">No Selection</asp:listitem>
<asp:listitem value="Action">Action</asp:listitem>
<asp:listitem value="Worksite">Worksite</asp:listitem>
<asp:listitem value="Human Factors">Human Factors</asp:listitem>
<asp:listitem value="System Factors">System Factors</asp:listitem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="name">Type:</td>
<td class="value">
<asp:DropDownList id="ddType" runat="server" />
<ajaxToolkit:CascadingDropDown ID="ccType" runat="server"
TargetControlID="ddType"
ParentControlID="ddCat"
PromptText="No Selection"
LoadingText="Please Wait..."
ServicePath="~/2012/IrSubmitWebService.asmx"
ServiceMethod="getTypeofAction"
Category="Other"
/>
</td>
</tr>
<tr>
<td class="name">Factor:</td>
<td class="value">
<asp:DropDownList id="ddfactor" runat="server" />
<ajaxToolkit:CascadingDropDown ID="ccFactor" runat="server"
TargetControlID="ddfactor"
ParentControlID="ddType"
PromptText="No Selection"
LoadingText="Please Wait..."
ServicePath="~/2012/IrSubmitWebService.asmx"
ServiceMethod="getFactor"
Category="Other"
/>
</td>
</tr>
<tr>
<td>
Justification:
<asp:Label ID="factorID" runat="server" Visible="false"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtJustification" runat="server" ForeColor="DimGray" Height="100px"
Style="font-family: Tahoma; font-size: small" TabIndex="56" TextMode="MultiLine"
ToolTip="Provide a justification for this factor." Width="300px" Font-Names="Tahoma"
Font-Size="Small"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Factor ID<br />
and Description:
</td>
<td>
<asp:Label ID="factor_id_Desc" runat="server" Width="300px" Font-Names="Tahoma" Font-Size="Small"
ForeColor="DimGray" TabIndex="56"></asp:Label>
<cc1:DynamicPopulateExtender ID="DynamicPopulateExtender1" runat="server"
Enabled="True" TargetControlID="factor_id_Desc" BehaviorID="dp1" ServiceMethod="getFactorID"
ServicePath="~/2012/IrSubmitWebService.asmx">
</cc1:DynamicPopulateExtender>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="btnOkEditPopup" runat="server" Text="Ok" CssClass="button"/>
<span style="margin-left:10px"><asp:button id="btnCancelEditPopup" runat="server" text="Cancel" CssClass="button"/></span>
</td>
</tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeEdit" runat="server"
TargetControlID="btnOpenEditPopup"
PopupControlID="pnlEditPopup"
/>
Fixed my issue. I still dont know why it wasn't working when I asked the question but I was able to solve it. Thanks to all who looked into it for me.

Calendar extender in modal popup extender ASP.NET not working

I'm using a calendar extender in a panel which popup using modalpopup extender, so panel is poped up contains the calendar extender but the calendar is behind every thing, i tried to change the z-index but all in vain, seems to me that it is a bug in the ASP.net AjaxToolKit.Any one has an idea about this problem and if it can be solved?
Edit:
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.2;
}
.ob_show_panelsholder
{
border: 1px solid #736F6E;
}
.enterzipCalenderCompliant {
PADDING-RIGHT: 10px; FLOAT: left /*No display=inline*/
}
.ajax__calendar_container { z-index : 1000 ; }
</style>
<script type="text/javascript">
function calendarShown(sender, args) {
sender.style.zIndex = 10005;
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlShowPersonalData" runat="server">
<table class="style1">
<tr>
<td>
<asp:Image ID="_imgCurrentPP" runat="server" Height="100px" Width="100px" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="First name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblFirstName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLastName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="BirthDate :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblBirthDate" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label10" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblMobileNumber" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label12" runat="server" Text="Location :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLocation" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label13" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblGender" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnEditPersonalData" runat="server" Text="Edit Profile" />
<asp:ModalPopupExtender ID="_btnEditPersonalData_ModalPopupExtender" runat="server"
DynamicServicePath="" Enabled="True" TargetControlID="_btnEditPersonalData" BackgroundCssClass="modalBackground"
PopupControlID="_pnlEditPersonalData" CancelControlID="_btnCancel">
</asp:ModalPopupExtender>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="_pnlEditPersonalData" runat="server">
<table>
<tr>
<td>
<asp:Label ID="_FirstName" runat="server" Text="First name :" ></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_LastName" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_BirthDate" runat="server" Text="Birth date :"></asp:Label>
</td>
<td class="ajax__calendar_container">
<asp:TextBox ID="_txtBirthDate" runat="server"></asp:TextBox>
<asp:MaskedEditExtender ID="_txtBirthDate_MaskedEditExtender" runat="server" Enabled="True"
TargetControlID="_txtBirthDate" MaskType="Date" ErrorTooltipEnabled="True" MessageValidatorTip="true"
Mask="99/99/9999">
</asp:MaskedEditExtender>
<div>
<asp:CalendarExtender ID="_txtBirthDate_CalendarExtender" runat="server" Enabled="True"
PopupButtonID="_btnCalendar" TargetControlID="_txtBirthDate">
</asp:CalendarExtender>
</div>
<asp:ImageButton ID="_btnCalendar" runat="server" ImageUrl="~/Images/calendar_button_b.jpg" />
<%-- <img alt="Icon" src="~/Images/calendar_button_b.jpg" id="Image1" />--%>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_ProfilePic" runat="server" Text="Profile picture :"></asp:Label>
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="FileUpload1"--%><%-- ErrorMessage="*" ValidationGroup="signup"></asp:RequiredFieldValidator>--%>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.png|.jpg)$"
ControlToValidate="FileUpload1" ErrorMessage="Please Select Png or Jpg File"
ValidationGroup="UploadFile"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_MobileNumber" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtMobileNumber" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Password" runat="server" Text="Password :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlLocation" runat="server">
<table width="21%">
<tr>
<td>
<asp:Label ID="_Country" runat="server" Text="Country :"></asp:Label>
</td>
<td>
<uc1:CountryListUC ID="CountryListUC1" runat="server" EnablePostBack="True" EnableValidation="False"
OnListIndexChanged="CountrySelectedIndexChanged" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Governet" runat="server" Text="Governet:"></asp:Label>
</td>
<td>
<uc2:GovernateListUC ID="GovernateListUC1" runat="server" OnListIndexChanged="GovernateSelectedIndexChanged"
Enabled="False" EnablePostBack="True" EnableValidation="False" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="_District" runat="server" Text="District :"></asp:Label>
</td>
<td>
<uc3:DistrictListUC ID="DistrictListUC1" runat="server" Enabled="False" EnablePostBack="True"
EnableValidation="False" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CountryListUC1" EventName="ListIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<table width="22%">
<tr>
<td>
<asp:Label ID="_Gender" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:DropDownList ID="_ddlGender" runat="server">
<asp:ListItem Value="1">Male</asp:ListItem>
<asp:ListItem Value="2">Female</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnSaveChanges" runat="server" OnClick="_btnSaveChages_Click" Text="Save changes"
ValidationGroup="signup" />
</td>
<td valign="bottom">
<asp:Button ID="_btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
is the calendar extender an ajax extender or did you mean the asp calendar control? Either way I've tried both in your same situation described and it works. Try posting some code you are using so we can see where the issue lies and be of further assistance.
Edit: here's the code I used from yours. I took out the usercontrols so I could debug the page and it seemed to work. Here's an a screenshot
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="web.test" %>
<!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></title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.2;
}
.ob_show_panelsholder
{
border: 1px solid #736F6E;
}
.enterzipCalenderCompliant {
PADDING-RIGHT: 10px; FLOAT: left /*No display=inline*/
}
.ajax__calendar_container { z-index : 1000 ; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="smtest" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlShowPersonalData" runat="server">
<table class="style1">
<tr>
<td>
<asp:Image ID="_imgCurrentPP" runat="server" Height="100px" Width="100px" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="First name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblFirstName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label5" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLastName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="BirthDate :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblBirthDate" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label10" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblMobileNumber" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label12" runat="server" Text="Location :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblLocation" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label13" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:Label ID="_lblGender" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnEditPersonalData" runat="server" Text="Edit Profile" />
<ajaxToolkit:ModalPopupExtender ID="_btnEditPersonalData_ModalPopupExtender" runat="server" TargetControlID="_btnEditPersonalData" BackgroundCssClass="modalBackground" PopupControlID="_pnlEditPersonalData" CancelControlID="_btnCancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="_pnlEditPersonalData" runat="server">
<table>
<tr>
<td>
<asp:Label ID="_FirstName" runat="server" Text="First name :" ></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_LastName" runat="server" Text="Last name :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_BirthDate" runat="server" Text="Birth date :"></asp:Label>
</td>
<td class="ajax__calendar_container">
<asp:TextBox ID="_txtBirthDate" runat="server"></asp:TextBox>
<ajaxtoolkit:MaskedEditExtender ID="_txtBirthDate_MaskedEditExtender" runat="server" Enabled="True"
TargetControlID="_txtBirthDate" MaskType="Date" ErrorTooltipEnabled="True" MessageValidatorTip="true"
Mask="99/99/9999">
</ajaxtoolkit:MaskedEditExtender>
<div>
<ajaxtoolkit:CalendarExtender ID="_txtBirthDate_CalendarExtender" runat="server" Enabled="True"
PopupButtonID="_btnCalendar" TargetControlID="_txtBirthDate">
</ajaxtoolkit:CalendarExtender>
</div>
<asp:ImageButton ID="_btnCalendar" runat="server" ImageUrl="~/Images/calendar_button_b.jpg" />
<%-- <img alt="Icon" src="~/Images/calendar_button_b.jpg" id="Image1" />--%>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_ProfilePic" runat="server" Text="Profile picture :"></asp:Label>
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<%-- <asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ControlToValidate="FileUpload1"--%><%-- ErrorMessage="*" ValidationGroup="signup"></asp:RequiredFieldValidator>--%>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.png|.jpg)$"
ControlToValidate="FileUpload1" ErrorMessage="Please Select Png or Jpg File"
ValidationGroup="UploadFile"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_MobileNumber" runat="server" Text="Mobile number :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtMobileNumber" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Password" runat="server" Text="Password :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="_pnlLocation" runat="server">
<table width="21%">
<tr>
<td>
<asp:Label ID="_Country" runat="server" Text="Country :"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_Governet" runat="server" Text="Governet:"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="_District" runat="server" Text="District :"></asp:Label>
</td>
<td>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<table width="22%">
<tr>
<td>
<asp:Label ID="_Gender" runat="server" Text="Gender :"></asp:Label>
</td>
<td>
<asp:DropDownList ID="_ddlGender" runat="server">
<asp:ListItem Value="1">Male</asp:ListItem>
<asp:ListItem Value="2">Female</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Button ID="_btnSaveChanges" runat="server" Text="Save changes"
ValidationGroup="signup" />
</td>
<td valign="bottom">
<asp:Button ID="_btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
CSS solution that worked for me:
.ajax__calendar_container
{
position :absolute;
z-index : 100003 !important;
}
Make sure to use !important declaration. Without it z-index was always overwrited by higher settings. You should also check z-index in css for popup dialog and it's background.

Resources