I have a button setup to export my gridviews to word. Everything works fine, except I cannot find a way to launch/cancel my modalpopupextender I use to show that processing is happening. If I add it the button click:
btnExportToWord.Attributes.Add("onclick", "StartProgressBarNoValid()") it does not canel the modalpopupextender
Here is the update panel and the javascript function I use.
function StartProgressBarNoValid() {
var myExtender = $find('ProgressBarModalPopupExtender');
ProgressImg = document.getElementById('MyImage');
setTimeout("ProgressImg.src = ProgressImg.src", 10);
myExtender.show();
return true;
}
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<cc1:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
backgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender"
TargetControlID="hiddenField1" PopupControlID="Panel1" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
<img id="MyImage" src="../Images/Vista_Searching_Bar.gif" alt="" />
<div id="processMessage" style="width:200px;" ><br /><br /> Loading...<br /><br />
</div>
</asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
what is wrong with ProgressBarModalPopupExtender.Show() and ProgressBarModalPopupExtender.Hide() from the codebehind?
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;
}
The ModalPopupExtender wires the btnCancel button to trigger the a popup an UpdatePanel. The UpdatePanel is a cancel confirmation which contains a Yes button and a No button. After clicking the No button, the panel is closed but the btnCancel no longer trigger the popup when being clicked again. The Yes button works and triggers the server side YesButton_Click event. Here is my code. Thanks for your help.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server" ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel"
PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I'm not 100% positive but it appears that Extender and Extended controls must reside in the same UpdatePanel. So if you move your Cancel button and ModalPopupExtender control inside the UpdatePanel, it should work as expected.
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<span id="buttons">
<asp:Button ID="btnUndo" Text="Undo Edit" CommandArgument="undo" runat="server"
OnClick="undo" CausesValidation="false" />
<asp:Button ID="btnNewTask" Text="New Task" CommandArgument="newTask" runat="server"
ToolTip="Unchange current and create new task"
OnClick="NewTask" CausesValidation="false" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server"
ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
</span>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel" PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?
<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="Upnl1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table width="100%"><tr>
<td align="center" colspan="3">
<asp:Button ID="btnShowReport" runat="server" CssClass="ButtonClassLong" SkinID="LargeButton"
Text="Show Report" OnClick="btnShowReport_Click" TabIndex="15" />
<asp:Button ID="btnClear" runat="server" CssClass="ButtonClass" Text="Clear" OnClick="btn_Click"
TabIndex="16" />
<asp:Button ID="btnClose" runat="server" CssClass="ButtonClass" OnClick="btnClose_Click"
Text="Close" CausesValidation="False" TabIndex="17" />
<asp:CheckBox ID="ChkPrint" Text="Print View" runat="server" TabIndex="14" />
</td>
</tr>
</table></ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnShowReport" />
</Triggers></asp:UpdatePanel><asp:UpdateProgress ID="UpdateProgress" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="~/App_Themes/RIBO/Images/Progress.gif" AlternateText="Processing"
runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
This is my coding , My issue is when i click the clear button the update progress working well, when i click btnShowReport it wont work.
how to show the update progress for button click event which is in inside the trigger property.
Problem is AssociatedUpdatePanelID . You havn't set Associateid of your 'UpdateProgress`
set it on UpdateProgress
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="Upnl1">
As per MSDN
The UpdateProgress control renders a element that is displayed or hidden
depending on whether an associated UpdatePanel control has caused an
asynchronous postback. For initial page rendering and for synchronous
postbacks, the UpdateProgress control is not displayed.
EDIT:
Reason is <asp:PostBackTrigger ControlID="btnShowReport" />
Which will cause a full page postback. You should change your Trigger to
<asp:AsyncPostBackTrigger ControlID="btnShowReport" />
and it will do the job for you...If you could have read the quoted statement you would have able to solve it by yourself too...
This is working for me, I hope this will helpful for some
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Show Loading Image while uploading images using updatepanel</title>
<style type="text/css">
.overlay
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
</style>
<script type="text/javascript">
function showProgress() {
var updateProgress = $get("<%= UpdateProgress.ClientID %>");
updateProgress.style.display = "block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptmanager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="updatepanel1" UpdateMode="Conditional">
<ContentTemplate>
<div style="align:center; margin-left:350px; margin-top:200px">
<asp:FileUpload ID="uploadfiles1" runat="server" />
<asp:Button ID="btnUpload" Text="Upload" runat="server" onclick="btnUpload_Click" OnClientClick="showProgress()" /><br />
<asp:Label ID="lblMsg" runat="server"/>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="updatepanel1">
<ProgressTemplate>
<div class="overlay">
<div style=" z-index: 1000; margin-left: 350px;margin-top:200px;opacity: 1;-moz-opacity: 1;">
<img alt="" src="loading.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
I have a button on which I am calling a modal pop up extender which is showing a panel. Below is the code:
<asp:Button ID="btnOne" runat="server" Text="View "
onclick=" btnOne_Click" />
<asp:Panel ID="test" CssClass="ModalWindow" Width="100%" ScrollBars="Both" runat="server">
<table id="tblgv" width="100%">
<tr>
<td>
<asp:GridView ID="gvTwo" runat="server">
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnPopUpCancel" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="btnPopUpCancel"
TargetControlID=" btnOne " PopupControlID="test" runat="server">
</asp:ModalPopupExtender>
In the panel, I have a gridview. I want that when I click the button gridview will be loaded. But it is not happening, when I clicked on the button it is not going server side.
help me how to resolve it.
Your problem is that the ModalPopup is showing Client side.
If you what to do stuff (bind the gridview) you need do trigger a postback to the server.
add a dummy target for the ModalPopup
< asp:Button runat="server" ID="HiddenTargetControlForModalPopup" style="display:none" />
set TargetControlID="HiddenTargetControlForModalPopup"
call ModalPopupExtender1.show() inside the btnOne_Click event.
btnOne will now trigger a serverside event. You should also put the Gridview inside a update panel and set btnOne at as asyncpostback trigger.
Hope this will help.
You Can Use Asynchronous PostBack Trigger Or PostBackTrigger as per your need. Id want this Grid View In update panel you need to use Asynchronous PostBack Trigger.
and if you want that page to be reload at button click you need to have post back trigger and make sure that control button to be inside that update panel.
Here is an Example
<asp:UpdatePanel ID="UPDTree" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkfaketree" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="mpeTree" runat="server" BackgroundCssClass="modalBackground recharge" CancelControlID="btntreeclose" PopupControlID="paneltree" TargetControlID="lnkfaketree"></asp:ModalPopupExtender>
<asp:Panel ID="paneltree" runat="server" Style="display: none">
<div class="btn-group pull-right">
</div>
<div class="box box-primary">
<div class="box-header with-border" style="padding: 3px; background-color: #14181a; font-weight: bolder">
<h3 class="box-title" style="color: white">Tree View</h3>
<div class="btn-group pull-right">
<asp:LinkButton ID="btntreeclose" runat="server" CssClass="fa fa-close" OnClick="btntreeclose_Click"></asp:LinkButton>
</div>
</div>
<div class="form-horizontal">
<div class="box-body">
<div id="chart_div" style="width: 1000px; height: 500px; overflow: auto">
</div>
<asp:Button id="BtnNext" runat="server" OnClick="selectHandler()" />
<asp:Button id="btn_Submit" runat="server" OnClick="selectHandler2()" />
</div>
</div>
</div>
</asp:Panel>
</ContentTemplate><Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnNext" EventName="Click" />
<asp:PostBackTrigger ControlID="btn_Submit" />
</Triggers>
</asp:UpdatePanel>
I have a Page that has a single instance of a UserControl that itself has a single UpdatePanel. Inside the UpdatePanel are several Button controls. The Click event for these controls are wired up in the code-behind, in the Init event of the UserControl.
I get the Click event for the first button I push, every time, no problem. After that, I only get Click events for one button (SearchButton) - the rest are ignored. I have included the code for the control below - for sake of brevity, I have excluded the click event handler methods, but they are all of the standard "void Button_Click(object sender, EventArgs e)" variety. Any ideas?
<asp:UpdatePanel ID="PickerUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Container" runat="server">
<div>
<asp:TextBox ID="PickerResults" runat="server" style="margin-right: 3px;" SkinID="Plain" />
<asp:Image
ID="LaunchPopup" runat="server" ImageUrl="~/images/icons/user_manage.png"
ImageAlign="Top" BorderColor="#294254" BorderStyle="Dotted" BorderWidth="1px"
Height="20px" Width="20px" style="cursor: pointer;" />
</div>
<asp:Panel ID="PickerPanel" runat="server" DefaultButton="OKButton" CssClass="popupDialog" style="height: 227px; width: 400px; padding: 5px; display: none;">
<asp:Panel runat="server" id="ContactPickerSearchParams" style="margin-bottom: 3px;" DefaultButton="SearchButton">
Search: <asp:TextBox ID="SearchTerms" runat="server" style="margin-right: 3px;" Width="266px" SkinID="Plain" />
<asp:Button ID="SearchButton" runat="server" Text="Go" Width="60px" SkinID="Plain" />
</asp:Panel>
<asp:ListBox ID="SearchResults" runat="server" Height="150px" Width="100%" SelectionMode="Multiple" style="margin-bottom: 3px;" />
<asp:Button ID="AddButton" runat="server" Text="Add >>" style="margin-right: 3px;" Width="60px" SkinID="Plain" />
<asp:TextBox ID="ChosenPeople" runat="server" Width="325px" SkinID="Plain" />
<div style="float: left;">
<asp:Button ID="AddNewContact" runat="server" SkinID="Plain" Width="150px" Text="New Contact" />
</div>
<div style="text-align: right;">
<asp:Button ID="OKButton" runat="server" Text="Ok" SkinID="Plain" Width="100px" />
</div>
<input id="SelectedContacts" runat="server" visible="false" />
</asp:Panel>
<ajax:PopupControlExtender ID="PickerPopEx" runat="server" PopupControlID="PickerPanel" TargetControlID="LaunchPopup" Position="Bottom" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AddButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="AddNewContact" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
public partial class ContactPicker : System.Web.UI.UserControl
{
protected void Page_Init(object sender, EventArgs e)
{
SearchButton.Click += new EventHandler(SearchButton_Click);
AddButton.Click += new EventHandler(AddButton_Click);
OKButton.Click += new EventHandler(OKButton_Click);
}
// Other code left out
}
It seems that adding UseSubmitBehavior="false" to the button definitions has solved my problem. Still don't know why that first button click worked at all.
The most likely reason for this would be the client IDs that .Net generates for its controls changing. These are dynamically assigned and could change between postbacks / partial postbacks.
If controls are being added to the panel dynamically, the ID of your button could be different between postbacks causing .Net to be unable to tie the click event to the correct event handler in your code.
In my case, i had a LinkButton within a dgPatients_ItemDataBound event handler that used the PostBackUrl property.
The moment i changed the LinkButton to a HyperLink, the problem went away.