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?
Related
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 a page which is inside update panel.it contains two gridview which are also inside update panels.i m binding them in page load inside !ispostback as well as other parts of code.when i bind only first grid it works fine but when i bind the second grid it refreshes the first one and it shows no data.is this the problem of improper usage of update panel usage or any other issue.. how can i use the triggers here.
my code is as follows..
<asp:UpdatePanel ID="updgrd1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Width="85%"ShowHeaderWhenEmpty="true"EmptyDataText="No Records Found" AutoGenerateColumns="false"OnRowCancelingEdit="GridView1_RowCancelingEdit"OnRowEditing="G dView1_RowEditing">
<Columns>
//my code here
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="updgrd2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" Width="85%" ShowHeaderWhenEmpty="true" AutoGenerateColumns="false" EmptyDataText="No Records Found">
<Columns>
//my code here
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
protected void Page_Load(object sender, EventArgs e)
{
if(!ispostback)
{
LoadGrid1();
LoadGrid2();
}
}
Here I'm doing exactly what you are. Here I have a textbox and a gridview, when clicking add whatever is in the textbox gets added to the gridview.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger controlid="LnkAddTrack" eventname="Click" />
</Triggers>
<ContentTemplate>
<div id="EventTrack" >
<asp:Label ID="lblEventTracks" runat="server" Text="Event Tracks"></asp:Label>
<asp:TextBox ID="txtEventTracks" CssClass="EventTextbox" runat="server"></asp:TextBox>
<asp:LinkButton ID="LnkAddTrack" ClientIDMode="Static" runat="server" OnClick="LnkAddTrack_Click">Add Track</asp:LinkButton>
</div>
<asp:GridView ID="dgTracks" runat="server" >
<Columns>
<asp:TemplateField HeaderText="TrackName">
<ItemTemplate>
<asp:Label ID="Control" runat="server" Text='<%# Eval("TrackName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Then make sure you on your button event to add new data you are adding the data correctly
and remember to rebind the gridview.
protected void LnkAddTrack_Click(object sender, EventArgs e)
{
InsertTrack();
DgPopTracks();
}
Ask any questions you may have, if you want to see my Insert Track and DgPopTracks events
i can post them as well for you
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>
I use the below code to auto refresh the page every 60 seconds via the AJAX tools in VS2010. Works perfectly.
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ViewStateMode="Enabled" UpdateMode="Conditional">
<ContentTemplate>
ASP.NET/HTML Code
<p>
<asp:Button ID="Button2" runat="server" Text="Click here" OnClick="Button2_Click" /> to disable the pages automatic refresh.</p>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="60000">
</asp:Timer>
</asp:View>
<asp:View ID="View2" runat="server">
etc.
</asp:MultiView>
I want to include a button on the asp.net page to cancel the auto refresh.
I tried to include the below but when I clicked the button, it didn't work. The below is the Code Behind for an OnClick event for a Button. The asp.net code is in the above code.
protected void Button2_Click(object sender, EventArgs e)
{
Timer1.Interval = 0;
}
Where am I going wrong? Is this even a way to do this or do I need to go another route in order to allow the user to cancel the auto page refresh?
Thanks to PeterJ I have found the solution. I modified the code and since I clicked it the page has not refreshed. The issue was with my code behind for the button OnClick event. I had:
Timer1.Interval = 0;
When I should have had:
Timer1.Enabled = false;
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.