I have 2 panels and using ajax modalpopup control
<asp:Panel ID="pnlHead" runat="server" CssClass="modalPopup">
<asp:Panel ID="pnlBody" runat="server">
<div id="popupHead">
<div id="popup_left">
<asp:Label ID="lblProduct" runat="server"></asp:Label></div>
<!-- end banner_left -->
<div id="popup_right">
</div>
<!-- end banner_right -->
</div>
</asp:Panel>
<p>
<asp:PlaceHolder ID="phcontrol" runat="server"></asp:PlaceHolder>
</p>
<div>
<center>
<asp:ImageButton ID="imgbtnOk" runat="server" OnClick="imgbtnOk_Click" />
</center>
</div>
</asp:Panel>
<asp:Panel ID="pnlHeadWD" runat="server" CssClass="modalPopupWD"
BackImageUrl="~/WebSiteContent/Images/Cloud.JPG">
<asp:Panel ID="pnlBodyWD" runat="server">
<div id="Div1" style="position: absolute; left: 15%; top: 15%; vertical-align: middle;">
<br />
<br />
<br />
<br />
<br />
<p>
<asp:PlaceHolder ID="phcontrolWD" runat="server"></asp:PlaceHolder>
</p>
<div>
<center>
<asp:ImageButton ID="imgbtnOkWD" runat="server" Visible="false" OnClientClick="$find('pnlHeadWD').hide(); return false;" />
</center>
</div>
</div>
</asp:Panel>
</asp:Panel>
<asp:TextBox ID="txtHidden" Visible="false" runat="server"></asp:TextBox>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lblCopyright"
PopupControlID="pnlHead" BackgroundCssClass="modalBackground" DropShadow="true"
PopupDragHandleControlID="pnlBody">
</cc1:ModalPopupExtender>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="lblCopyright"
BehaviorID="pnlHeadWD" PopupControlID="pnlHeadWD" BackgroundCssClass="modalBackground"
DropShadow="true" PopupDragHandleControlID="pnlBodyWD">
</cc1:ModalPopupExtender>
when I tried to call the first ModalPopupExtender1 then even the second ModalPopupExtender2 is getting executed and 2 modal popup extenders are shown.
public void Populate_Popup(String URL,String Message_Identifier)
{
this.ModalPopupExtender1.Show();
}
public void Populate_Popup2(string Message)
{
this.ModalPopupExtender2.Show();
}
Your TargetControlID="lblCopyright" is the same for both ModalPopupExtenders.
Related
my problem is when i click the imagebutton ("imgEdit") in the listview the scroll bar of my listview doesnt stay in the position where i click it.
heres my code:
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ListView ID="LV_Profile" runat="server" GroupItemCount="1" GroupPlaceholderID="groupPlaceHolder1"
ItemPlaceholderID="itemPlaceHolder1" OnItemDataBound="LV_Profile_ItemDataBound" OnSelectedIndexChanged="LV_Profile_SelectedIndexChanged" >
<LayoutTemplate>
<div id ="mainprofile" style="overflow-x: scroll; margin: 0 65px;" runat="server">
<div id="subdivprof" runat="server" style="height: inherit; width: 3400px; margin: 10px 0;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</div>
</div>
</LayoutTemplate>
<GroupTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</GroupTemplate>
<ItemTemplate>
<div class="divprofile">
<div id="proftools" class="tools" runat="server">
<asp:ImageButton ID="imgCancel" CssClass="img"
ImageUrl="~/images/Delete-52 (1).png" runat="server" alt=""
ToolTip="Cancel edit" Visible="False" OnClick="DoneEdit" />
<asp:ImageButton ID="imgDone" CssClass="img"
ImageUrl="~/images/Checkmark-52.png" runat="server" alt=""
ToolTip="Done edit" Visible="False" />
<asp:ImageButton ID="imgEdit" CssClass="img" ImageUrl="~/images/Edit User Male-52.png"
runat="server" alt="" ToolTip="Edit profile" OnClick = "EditUser" />
<asp:ImageButton ID="imgEmail" CssClass="img" ImageUrl="~/images/-Message Filled-52.png"
runat="server" alt="" ToolTip="Send an email" />
</div>
<div id="proginfo" runat="server">
<div class="level"><%#Eval("Prog_Pos")%></div>
<div class="pic"><asp:ImageButton ID="ImageButton1" CssClass="img" runat="server" onclick="FindUser" OnClientClick="return chooseFile();" ToolTip='<%#Eval("Idno")%>' Enabled="False" /></div>
<div class="nickname"><asp:Textbox ID="txtNickname" runat="server" Text='<%#Eval("NickName") %>' CssClass="txt" Enabled="false" style="margin-top:10px;"></asp:Textbox></div>
<div class="name"><asp:TextBox ID="txtName" runat="server" Text='<%#Eval("Name")%>' CssClass ="txt" Enabled="false" ></asp:TextBox></div>
<div class="email"><asp:Textbox ID="txtEmail" runat="server" Text='<%#Eval("emailAddress")%>' CssClass="txt" Enabled="false"></asp:Textbox></div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
Thanks in advance. :)
You need after update return list position.
Add in .aspx
<asp:HiddenField id="scrollPosition" runat="server"/>
Next you need in JS
find this hiddenfield
var hdField = document.getElementById(<%=scrollPosition.ClientID%>);
find list
var list= document.getElementById('LV_Profile');
OnScroll event set value to your HiddenField
list.onscroll = function() {
hdField .value = list.scrollTop;
}
When window or document is onload return saved position
window.onload = function () {
list.scrollTop = hdField.value;
}
I have a page with multiple modal popups and a gridview. If i open the popups 3 times the grid goes infront of the popup. I am pretty sure it has somethign to do witht eh update panels but i am stumped.
Here is the Code
<asp:UpdatePanel ID="NewCustCarUP" runat="server">
<ContentTemplate>
<asp:button ID="NewCustButton" runat="server" CssClass="btn btn btn-success" text="Add Customer" OnClick="NewCustButton_Click"/>
<asp:button ID="NewCarButton" runat="server" CssClass="btn btn btn-primary" text="Add Carrier" OnClick="NewCarButton_Click"/>
<!-- MP ADD CUST -->
<asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mpAddCust" runat="server" PopupControlID="NewCustPanel" TargetControlID="lnkFake"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowResizeAndScroll">
</cc1:ModalPopupExtender>
<asp:Panel ID="NewCustPanel" runat="server" CssClass="modalPopup" style = "display: none; width:65%; height:90%; overflow:scroll; ">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"><br />
<asp:Button ID="newCustInsert" runat="server" UseSubmitBehavior="false" OnClick="newCustInsert_Click" CssClass="btn btn-success" ValidationGroup="NewCust" Text="Add Customer" />
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="btn btn-danger" />
</div>
<div class="col-sm-4 col-md-4 col-lg-4"></div>
</div>
</asp:Panel>
<!-- END MP ADD CUST -->
<!-- MP ADD CARRIER -->
<asp:LinkButton ID="lnkFake1" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="mpAddCar" runat="server" PopupControlID="NewCarPanel" TargetControlID="lnkFake1"
CancelControlID="btnCloseCar" BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowResizeAndScroll">
</cc1:ModalPopupExtender>
<asp:Panel ID="NewCarPanel" runat="server" CssClass="modalPopup" style = "display: none; width:65%; height:90%; overflow:scroll; ">
<div class="row">
<div class="col-sm-4">
.....Code with textboxes</div>
<div class="col-sm-4">
<asp:Button ID="InsertCarBtn" runat="server" Text="Add Carrier" CssClass="btn btn-success" OnClick="InsertCarBtn_Click" ValidationGroup="NewCar" />
<asp:Button ID="btnCloseCar" runat="server" Text="Close" CssClass="btn btn-danger" />
</div>
<div class="col-sm-4 col-md-4 col-lg-4"></div>
</div>
</asp:Panel>
<!-- END MP ADD CARRIER -->
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="MPStatusUP" runat="server">
<ContentTemplate>
<asp:panel ID="StatusPanel" runat="server" CssClass="modalPopup" style="z-index: 10000; position: relative;" >
<div class="row">
<div class="col-sm-4">
....Content
</div>
<div class="col-sm-4">
<asp:button ID="StatusbtnUpdate" runat="server" Text="Update" CssClass="btn btn-success" OnClick="StatusbtnUpdate_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn btn-danger" OnClientClick = "return Hidepopup()"/>
</div>
<div class="col-sm-4 col-md-4 col-lg-4"></div>
</div>
</asp:panel>
<asp:LinkButton ID="lnkFake3" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender ID="StatusMP" runat="server" DropShadow="false"
PopupControlID="StatusPanel" TargetControlID = "lnkFake3"
BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="Gridview1UP" runat="server" ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
<asp:gridview ID="GridView1" runat="server"
DataSourceID="ActiveLoadsSQL" AutoGenerateColumns="False" BorderStyle="None" BorderWidth="0px" Width="100%"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDataBound="GridView1_RowDataBound"
DataKeyNames="LoadID" AllowSorting="true" AllowPaging="true" Font-Size="Smaller" CssClass="table table-hover"
pagesize="25">
<Columns>
<asp:TemplateField HeaderText="loadID" InsertVisible="False" SortExpression="loadID">
<ItemTemplate>
<asp:Label ID="loadIDLabel" runat="server" Text='<%# Bind("loadID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</asp:TemplateField>
<asp:TemplateField HeaderText="Status">
<ItemTemplate>
<asp:Button ID="UpdateStatusModalbtn" OnClick="UpdateStatusModalbtn_Click" runat="server" CommandName="select" CssClass="btn btn-info btn-xs" text="Update"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle VerticalAlign="Top" />
</asp:gridview>
</ContentTemplate>
</asp:UpdatePanel>
It all works great until i get i click on a button 3 times on the status modal inside the GV and 4 times on the Add Customer and carrier outside of the GV. Thanks for your help!!
Fixed with this post
AJAX ModalPopup Pops Behind (Under) Page Content (Negative z-index)
.ModalPopup
{
z-index: 6001 !important;
}
.ModalPopupBackground
{
z-index: 6000 !important;
}
<asp:Panel id="container" CssClass="container" runat="server" style="width:850px">
<asp:Panel runat="server" id="header" cssClass="header" >
<div class="msg"> </div>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="clearDataKey()" />
</asp:Panel>
<div runat="server" id="whatup">
<asp:Panel ID="Panel2" runat="server" >
<uc1:messageBox ID="InfoBox" runat="server" />
</asp:Panel>
</div>
<asp:updatepanel ID="upcsconfirmation" runat="server">
<ContentTemplate>
<cc1:ModalPopupExtender ID="popupCS" runat="server" BehaviorID="popupCS" TargetControlID="btnTargetCS"
PopupControlID="pnlPopupCS" BackgroundCssClass="modalBackground"/>
<asp:Button ID="btnTargetCS" runat="server" Text="Button" cssClass="hide" />
<cc1:DragPanelExtender ID="DragPanelExtenderCS" TargetControlID="pnlPopupCS" runat="server"></cc1:DragPanelExtender>
<asp:Panel ID="pnlPopupCS" runat="server" SkinID="modal"></asp:Panel>
</ContentTemplate>
</asp:updatepanel>
<div class="body" >
<div class="contentarea" style="height:200px;">
<asp:TextBox ID="datakeyholder" runat="server" style="display:none" Enabled="False" />
<asp:ObjectDataSource ID="odsCopyCustRequirements" runat="server" InsertMethod="InsertSearchRequirement"
TypeName="SearchRequirementsDataObject"
oninserting="Requirements_Inserting" >
</asp:ObjectDataSource>
<div style="height: 100%; width: 100%">
<div id="Div1" style="float: left; width: 45%; padding-left:10px">
<div class="column130">
<asp:Label ID="lblSearch1" runat="server" Text="FAST Region:"></asp:Label></div>
<asp:UpdatePanel ID="UpnlCust" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<div class="column130">
<asp:DropDownList ID="ddSearch1" AutoPostBack="true" DataTextField="Name"
OnSelectedIndexChanged="ddSearch_SelectedIndexChanged" DataValueField="id"
runat="server" Width="150px">
</asp:DropDownList>
</div>
<div class="column130">
<asp:Label ID="lblSearch2" runat="server" Text="Owning Office:"></asp:Label></div>
<div class="column130">
<asp:DropDownList ID="ddSearch2" DataTextField="Name" DataValueField="fastid"
runat="server" Width="150px">
</asp:DropDownList>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddSearch1" />
</Triggers>
</asp:UpdatePanel>
<div class="column">
</div>
</div>
</div>
</div>
<p></p>
The upper update panel (upcsconfirmation) containing modal popup extender should have UpdateMode = "Conditional" - otherwise, asynchronous post-back from bottom update panel will also update its content restoring the modal popup to hidden state.
Yet another way to solve your issue is to use Show method of popup extender on server side when the bottom update panel posts back (for example, you can put the call popupCS.Show() in ddSearch_SelectedIndexChanged to keep the modal popup open).
I created Ajax modal pop up. This is not support drag.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="Button1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
CancelControlID="btnCancel"
RepositionMode="None"
PopupDragHandleControlID="PopUpHeader" />
<asp:Button ID="Button1" runat="server" Text="First Modal Popup" />
<asp:Panel ID="Panel1" runat="server" Height="180px" Width="400px" CssClass="ModalWindow">
<div id="PopUpHeader" style="background-color:Yellow;">
Error Message
</div>
<div>
My name is error of proble. For comming is satun.
<br /><br /><br /><br />
</div>
<div>
<input type="button" id="btnCancel" runat="server" value="Close" style="float:right;margin-right:20px;" />
</div>
</asp:Panel>
How I get the drag and drop.
Firstly http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx
And you must edit PopupDragHandleControlID="PopUpHeader" with PopupDragHandleControlID="Panel1"
PopupDragHandleControlID
is controling whict panel are you using with Modal Popup.
They all appear left aligned. I've tried setting the body tag to text-align:center, making divs around and in the main panel, but I can't get it to work. Any ideas?
Here is my CSS code:
.MainPanel {
background-color:#ccccff;
margin-bottom:10px;
margin-top:10px;
}
.MainPanel div {
margin-bottom:10px;
margin-top:10px;
}
.panelSpace {
margin-bottom:25px;
margin-top:25px;
}
.buttonWidth { clear: both; }
.buttonWidth div {
width:17%;
float:left;
margin-left:20px;
}
.centerDiv {
width:100%;
text-align:center;
}
And here's my html:
<body>
<form id="form1" runat="server">
<div style="height:100px; text-align:center;"><uc1:Header ID="Header1" runat="server" /></div><br /><br />
<div>
<div><asp:Label runat="server" ID="lblErrorMessage" CssClass="lblErrorMessage" /></div>
<asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px">
<div class="centerDiv">
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" Width="550" BorderColor="DarkBlue" BorderWidth="2px" >
<div>Customer: <asp:DropDownList ID="ddlCustomerList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomerList_SelectedIndexChanged" /></div>
</asp:Panel>
</div>
<span class="panelSpace" />
<asp:Panel ID="Panel2" runat="server" CssClass="MainPanel" Width="700" BorderColor="DarkBlue" BorderWidth="2px" style="overflow:auto;" >
<div>
<div class="buttonWidth">
<div>
<asp:Label ID="lblDataSync" runat="server" Text="Data Sync" /><br />
<asp:ImageButton ID="imgDataSync" ImageUrl=".\images\data_sync.bmp" runat="server"
Width="50px" Height="50px" OnClick="imgDataSync_Click" />
</div>
<div>
<asp:Label ID="lblEDI" runat="server" Text="EDI" /><br />
<asp:ImageButton ID="imgEDI" ImageUrl=".\images\edi.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgEDI_Click" />
</div>
<div>
<asp:Label ID="lblShipping" runat="server" Text="Shipping/Routing" /><br />
<asp:ImageButton ID="imgShipping" ImageUrl=".\images\shipping_routing.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgShipping_Click" />
</div>
<div>
<asp:Label ID="lblCompliance" runat="server" Text="Compliance/non-Compliant" /><br />
<asp:ImageButton ID="imgCompliance" ImageUrl=".\images\compliance_nc.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgCompliance_Click" />
</div>
<div>
<asp:Label ID="lblLabels" runat="server" Text="Labels"></asp:Label><br />
<asp:ImageButton ID="imgLabels" ImageUrl=".\images\shipping_label.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgLabels_Click" />
</div>
</div>
<div class="buttonWidth">
<div>
<asp:Label ID="lblManuals" runat="server" Text="Manuals/CustomerLinks" /><br />
<asp:ImageButton ID="imgManuals" ImageUrl=".\images\manuals.bmp" runat="server" Width="50px"
Height="50px" OnClick="imgManuals_Click" />
</div>
<div>
<asp:Label ID="lblPackaging" runat="server" Text="Packaging" /><br />
<asp:ImageButton ID="imgPackaging" ImageUrl=".\images\packaging.gif" runat="server"
Width="50px" Height="50px" OnClick="imgPackaging_Click" />
</div>
<div>
<asp:Label ID="lblTesting" runat="server" Text="Testing"></asp:Label><br />
<asp:ImageButton ID="imgTesting" ImageUrl=".\images\testing.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgTesting_Click" />
</div>
<div>
<asp:Label ID="lblShippingQuickReference" runat="server" Text="Shipping Quick Reference"></asp:Label><br />
<asp:ImageButton ID="imgShippingQuickReference" ImageUrl=".\images\ShippingQuickReference.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgShippingQuickReference_Click" />
</div>
</div>
</div>
</asp:Panel>
<span class="panelSpace" />
<asp:Panel ID="Panel3" runat="server" CssClass="MainPanel" Width="800" BorderColor="DarkBlue" BorderWidth="2px" >
<div>
<h2>Recent Updates:</h2>
<asp:GridView ID="grdHistory" runat="server">...</asp:GridView>
<asp:LinqDataSource ID="ldsHistory" runat="server" ContextTypeName="ComplianceDataContext"
TableName="Histories" OrderBy="CreatedDate desc" />
</div>
</asp:Panel>
<span class="panelSpace" />
</div>
</asp:Panel>
</div>
</form>
</body>
Set the width of the panels not in the ASP.NET code, but in the CSS declaration, e.g.
.MainPanel {
background-color:#ccccff;
margin-bottom:10px;
margin-top:10px;
width: 700px;
}
If you do not want to set the style for all panels, but for each panel, then do something like:
<asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" style="width:550px" BorderColor="DarkBlue" BorderWidth="2px" >