Inside the update panel I have update progess I want to set stylesheet inside the updatepanel like following I want to set vertical-align to middle but I it is not work how I can repair this code ?
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1" OnTick="Timer1_Tick"></asp:Timer>
<asp:Image ID="Image1" runat="server" Width="400px" Height="300px" Visible="false" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div style="vertical-align:middle;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Styles/img/loading.gif" />
Please Wait...</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
The vertical-align:middle; style will not have any effect on the image. What you probably want to do is add a CssClass="loadingimage" to the image and apply the following to it:
.loadingimage {
float:left;
margin-top: 2px;
}
Also, add some padding to the div:
<div style="padding:4px;">
<asp:Image ID="Image3" CssClass="loadingimage"
runat="server" ImageUrl="~/Styles/img/loading.gif" />
<span>Please Wait...</span>
</div>
Related
I have a grid view and inside it i used an update panel and because of using a file upload in it, I use trigger method. What i want is to have a nice update progress as an user hit a button in the grid view. I need to make the page disable and showing the downloading animation. like the below picture. However instead of the dialog message, a loading
animation must be appear. Is it solvable?
And here is my cod that i used, but it wasn't work:
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" onrowdatabound="GridView1_RowDataBound"
DataKeyNames="ID,ArticleID,UserName" DataSourceID="SqlDataSource1"
GridLines="Vertical" AllowPaging="True" PageSize="5" OnRowUpdating="GridView1_RowUpdating">
<Columns>
<asp:TemplateField>
<ItemTemplate>
.......some stuffs
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Gridview1" />
</Triggers>
</asp:UpdatePanel>
I also used this:
.Background
{
position: relative;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
filter: alpha(opacity=40)
}
And this
<asp:UpdateProgress ID="UpdateProgress4" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<DIV id="IMGDIV" align="center" valign="middle" runat="server" style=" position: relative; visibility:visible; vertical-align:middle; border-style :inset;border-color:black;background-color:white;z-index:40; top:45%;">
<img src="../images/NewLoader.gif" /><br />
<%-- <input type="button" onclick="CancelPostBack()" value="Cancel" />--%>
</DIV>
</ProgressTemplate>
</asp:UpdateProgress>
I think you have to use
<asp:AsyncPostBackTrigger>
not
<asp:PostBackTrigger >
<asp:UpdateProgress> will work only for Async calls.
<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 am working on a webpage that displays online users in a TabPanel, and I want to have it update every X amount of seconds. This part works; however, all of the other tabs in the TabContainer will update too, which I do not want. Here is the code for the online user tab
<cc1:TabPanel runat="server" HeaderText="Online Users" ID="TabPanel1">
<ContentTemplate>
<div>
<div style="position:relative; text-align:left; width:650px; top: 0px; left: 0px;">
<asp:Label ID="lblUpdate" runat="server" Text="This page refreshed automatically every 10 seconds, or press the update button to the right"></asp:Label>
</div>
</div>
<asp:Timer runat="server" ID="timer1" Interval="10000"></asp:Timer>
<asp:Timer runat="server" ID="timer2" Interval="9000"></asp:Timer>
<asp:UpdatePanel runat="server" ID="updateOnlineUsers" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" />
<asp:AsyncPostBackTrigger ControlID="timer2" />
</Triggers>
<ContentTemplate>
<div style="text-align:right; position:relative; top:-20px">
<asp:Image style="position:relative; display:none; z-index:1" ID="Image1" runat="server" ImageUrl="../images/reload.gif" />
<asp:ImageButton ID="ImageButton1" style="position:relative; z-index:2" runat="server" ImageUrl="../images/reload5.png" />
</div>
<div>
<asp:Label ID="lbluserCount" runat="server"></asp:Label>
</div>
<div>
<asp:Label ID="lblOfflineUsers" runat="server"></asp:Label>
</div>
<div>
<asp:Label runat="server" ID="lblOnlineUsers">Hi Everybody</asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
Thanks in advance!
Move timers out of TabPanel. Possibly you'll need to register timers as AsyncPostbackTriggers manually from code-behind after that.
I am using jquery dialog...so I need to keep this all in an updatepanel.
Ive got the following:
<asp:UpdatePanel ID="upNewUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<div id="search">
Address type:<span>Select whether you want to search 'From' / 'To' type addresses. Or select both to search all addresses.</span>
<asp:RadioButtonList ID="rbSearchTypes" runat="server"
RepeatDirection="Horizontal" RepeatLayout="Flow">
<asp:ListItem>From</asp:ListItem>
<asp:ListItem>To</asp:ListItem>
<asp:ListItem Selected="True">Both</asp:ListItem>
</asp:RadioButtonList>
| Address created by:<span>Search for your addresses (addresses you have created) / search for any address in the system.</span>
<asp:RadioButtonList ID="rbSearchMyAddresses" runat="server"
RepeatDirection="Horizontal" RepeatLayout="Flow">
<asp:ListItem Selected="True" Value="0">Anyone</asp:ListItem>
<asp:ListItem Value="1">Me</asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:TextBox ID="txtFindSearch" runat="server" Font-Names="Arial"
ToolTip="Enter a search term (ship to name / address / region, etc)."></asp:TextBox>
<asp:Button ID="btnFindSearch" runat="server" Text="Search"
onclick="btnFindSearch_Click" BorderColor="#1367AD" BorderStyle="Solid" />
<hr />
<br />
<asp:Label ID="lblRowsCount" runat="server" Text=""></asp:Label>
</div>
<div id="searchresults" style="">
<asp:RadioButtonList ID="rbSearchResults" CssClass="rbsearch" runat="server" AutoPostBack="True"
CellSpacing="10" RepeatColumns="4" RepeatDirection="Horizontal"
ToolTip="Select an address."
onselectedindexchanged="rbSearchResults_SelectedIndexChanged" Width="100%">
</asp:RadioButtonList>
</div>
<div id="loading" style="width:100%;text-align:center;">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" Visible="True" DynamicLayout="True">
<ProgressTemplate>
<img style="border-style:none;" src="images/ajax-loader.gif" alt="loading" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</ContentTemplate>
</asp:UpdatePanel>
When I click btnFindSearch I was hoping while that was querying my database and pulling records my updateprogress bar UpdateProgress1 would display showing my ajax loading gif. It doesnt :(...so it gives my users the impression that my app is stuck, when really it is actually pulling the data. WIthin a few seconds the data loads the radio button list...but I was hoping my update progress would come up. Is this because I am clicking a button inside an updatepanel? Is there anything I can do to get the loading updateprogress control to come up?
I also having same problem what i have done with my code is ,
<asp:UpdateProgress DynamicLayout="false" ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div class="Progress">
<img alt="loading" src="images/loading1.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
This is code for image for loading while retrieving data from server and css code for classProgress is this,
.Progress
{
background-color:Transparent;
color:White;
width:26px;
}
.Progress img {
vertical-align:middle;
margin:2px;
}
Hope this help u,good luck!
<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).