I've added a CalendarExtender to reset the dates of a datasource for a grid view.
Code -
<asp:UpdatePanel ID="UPTabs" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="tbMoveInDate" eventname="TextChanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="tbMoveInDate" Width="70px" AutoPostBack="true" runat="server"/>
<asp:CalendarExtender ID="tbMoveInDateCalendarExtender" runat="server" Format="MM/yyyy"
TargetControlID="tbMoveInDate" OnClientHidden="onCalendarHidden" OnClientShown="onCalendarShown" />
<asp:GridView ID="gvMoveins" runat="server" .../>
</ContentTemplate>
</asp:UpdatePanel>
with the intention of forcing the update panel to update when the date is changed.
What am I missing?
Need to use
<asp:PostBackTrigger />
to get the effect I needed.
Related
Consider the following code fragment:
<div>
<asp:Button runat="server" ID="trickyUPTrigger" Text="Tricky Update" />
<div>
<asp:Button runat="server" ID="normalUPTrigger" OnClick="normalUPTrigger_Click" Text="Normal Update" />
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="normalUPTrigger" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" ID="changeableLabel" Text="Change me"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Now make the button with ID of trickyUPTrigger as the trigger of the UpdatePanel. Or, devise a mechanism (probably... using javascript?) so that when this button is clicked UpdatePanel updates without full page postback.
If you want to update the UpdatePanel when clicking on trickyUPTrigger, you can add that button to the triggers list:
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="normalUPTrigger" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="trickyUPTrigger" EventName="Click" />
</Triggers>
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>
UPDATE
You asked some code examples showing cases with naming containers, a concept that comes into play for databound controls with item templates, like the GridView and the ListView, and for user controls. In the examples below, I use a ListView, where each item is a separate naming container.
If you wanted to trigger an update of your panel from a button in a ListView item template, the trigger would not be found at runtime, and an exception would occur:
<asp:ListView ID="lstView" runat="server">
<ItemTemplate>
<asp:Button ID="anotherTrigger" runat="server" Text="This trigger cannot be found!" OnClick="anotherTrigger_Click" />
</ItemTemplate>
</asp:ListView>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="anotherTrigger" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
The reverse case (the UpdatePanel in the ListView item template, the trigger button outside of the ListView) does work, according to my tests, which seems to contradict the note that you mention in your comment:
<asp:ListView ID="lstView" runat="server">
<ItemTemplate>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="anotherTrigger" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:ListView>
<asp:Button ID="anotherTrigger" runat="server" Text="This trigger works!" OnClick="anotherTrigger_Click" />
Finally, the case where the UpdatePanel and the trigger button are both in the ListView item template also works:
<asp:ListView ID="lstView" runat="server">
<ItemTemplate>
<asp:Button ID="anotherTrigger" runat="server" Text="This trigger works!" OnClick="anotherTrigger_Click" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="anotherTrigger" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:ListView>
You can notice that I set UpdateMode="Conditional" for the panel in this last example. With this setting, the panel is updated only by its own triggers. If the attribute is set to UpdateMode="Always", the panel is updated not only by his own triggers but also by the triggers of the other UpdatePanels in the page. The default value is UpdateMode="Always" (as in your code sample).
I have a gridview and inside that I have below code.
<asp:TemplateField HeaderText="Header 3">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-- only your content that needs refreshing goes here -->
<asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"
onclick="ButtonAdd_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonAdd" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</FooterTemplate>
</asp:TemplateField>
I have added update panel because when I click ButtonAdd button data in the gridview has been removed. But after I added below code button click event doesn't fire. Please suggest solution.
Please place your whole gridview inside update panel and remove update panel inside and try..
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gridview1" runat="server" >
</asp:GridView>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<div id="TrainingSearchGridContainer" class="mt_20">
<asp:UpdatePanel runat="server" ID="UpdatePanelCountryRegions" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ProductDropDown"></asp:DropDownList>
<asp:DropDownList runat="server" ID="DateDropDown"></asp:DropDownList>
<asp:DropDownList runat="server" ID="CountryDropDown" AutoPostBack="True" OnSelectedIndexChanged="LoadRegions"></asp:DropDownList>
<asp:DropDownList runat="server" ID="StateDropDown"></asp:DropDownList>
<asp:LinkButton ID="SearchBtn" runat="server" OnClick="StartSearch">
<span class="blueButton2css3"><span class="btnspan">
<asp:Literal ID="SearchButtonText" runat="server"></asp:Literal></span></span>
</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:asyncpostbacktrigger controlid="SearchBtn" eventname="Click" />
But for some reason when I click on the button nothing happens, If I remove the update panel the button works fine.
The problem is that you are using AsyncPostBackTrigger instead of PostbackTrigger. AsyncPostBackTrigger is used when the control is outside the update panel, your linkbutton is present inside the update panel so you should use PostBackTrigger.
<asp:PostBackTrigger ControlID="SearchBtn" />
I want to show an UpdateProgress on the Page, when the Button is clicked and while the Gridiew is loading. However, I want to show the loading image next to the Button and not instead of the Gridview.
When the button is clicked, it doesn't show the UpdateProgress. What is missing from my code?
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="OKButton" runat="server" Text="OK" Width="48px" onclick="OKButton_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="OKButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress id="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel">
<ProgressTemplate><img scr="../images/wait.gif" /></ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="OKButton" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server".....>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Thanks for reply...I was trying to upload the image, however, I was unable to do so..
just to give an idea:
From Date _.................| Gridview
To Date __ ...................|
OK Button Image..........|
I know its not great. But I hope it gives an idea on how i'd like to place the button on the left side and GridView on the right side on the screen. The "Image" shows, where i'd like the image of UpdateProgress to be placed, while the GridvView is loading its content.
I have a ASP timer control which is supposed to run every three minutes. Although I kept the Timer control in an update panel, it is refreshing the whole page every time it runs.
Is there any it only refresh the particular section of the page, not the whole page?
<div>
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="300000" >
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:Timer runat="server" id="UpdateTimer" interval="200" ontick="function" />
<asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label runat="server" id="label1" />
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="300000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
you need to use UpdatePanel Triggers. Conditional Update Panels with triggers, and msdn source. Updatepanel with Triggers
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="300000"> </asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
Use update panel and add all the control's inside update panel which you don't want to be refreshed or postback by any event