I have multiple update progress in my page in different places but they all have the id of one update Panel because i'm only using one update Panel my question is how can i let one update progress to display it's content when an update is done.
here is a sample of my code :
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="platformLabel" runat="server"
Text=" <%$Resources:Resource,SelectPlatform %>">
</asp:Label>
<asp:LinkButton ID="platformHyperLink" runat="server"
CssClass="platformElementHL"
CommandArgument='<%# Eval("PLATFORM_ID")%>'
OnClick="platformHyperLink_Click"
OnClientClick="ShowSearchButton();" />
<asp:Label ID="PlatformNameLabel" runat="server"
Text='<%# Eval("PLATFORM_NAME")%>' >
</asp:Label>
<telerik:RadButton ID="findDevice" runat="server"
Text="<%$Resources:Resource,Search %>"
OnClientClicked="HideTootltip"
OnClick="findDevice_Click"
style="display:none">
</telerik:RadButton>
<asp:UpdateProgress ID="updProgress1"
AssociatedUpdatePanelID="UpdatePanel" runat="server">
<ProgressTemplate>
<img src="App_Themes/WebPortalTheme/images/HomePage/icon-loading-
animated.gif" width="20" height="20" alt="Progress" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdateProgress ID="updProgress2"
AssociatedUpdatePanelID="UpdatePanel" runat="server">
<ProgressTemplate>
<img src="App_Themes/WebPortalTheme/images/HomePage/icon-loading-
animated.gif" width="20" height="20" alt="Progress" />
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
When i click on the link button the updateProgress1 should be displayed and when i click on the radButton the updateprogress2 should be displayed any ideas ?
You have to use two updatepanels (one for the linkbutton and another for the radiobutton) and associate each updateprogress with the corresponding. If you need to update the entire page use one global updatepanel , by setting the childastrigger option as appropriate.
<asp:UpdatePanel ID="UpdtGlobal" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text=" <%$Resources:Resource,SelectPlatform %>" />
<asp:UpdatePanel ID="UpdtLinkButton" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="platformElementHL" CommandArgument='<%# Eval("PLATFORM_ID")%>'
OnClick="platformHyperLink_Click" OnClientClick="ShowSearchButton();" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("PLATFORM_NAME")%>' />
<asp:UpdatePanel ID="UpdtRadButton" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<telerik:radbutton id="findDevice" runat="server" text="<%$Resources:Resource,Search %>"
onclientclicked="HideTootltip" onclick="findDevice_Click" style="display: none" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdtLinkButton"
runat="server">
<ProgressTemplate>
<img src="App_Themes/WebPortalTheme/images/HomePage/icon-loading-animated.gif" width="20"
height="20" alt="Progress" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdtRadButton"
runat="server">
<ProgressTemplate>
<img src="App_Themes/WebPortalTheme/images/HomePage/icon-loading-animated.gif" width="20"
height="20" alt="Progress" />
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
Related
I'm trying to implement UpdatePanels and UpdateProgress controls. I have two UpdatePanels that contain two different DropDownLists (ddlQuestion5IDs and ddlQuestion6IDs).
When I change the selected index of ddlQuestion6IDs, the UpdateProgress loads for both UpdatePanels/DropDownLists. Is this how they normally behave and is there a way of only displaying the corresponding UpdateProgress for each UpdatePanel?
<p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label6" runat="server" Text="Question 5:" Font-Bold="true"></asp:Label>
<br />
<asp:DropDownList ID="ddlQuestion5IDs" runat="server" OnSelectedIndexChanged="ddlQuestion5IDs_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
<ProgressTemplate>
<img src="images/loader.gif" height="20" />
</ProgressTemplate>
</asp:UpdateProgress>
<br />
<asp:Label ID="Label19" runat="server" Text="Question type:" Font-Italic="true"></asp:Label>
<br />
<asp:Label ID="lblQuestion5Type" runat="server" Text=""></asp:Label>
<br /><br />
<asp:Label ID="Label22" runat="server" Text="Question:" Font-Italic="true"></asp:Label>
<br />
<asp:Label ID="lblQuestion5" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlQuestion5IDs" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</p>
<p>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label7" runat="server" Text="Question 6:" Font-Bold="true"></asp:Label>
<br />
<asp:DropDownList ID="ddlQuestion6IDs" runat="server" OnSelectedIndexChanged="ddlQuestion6IDs_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="true">
<ProgressTemplate>
<img src="images/loader.gif" height="20" />
</ProgressTemplate>
</asp:UpdateProgress>
<br />
<asp:Label ID="Label21" runat="server" Text="Question type:" Font-Italic="true"></asp:Label>
<br />
<asp:Label ID="lblQuestion6Type" runat="server" Text=""></asp:Label>
<br /><br />
<asp:Label ID="Label24" runat="server" Text="Question:" Font-Italic="true"></asp:Label>
<br />
<asp:Label ID="lblQuestion6" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlQuestion6IDs" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</p>
By adding a AssociatedUpdatePanelID="UpdatePanelID" property to UpdateProgress
I have problem in nested update panel. I binding the gridview by using user control and my listbox is in the child update panel while selecting the items in listbox the page is getting refresh. but I don't want to get refresh.
Here is my aspx:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SearchModule._Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<link type="text/css" rel="stylesheet" href="Defaultstylesheet.css" />
<script src=<%--"Scripts/jquery-1.8.2.js" type="text/javascript"> </script> --%>
<%# Register TagPrefix="inc" TagName="sPager" Src="~/UserControls/SearchPager.ascx" %>
<asp:UpdatePanel ID="upseachr" runat="server" >
<ContentTemplate>
<div style="height: 50px;"></div>
<div class="searchtextbx">
<asp:TextBox ID="searchtext" runat="server"></asp:TextBox>
<asp:Button ID="Search" OnClick="Search_Click" CssClass="searchbtn" Text="Search" height="32" runat="server"> </asp:Button>
</div>
<asp:UpdateProgress ID="updatesearchpro" AssociatedUpdatePanelID="upseachr" runat="server" >
<ProgressTemplate>
<center>
<asp:Panel ID="searchpanel" runat="server">
<img alt="Processing" src="Images/359.gif" />
<br />
<asp:Label ID="panlab" runat="server" Text="Processing..."></asp:Label>
</asp:Panel>
</center>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="updFilters" runat="server" >
<ContentTemplate>
<div class="resultpage" style="overflow-x: scroll;">
<table>
<tr>
<div class="listbox">
<asp:Label ID="headertext" runat="server" CssClass="labelresul" Font-Bold="true" Height="50" Text="Available Filter"></asp:Label>
<span style="padding-left:10px;font-weight:700;"> <asp:HiddenField runat="server" ID="hdCount" /><asp:Label ID="Total" runat="server" Height="50"></asp:Label></span><span style="padding-left:5px;font-weight:700;"><asp:Label runat="server" ID="match" Visible="false" Text="Matches"></asp:Label> <asp:Label ID="remainingcount" ForeColor="Red" Visible="false" runat="server"></asp:Label> <asp:Label ID="remaining" runat="server" ForeColor="Red" Text="Remaining" Visible="true"></asp:Label> </span>
</div>
</tr>
<tr>
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound" EnableViewState="false">
<ItemTemplate>
<td>
<asp:Label ID="listheader" runat="server" Text='<%# Eval("additional_info_name1") %>'></asp:Label>
<asp:ListBox ID="results" Width="200" Visible="true" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="results_SelectedIndexChanged" ></asp:ListBox>
</td>
</ItemTemplate>
</asp:ListView>
</tr>
<tr>
<td class="listbox1">
<asp:Button ID="btn" runat="server" Font-Size="12" Font-Bold="true" CssClass="searchbtn" OnClick="btn_Click" Text="Apply Filter" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div style="height: 40px;"></div>
<div class="resultpage" style="overflow-y: scroll;">
<asp:UpdatePanel ID="updPager" runat="server">
<ContentTemplate>
<inc:sPager ID="sPager" runat="server" OnPageIndexChanging="sPager_OnPageIndexChanging"></inc:sPager>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="updGrid" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvResults" runat="server" AutoGenerateColumns="false" ItemStyle-VerticalAlign="Middle" AllowSorting="true"
ItemStyle-HorizontalAlign="Center" GridLines="None" CellSpacing="10" CellPadding="2" AllowCustomPaging="true" OnSorting="gvResults_Sorting"
AllowPaging="True" PageSize="20" HeaderStyle-VerticalAlign="Middle" HeaderStyle-HorizontalAlign="Center"
HeaderStyle-CssClass="GridHeader" RowStyle-HorizontalAlign="Left" CssClass="GridStyle" >
<Columns >
<asp:TemplateField HeaderText="Stock Code" SortExpression="manufacturer_part_number" >
<ItemTemplate>
<asp:Label ID="lblFirstName" Text='<%# DataBinder.Eval(Container.DataItem, "manufacturer_part_number")%>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Manufacturer" SortExpression="Manufacturer" HeaderText="Manufacturer"></asp:BoundField>
<asp:BoundField DataField="Description" SortExpression="Description" HeaderText="Description"></asp:BoundField>
<asp:BoundField DataField="Availability" SortExpression="Availability" HeaderText="Availability"></asp:BoundField>
<asp:BoundField DataField="flag_rohs" SortExpression="flag_rohs" HeaderText="RoHS"></asp:BoundField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
It appears that your top-level UpdatePanel has an UpdateModeof Always (which is the default).
The MSDN documentation states:
If the UpdateMode property is set to Always, the UpdatePanel
control's content is updated on every postback that originates from
anywhere on the page. This includes asynchronous postbacks from
controls that are inside other UpdatePanel controls and postbacks
from controls that are not inside UpdatePanel controls.
You can rectify this by changing your top-level UpdatePanel control to conditional. e.g:
<asp:UpdatePanel ID="upseachr" runat="server" UpdateMode="Conditional">
Cheers
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ContentTemplate>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Button" PostBackUrl="~/testing2.aspx" />
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
targetControlID="Button1"
ConfirmText="Are you sure you want to click this button"
ConfirmOnFormSubmit="True" />
<asp:TextBox ID="TextBox1" runat="server" Height="25px"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
My ConfirmButtonExtender just not working. The website do not pop up a box for me. Do I miss somethings? My code is above.
I think you are missing OnClientCancel property. Check out the working example below.
Ensure your page is using proper master page. This is a working code.
asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
<script type='text/javascript'>
function cancelClick() {
var label = $get('ctl00_SampleContent_Label1');
label.innerHTML = 'You hit cancel in the Confirm dialog on ' + (new Date()).localeFormat("T") + '.';
}
</script>
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<div class="demoarea">
<div class="demoheading">ConfirmButton Demonstration</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="LinkButton" runat="server" OnClick="Button_Click">Click Me</asp:LinkButton>
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
TargetControlID="LinkButton"
ConfirmText="Are you sure you want to click the LinkButton?"
OnClientCancel="cancelClick" />
<br />
<br />
<asp:Button ID="Button" runat="server" Text="Click Me" OnClick="Button_Click" /><br />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server"
TargetControlID="Button"
OnClientCancel="cancelClick"
DisplayModalPopupID="ModalPopupExtender1" />
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button" PopupControlID="PNL" OkControlID="ButtonOk" CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
Are you sure you want to click the Button?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="ButtonOk" runat="server" Text="OK" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<asp:Label ID="Label1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
I have one updatepanel exists with two panels. Each panel have two buttons to open popup. I have two modalpopup & its target panels just below of two panels.Everything is working fine, but I am getting problem, if I click button in first panel then modalpopup does not open, but when I click button in second panel after click button in first panel then popup opens & viceversa.
I used following code:
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server">
<asp:Button ID="btn1" runat="server" class="add-btn-1" Text="Add" />
</asp:Panel>
<asp:Panel ID="pnl2" runat="server">
<asp:Button ID="btn2" runat="server" class="add-btn-1" Text="Add" />
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopup1" PopupControlID="pnlpopup1" TargetControlID="btn1"
BackgroundCssClass="modalBackground" runat="server" />
<asp:Panel runat="server" ID="pnlpopup1">
<%--code here--%>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopup2" PopupControlID="pnlpopup2" TargetControlID="btn2"
BackgroundCssClass="modalBackground" runat="server" />
<asp:Panel runat="server" ID="pnlpopup2">
<%--code here--%>
</asp:Panel>
</ContentTemplate>
What will be solution to solve this problem?
Thank you.
I executed your code and found no problems.It works.So post the code that you have given inside <%--code here--%>.I would also suggest that you add a OkControlID to your ModalPopupExtender.
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server">
<asp:Button ID="btn1" runat="server" class="add-btn-1" Text="Add" />
</asp:Panel>
<asp:Panel ID="pnl2" runat="server">
<asp:Button ID="btn2" runat="server" class="add-btn-1" Text="Add" />
</asp:Panel>
<Ajax:ModalPopupExtender ID="ModalPopup1" PopupControlID="pnlpopup1" TargetControlID="btn1"
BackgroundCssClass="modalBackground" runat="server" />
<asp:Panel runat="server" ID="pnlpopup1" Style="width:400px;height:100px; background: gray;">
<table width="100%">
<tr>
<td align="left">
<asp:Label ID="lblheadinglunchout" Font-Underline="true" Text="First Popup"
runat="server" CssClass="labelPopup" Style="text-decoration: none"></asp:Label>
</td>
<td align="right">
<asp:ImageButton ID="imgbtnCancelPopUp" ImageUrl="Images/popupclose_button.png"
runat="server" Style="vertical-align: top;" CssClass="button" />
</td>
</tr>
</table>
</asp:Panel>
<Ajax:ModalPopupExtender ID="ModalPopup2" PopupControlID="pnlpopup2" TargetControlID="btn2"
BackgroundCssClass="modalBackground" runat="server" />
<asp:Panel runat="server" ID="pnlpopup2" Style="width:400px;height:100px; background: gray;">
<table width="100%">
<tr>
<td align="left">
<asp:Label ID="Label1" Font-Underline="true" Text="Secound Popup"
runat="server" CssClass="labelPopup" Style="text-decoration: none"></asp:Label>
</td>
<td align="right">
<asp:ImageButton ID="ImageButton1" ImageUrl="Images/popupclose_button.png"
runat="server" Style="vertical-align: top;" CssClass="button" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I am putting the following controls inside an update panel so that the whole page does not refresh. When clicking the button, the page does not refresh but when I try to change the radio button, the page refreshes and causes a full postback. Here is my code:
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager" runat="Server" EnablePartialRendering="true" />
<asp:UpdatePanel ID="updatePanelToggle" runat="server">
<ContentTemplate>
<asp:RadioButton ID="radioOn" AutoPostBack="true" runat="server" GroupName="toggle" Text="On" OnCheckedChanged="radioOn_CheckedChanged" />
<asp:RadioButton ID="radioOff" AutoPostBack="true" runat="server" GroupName="toggle" Text="Off" OnCheckedChanged="radioOff_CheckedChanged" />
<asp:Button ID="testButton" runat="server" OnClick="mybutton_click"/>
</ContentTemplate>
</asp:UpdatePanel>
Depending on your requirement you can control post backs by adding triggers. Use AsyncPostBackTrigger when you want to update only the update panel content. If you need full post back use PostBackTrigger.
<asp:UpdatePanel ID="updatePanelToggle" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButton ID="radioOn" AutoPostBack="true" runat="server" GroupName="toggle" Text="On" OnCheckedChanged="radioOn_CheckedChanged" />
<asp:RadioButton ID="radioOff" AutoPostBack="true" runat="server" GroupName="toggle" Text="Off" OnCheckedChanged="radioOff_CheckedChanged" />
<asp:Button ID="testButton" runat="server" OnClick="mybutton_click"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="radioOn" />
<asp:AsyncPostBackTrigger ControlID="radioOff" />
<asp:PostBackTrigger ControlID="testButton" />
</Triggers>
</asp:UpdatePanel>