Showing posts with label trigger. Show all posts
Showing posts with label trigger. Show all posts

Wednesday, March 28, 2012

Multiple Update Panels - Postback on Panel A cancels Postback on Panel B

Hi,

I have a page with multiple Update Panels. Each panel has a button as a trigger.

When the first button is clicked it causes the first panel to update (as you'd expect), however if while this panel is being updated, the second button is clicked to update the second panel, the first request is cancelled, and the first panel is never updated.

Is this the expected behavior? Are there any work arounds?

Many Thanks,
Ady

Yes, unfortunately it is by design. Only the last UpdatePanel requets will be considered and prior reuests discarded.

Hmm, thats a shame.

I wonder if there is a way to intercept the request, and effectively queue it until the first request completes.

Time to start playing.


This tutorial might help you get started:http://ajax.asp.net/docs/tutorials/ExclusiveAsyncPostback.aspx.

Multiple UpdatePanels updated by single trigger -- bug or feature?

Hi, not sure if this has been discussed before but..

I'm running April CTP, and I have two UpdatePanels on my page. UpdatePanel1 includes a navbar with various LinkButtons, and the other UpdatePanel2 contains a GridView. I've added a ControlEventTrigger to UpdatePanel2 for the click event of the LinkButtons in UpdatePanel1. UpdatePanel1 has no triggers (I plan on adding triggers at a later time). The issue is, when I click a LinkButton from UpdatePanel1, it updates both UpdatePanels! I would like it to only update UpdatePanel2 as I thought it should, but maybe I am just not understanding the way UpdatePanels work.

I'm thinking the fact that UpdatePanel2 is using a Control Event from UpdatePanel1, this might be the cause of these problems. When I moved the LinkButtons out of UpdatePanel2, UpdatePanel1 was no longer updated. I've included the source code for the two UpdatePanels:

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional"> <ContentTemplate> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td><asp:LinkButton CssClass="navlink_selected" ID="homeLinkT" runat="server" OnClick="link_Click" CommandName="home" CommandArgument="1" >home</asp:LinkButton> <asp:LinkButton CssClass="navlink_unselected" ID="aboutLinkT" runat="server" OnClick="link_Click" CommandName="about" CommandArgument="2" >about</asp:LinkButton> <asp:LinkButton CssClass="navlink_unselected" ID="resumeLinkT" runat="server" OnClick="link_Click" CommandName="resume" CommandArgument="3" >resume</asp:LinkButton> <asp:LinkButton CssClass="navlink_unselected" ID="projectsLinkT" runat="server" OnClick="link_Click" CommandName="projects" CommandArgument="4" >projects</asp:LinkButton> <asp:LinkButton CssClass="navlink_unselected" ID="forumLinkT" runat="server" OnClick="link_Click" CommandName="forum" CommandArgument="5" >forum</asp:LinkButton> <asp:LinkButton CssClass="navlink_unselected" ID="contactLinkT" runat="server" OnClick="link_Click" CommandName="contact" CommandArgument="6" >contact</asp:LinkButton> </td> <td style="width:80px"> <atlas:UpdateProgress ID="up1" runat="server"> <ProgressTemplate> <asp:Image ID="Image2" runat="server" ImageUrl="~/images/Hourglass_iconsm.gif"/> </ProgressTemplate> </atlas:UpdateProgress> </td> </tr> </table> </ContentTemplate> </atlas:UpdatePanel> <atlas:UpdatePanel runat="server" ID="UpdatePanel2" Mode="Conditional"> <ContentTemplate> <asp:HiddenField ID="page_id" runat="server" Value="1" /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="page_id" DataSourceID="ObjectDataSource1" ShowHeader="False" GridLines="None" AutoGenerateEditButton="false" > <Columns> <asp:TemplateField> <EditItemTemplate> <asp:TextBox ID="TextBox1" runat="server" Height="100%" Text='<%# Bind("page_content")%>' TextMode="MultiLine" Width="600px" Rows="10"></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("page_content")%>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="page_id" HeaderText="page_id" ReadOnly="True" SortExpression="page_id" Visible="False" /> </Columns> </asp:GridView> </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="homeLinkT" EventName="Click" /> <atlas:ControlEventTrigger ControlID="aboutLinkT" EventName="Click" /> <atlas:ControlEventTrigger ControlID="resumeLinkT" EventName="Click" /> <atlas:ControlEventTrigger ControlID="projectsLinkT" EventName="Click" /> <atlas:ControlEventTrigger ControlID="forumLinkT" EventName="Click" /> <atlas:ControlEventTrigger ControlID="contactLinkT" EventName="Click" /> </Triggers> </atlas:UpdatePanel>

Anyone have any ideas?

Thanks,

Matt

This is not a bug, but the intended result.

Clicking a server control that causes a postback (i.e. a link button or a normal button) when that server control is contained within the ContentTemplate of an UpdatePanel will cause that UpdatePanel to update even if it is not explicitly defined as a trigger. UpdatePanel1 is updating for this reason and UpdatePanel2 is updating because the control is defined as a triggering event.

Ah, thanks for the clarification Joel!

Matt


So is there a way for getting around this? If I have a menu of links and I want some to be loaded into one updatepanel and some into another. Is this even do-able?

Thanks.

Multiple UpdateProgress on a page?

My UpdateProgress Panel gets fired when I use my modalpopup box. Is there anyway for the modal popup to have its own progress and not trigger the one already defined on the page?

If you define aasp:UpdateProgressin a web form and specify an AssociatedUpdatePanelID?property for it, it will be triggered?and?display?the?
AssociatedUpdatePanel when you press any control in the web form.
Try the following codes and check if it works in your project.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "block";
$get('ButtonTrigger').style.display = "none";
}
}
function EndRequest (sender, args) {
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "none";
$get('ButtonTrigger').style.display = "block";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script
<div>
<asp:Button ID="ButtonTrigger" runat="server" Text="Refresh Panel 5" OnClick="Button_Click" />
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
The trigger for this panel
causes the UpdateProgress to be displayed
even though the UpdateProgress is associated
with panel 2.
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel6" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" runat="server" Text="Refresh Panel 6" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<span style="display: inline-block;">
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/airplane.bmp" />
</ProgressTemplate>
</asp:UpdateProgress>
</span>
</div>
Wish the above can help you.

Monday, March 26, 2012

Mutiple update panel - How to bind trigger event for control which is inside of other upda

Hi,

Thanks for visitng my problem.

I have 3 update panels. in first update panel U1 I have text box T1 and drop dwonbox D1.In second update panel U2 i have only drop down box D2. and in third update panel U3 i have a treeview T1.

I want that When I change selection of D1 in U1, it triiger events for D2 in U2 and T1 in U3. But when I try to bid U2 with D1 change event it does not show show D1 namein triiger control names. Rather it shows U1 panel name. Sam case is for T1 in U3. So my qiestion is : "HOW TO BIND TRIGGER WITH CONTROL WHICH IS INSIDE OF OTHER UPDATE PANEL?"

Looking for your Help.

Thanks,

John

Hi John,

I think the easiest solution would be to place one UpdatePanel around all three controls. If this doesn't work for you, perhaps you could post asmall code sample showing what you already tried.

Thanks,
Ted

My (Un)Modal Popup

I have added a modal popup to my user control. I show the modal popup by registering a startup script in the code-behind of an update panel trigger. The modal popup appears, but it isn't modal. I can click and edit the form fields behind the modal popup. Has anyone seen this happen? Any thoughts on how to fix it?Post code and I might be able to help you

Have you set the BackgroundCSSClass properly? I saw the same behavior and was able to fix it by setting the BackgroundCSS... here's an example of the CSS I used

.modalBackground

{background-color:Gray;filter:alpha(opacity=70);

}


I used below css but still my main page controls can be accessed?

.modalBackground

{background-color:Gray;filter:alpha(opacity=70);

}

This is happening in (Un)Modal fashion, any have solution for this.

Wednesday, March 21, 2012

need help with a modal extender control

I am working on a project that has two modal extenders on one page, and two panels. Which have their own separate buttons which can trigger each panel to open. On the same form there is a gridview control, the user will select a row then in the code behind i trigger the click event for one of the button, so that it will oepn one of the panel it seemed to work fine before just using modalextender...1.show() when it stop working i added the code to raisethe click event for the control. After doing so it doesn;t open the panel instead, i have to click the button that that is setup as theTargetControlID two or three time just for the pop up menu to open. What is the right way to go about doing this. I wander if anyone else has had the same problem.

((IPostBackEventHandler)lnkPanel2).RaisePostBackEvent(null);

this.ModalPopupExtender2.Show();

Hi Lew26,

My suggestion is use Javascript to show the ModalPopupExtender directly. For example:

use $find("ModalPopupExtender's BehaviorID ").show(); to show the Panel and use $find("ModalPopupExtender's BehaviorID ").hide(); to hide the showing Panel. The Buttons which will lead the ModalPopupExtender to shown or to hidden should be put inside a hidden div. Take an example: <div style="display:none">your Buttons</div>. Here is my sample:

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
protected void Page_Load(object sender, EventArgs e)
{
//Attach a Javascript funtion to the LinkButton.
LinkButton myLinkButton;
for (int i = 0; i < GridView1.Rows.Count; i++)
{
myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1");
myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;");
}
}
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#FFD9D5;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]">
</asp:SqlDataSource>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/>
Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<div style="display: none">
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<script type="text/javascript" language="javascript">
function shopModalPopup(employeeID){
//show the ModalPopupExtender
$get("<%=tbEmployeeID.ClientID%>").value = employeeID;
$get("<%=tbReason.ClientID%>").value ="";
$find("<%=ModalPopupExtender1.ClientID%>").show();
}
</script>
</form>
</body>
</html>

I hope this help.

Best regards,

Jonathan