Given a simple example with two nested Update-Panels. They are nested, and each one has a label which is filled with the current time in the code behind. I don't understand why the ChildrenAsTriggers="true" - Property on the outer UpdatePanel has no effect? When I hit the 'Update Nested Panel' - button, the time in the parent UpdatePanel is not updated. But as far as I understand the property, it should be:
<asp:ScriptManager ID="ScriptManager1" runat="server"
onasyncpostbackerror="ScriptManager1_AsyncPostBackError">
</asp:ScriptManager>
<asp:Button ID="ButtonUpdate" runat="server" Text="Update Panel 1"
style="margin-top: 15px" onclick="ButtonUpdate_Click" />
<asp:Button ID="ButtonUpdateNestedPanel" runat="server" Text="Update Nested Panel"
style="margin-top: 15px" onclick="ButtonUpdateNestedPanel_Click" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonUpdate" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" />
<asp:UpdatePanel ID="UpdatePanelNested" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonUpdateNestedPanel" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="LabelNested" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
Thx for any tipps!
sl3dg3
p.s.: code behind:
protected void ButtonUpdate_Click(object sender, EventArgs e)
{
LabelNested.Text = DateTime.Now.ToString();
Label1.Text = DateTime.Now.ToString();
}
protected void ButtonUpdateNestedPanel_Click(object sender, EventArgs e)
{
LabelNested.Text = DateTime.Now.ToString();
Label1.Text = DateTime.Now.ToString();
}
When the ChildrenAsTriggers property is set to true and any child control of the UpdatePanel control causes a postback. Child controls of nested UpdatePanel controls do not cause an update to the outer UpdatePanel control unless they are explicitly defined as triggers for the parent panel.
http://forums.asp.net/t/1422425.aspx/1
and this should be like...
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonUpdate" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ButtonUpdateNestedPanel" EventName="Click" />
</Triggers>
......
......
I believe that, in order to see the desired effect in action, you should actually add your buttons as children in the content template. The "ChildrenAsTriggers" property only applies to direct children of the "ContentTemplate" block.
ChildrenAsTriggers="true"
Set the ChildrenAsTriggers property to true if you want postbacks from immediate child controls of the UpdatePanel control to cause an update of the panel's content. Child controls of nested UpdatePanel controls will not cause an update of the parent UpdatePanel control's content unless you call the Update method explicitly or you define the child controls as triggers.
Related
I am trying to update the datasource of a webdatagrid in an updatepanel. I am able to do this via a timer tick event
<asp:timer id="Timer1" runat="server" interval="10000" ontick="Timer1_Tick"></asp:timer>
<asp:updatepanel id="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>
</Triggers>
<ContentTemplate>
<ig:WebDataGrid ID="WebDataGrid" runat="server" AutoGenerateColumns="false" >
</ig:WebDataGrid>
</ContentTemplate>
</asp:updatepanel>
And with the Tick event handler
protected void Timer1_Tick(object sender, EventArgs e)
{
WebDataGrid.DataSource = *a datatable*;
WebDataGrid.DataBind();
}
However, now when I try to do the same thing except instead of using the timer, use the WebDataGridMain_RowSelectionChanged event instead the webdatagrid does not update. I believe the new datasource value is still being sent to the client however the UpdatePanel does not seem to be updating the view.
<ig:WebDataGrid ID="WebDataGridMain" runat="server" AutoGenerateColumns="False" OnRowSelectionChanged="WebDataGridMain_RowSelectionChanged">
<ClientEvents AJAXResponse="AJAXResponseHandler" />
</ig:WebDataGrid>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="WebDataGridMain" EventName="RowSelectionChanged"/>
</Triggers>
<ContentTemplate>
<ig:WebDataGrid ID="WebDataGridDetail" runat="server" AutoGenerateColumns="false">
</ig:WebDataGrid>
</ContentTemplate>
</asp:UpdatePanel>
With the the similar event handler code below
protected void WebDataGridMain_RowSelectionChanged(object sender, Infragistics.Web.UI.GridControls.SelectedRowEventArgs e)
{
WebDataGridDetail.DataSource = *a datatable*;
WebDataGridDetail.DataBind();
}
There doesn't seem to be any difference between these two except for the type of event trigger. What should I change so that the UpdatePanel works with the RowSelectionChanged event?
I created a updatePanel, is include some dropdownlist and a few button and I use AsyncPostBackTrigger for not update all page when the click button or select dropdownlist.
My page structure that an aspx page and also use user control page. I use updatePanel on UserControlPage.
Here is My code and I wish you help me:
<asp:UpdatePanel ID="UpdMonthly" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="ddlSenetIslemleriAlinanUrun1" AutoPostBack="true" OnSelectedIndexChanged="ddlSenetIslemleriAlinanUrun1_SelectedIndexChanged" runat="server"></asp:DropDownList>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:Button ID="btnKaydet" style="margin:10px ;" Width="100" Height="50" runat="server" Text="Kaydet" OnClick="btnKaydet_Click"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlSenetIslemleriAlinanUrun1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnKaydet" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
I have some knowledge on placeholder but when the click dropdown or button, page is postback and placeholder knowledge dissappear.
how to fix postback problem?
Thanks for your answers.
EDITED...
I got an ASP.NET Button inside an UpdatePanel, inside a UserControl.
I want to make the IMAGE visible by CLICKing on the UserControl’s Button (btnSubmit).
Using the following js function I’m able to do it in normal postback mode, but it’s not working in Async mode.
The question is, how can I do this in an Async mode or what’s the best way to do this?
User Control (Categories):
<asp:UpdatePanel ID="upItems" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="btnSubmitPostBack();"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
ASP.NET Page
<script>
function btnSubmitPostBack() {
__doPostBack('<%= btnDoSomething.ClientID %>', '');
}
</script>
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc1:Categories ID="Categories1" runat="server" CatRootName="Products" />
<asp:Button ID="btnDoSomething" CssClass="hidden" runat="server" Text=" Do Something" OnClick=" btnDoSomething_Click" />
<asp:Image ID="Image1" runat="server" Visible="false" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnDoSomething" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
protected void btnDoSomething_Click(object sender, EventArgs e)
{
Image1.Visible = true;
up.Update();
}
Thanks for your attention and help in advance!
OK here we go :( Just compiled and ran this successfully) and I think that's the right way to do it: ( the key here is to find the other user control and drill inside it for your control to update:
You user control code :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Categories.ascx.cs" Inherits="WebApplication1.Categories" %>
<asp:UpdatePanel ID="upItems" runat=*emphasized text*"server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
User control code behind:
protected void btnSubmit_Click(object sender, EventArgs e)
{
UpdatePanel ImageUpdatePanel = (UpdatePanel)this.Parent.FindControl("up");
Image _img = (Image)ImageUpdatePanel.FindControl("Image1");
_img.Visible = true;
//Updating UpdatePanel
ImageUpdatePanel.Update();
}
and then your page code
<asp:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc1:Categories ID="Categories1" runat="server" CatRootName="Products" />
<asp:Button ID="btnDoSomething" CssClass="hidden" runat="server" Text=" Do Something"/>
<asp:Image ID="Image1" runat="server" Visible="false" ImageUrl="~/Images/heroAccent.png" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnDoSomething" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
this is 100% working solution, if u need I can send u the code too :)
I have an issue on button OnClick event.
There is a refresh button in a user control ("header") which will refresh a place holder ("phContent") that generates some other user controls at run time. However, the button OnClick event doesn't fire until the whole place holder content loads.
Page.aspx
<ext:ContentHeader ID="header" runat="server" Visible="false" />
<asp:UpdatePanel ID="upControl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:PlaceHolder ID="phContent" runat="server"></asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="header" EventName="OnFormSubmit" />
</Triggers>
</asp:UpdatePanel>
UserControl.ascx
<div>
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_OnClick" />
</div>
UserControl.cs
protected void btnRefresh_OnClick(object sender, EventArgs e)
{
//some code
OnFormSubmit(this, e);
}
public delegate void UserControlFormSubmit(object sender, EventArgs e);
public event UserControlFormSubmit OnFormSubmit;
Not sure what exactly the page and source code is.
But from front-end, take for jQuery as example.
You can try something like:
jQuery(function(){
jQuery('#btnRefresh').on('click',function(){
//load the content by ajax
jQuery('#phContent').load('#chart');
});
});
You have to place the button in updatepanel as well.
<ext:ContentHeader ID="header" runat="server" Visible="false" />
<asp:UpdatePanel ID="upControl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_OnClick" />
</ContentTemplate>
</asp:UpdatePanel>
Here is the scenario,
I have one update panel in which I have radio button.
On check of radio button I want to enable Panel which is outside the update panel.
I have tried following 2 things:
Placing the panel in another update panel didn't work.
Using JavaScript on click of radio button didn't work.
placing the panel in another updatepanel and set update mode as conditional.
You need to do one more thing
On check of radio button event you need to call update method of newly added update panel
UpdatePanel1.Update();
I hope this code sample helps you.
<asp:UpdatePanel ID="udp1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButton ID="rb1" runat="server" AutoPostBack="true" OnCheckedChanged="Control_CheckedChanged"
Text="Text" GroupName="Group1" />
<asp:RadioButton ID="rb2" runat="server" AutoPostBack="true" OnCheckedChanged="Control_CheckedChanged"
Text="Text2" GroupName="Group1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="udp2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server" Visible="false">
<asp:Label ID="lblText" runat="server" Text="Text"/>
</asp:Panel>
</ContentTemplate>
<asp:AsyncPostBackTrigger ControlID="rb1" />
<asp:AsyncPostBackTrigger ControlID="rb2" />
</asp:UpdatePanel>
protected void Control_CheckedChanged(object source, EventArgs e)
{
pnl1.Visible=rb1.Checked;
}