Saturday, March 24, 2012

Conditional UpdatePanelAnimation

Hi

I have an UpdatePanelAnimation which bound to an UpdatePanel. The updatepanel encloses label that should show notification if a user remove something from the GridView of the page. The buttons that triggers the UpdatePanel are located in the GridView. There are 2 buttons: Select and Remove. I try to trigger the updatepanel using RowCommand which seems does not work, even if i do paging, the animation is played. Ok here is the code simplified:

<div id="panelHolder" runat="server">
<atlas:UpdatePanel ID="upnlNotification" runat="server" Mode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlNotification" runat="server">
<asp:Label ID="lblNotification" runat="server"></asp:Label>
</asp:Panel>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="grdFavoriteVendors" EventName="RowCommand" />
</Triggers>
</atlas:UpdatePanel>
</div>

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="grdFavoriteVendors" runat="server" AutoGenerateColumns="False"
Width="100%" AllowSorting="True" OnRowCommand="grdFavoriteVendors_RowCommand"
OnRowCreated="grdFavoriteVendors_RowCreated" AllowPaging="True" OnPageIndexChanging="grdFavoriteVendors_PageIndexChanging">
<Columns>
<asp:BoundField DataField="VendorName" HeaderText="Vendor Name">
<ItemStyle Width="50%" />
</asp:BoundField>
<asp:BoundField DataField="VendorID" HeaderText="Vendor ID">
<ItemStyle Width="20%" />
</asp:BoundField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnSelect" runat="server" ImageUrl="/images/webprocurement/btn_select.gif"
CommandName="Select" />
<asp:ImageButton ID="btnRemove" runat="server" ImageUrl="/images/webprocurement/btn_remove.gif"
CommandName="Remove" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</atlas:UpdatePanel>

<atlasToolkit:UpdatePanelAnimationExtender ID="pnlAniNotification" runat="server">
<atlasToolkit:UpdatePanelAnimationProperties TargetControlID="upnlNotification">
<Animations>
<OnUpdating>
<Sequence>
<Parallel duration=".45" Fps="20">
<FadeOut AnimationTarget="panelHolder" />
<Resize Height="0" Unit="px" />
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<Parallel duration=".2" Fps="20">
<FadeIn AnimationTarget="panelHolder" Duration=".5" FPS="25" />
<Resize Height="30" Unit="px" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</atlasToolkit:UpdatePanelAnimationProperties>
</atlasToolkit:UpdatePanelAnimationExtender>

The problem i can not limit the animation to a specific trigger (button). Is there any documentation on the syntax that we can use for the XML style script for the updatepanelanimation?

thanks

Hi wahyu,

By design, theUpdatePanelAnimation will play whenever a partial postback occurs (even if the partial postback was caused on a DIFFERENTUpdatePanel). You should be able to use theConditionAnimation for this, which you can find out about in theAnimation Reference Walkthrough.

Thanks,
Ted

I'm trying to implement this, and running into trouble determining inside the ConditionScript whether a given panel is updating. I tried hooking to the PageRequestManager events, but apparently those fire after the ConditionScript is evaluated. Does anybody have a working example of animating only the currently updating panel using the toolkit? I saw the example in the AJAX docs for animating updated panels, but would prefer a declarative solution using the AJAX Toolkit if at all possible.

Thanks,
Daniel


Hi Daniel,

I've createdwork item 6249 to change UpdatePanelAnimationExtender so it only animates if its UpdatePanel has been changed (now that ASP.NET AJAX supports it).

Thanks,
Ted

No comments:

Post a Comment