Hi folks

I have a situation where I want to animate a panel inside a Gridview.

Using another post on here as an example I have managed to write some code that will reference the correct panel (in the same row as the button that starts the animation) and will animate it.

The problem comes when I sort or page the Gridview, once I have done this, the animation stops working.

Below is the code which ensures the correct panel is animated.

1     Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
2    
3            Dim row As GridViewRow = e.Row
4            Dim panel As HtmlGenericControl = CType(row.FindControl("panel1"), HtmlGenericControl)
5    
6            If Not panel Is Nothing Then
7                Dim animation As AjaxControlToolkit.AnimationExtender = CType(row.FindControl("TryMe"), AjaxControlToolkit.AnimationExtender)
8    
9                animation.OnClick.Properties("AnimationTarget") = panel.ClientID
10   
11               Dim animClose As AjaxControlToolkit.AnimationExtender = CType(row.FindControl("ClosePopup"), AjaxControlToolkit.AnimationExtender)
12   
13               animClose.OnClick.Properties("AnimationTarget") = panel.ClientID
14               animClose.OnClick.Children(0).Properties("AnimationTarget") = row.FindControl("btnAnimate").ClientID
15   
16           End If
17   
18       End Sub

 And this is what the actual template in the GridView looks like...

1    <ItemTemplate> 
2        <div style="text-align: center">
3                                           
4                    <asp:LinkButton ID="btnAnimate" runat="server" Text="Tech Comment" OnClientClick="return false;" Visible='<%# ShowTechComments(Eval("TechnicalComment")) %>' /> 
5                            
6                    <div id="panel1" class="technicalComment" style="display:none;z-index:2;overflow:hidden;position:absolute;" runat="server">
7                   
8                    <div style="float:right;" id="btnCloseParent">
9                        <asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" Text="" Style="text-align: right;border:outset thin white; padding: 5px; text-decoration: none; background-color:#666666;color:White;text-align:center;font-weight:bold;" ToolTip="Close">X</asp:LinkButton></div>
10                      
11                       <asp:Label ID="lblTechnicalNotes" runat="server" text='<%# Eval("TechnicalComment") %>'></asp:Label>
12                      
13                   </div>
14                  
15                   <ajaxToolkit:AnimationExtender ID="TryMe" TargetControlID="btnAnimate" runat="server">
16                       <Animations>                           
17                           <OnClick>
18                               <Sequence>
19                                   <OpacityAction Opacity="0" />
20                                   <Parallel Duration="0.1">
21                                       <StyleAction Attribute="height" value="auto" />
22                                       <StyleAction Attribute="display" Value="block" />       
23                                   </Parallel>
24                                   <Parallel Duration=".2">                                   
25                                       <FadeIn/>
26                                   </Parallel>
27                               </Sequence>
28                           </OnClick>
29                       </Animations>
30                   </ajaxToolkit:AnimationExtender>              
31                 
32                  <ajaxToolkit:AnimationExtender ID="ClosePopup" TargetControlID="btnClose" runat="server">
33                       <Animations>
34                           <OnClick>
35                               <Sequence>
36                                   <EnableAction Enabled="true" />
37                                   <Parallel Duration=".3" Fps="15"> 
38                                       <FadeOut />
39                                       <StyleAction Attribute="display" Value="none" />                           
40                                   </Parallel>                               
41                               </Sequence>
42                              
43                           </OnClick>
44                       </Animations>
45                  </ajaxToolkit:AnimationExtender>
46                                       </div>
47                                      
48           </ItemTemplate>

Hi Folks

Still struggling with this one.

Any ideas? or maybe there's a better approach to take than having an AnimationExtender rendered in each row of the GridView.

Either way the problem still stands that the animation works perfectly, until I page or sort the Gridview and then it doesn't work at all!

Thanks

I've got this to semi -work as well but what i would really like to do is put whats in the ItemTemplate into a another usercontrol.  That way i can use this code within other user controls.  Where can I put the code for GridView1_RowDataBound sub so that the animation will work correctly.  panel1, TryMe, ClosePopup, btnAnimate don't exist when RowDataBound is executed.  I

I'm new to asp.net and i think it has something to do with page lifecycle but i'm not sure.

I am doing the same thing. I think you can dynamically create new AnimationExtender in your code-behind page , set the properties and add the AnimationExtender object to your current row. In this way you will have for each row one AnimationExtender. Probably there is better way using JavaScript whereas you can have one AnimationExtender object and with JS you can dynamically changed the TargetControlID property..

Hope this helps..

<%@ Register TagPrefix="cc1" TagName="EditDelete" Src="~/Apps/Shared/Controls/EditDeleteControl.ascx" %>
<%@ Register Tagprefix="cc1" TagName="MtextEdit" Src="~/Apps/Shared/Controls/MultiLineTextBoxWithValidationEditControl.ascx" %>
<%@ Register Tagprefix="cc1" TagName="MtextInsert" Src="~/Apps/Shared/Controls/MultiLineTextBoxWithValidationInsertControl.ascx" %>
<%@ Register TagPrefix="cc1" TagName="UpdateCancel" Src="~/Apps/Shared/Controls/UpdateCancel.ascx" %>
<%@ Register TagPrefix="cc1" TagName="StextEdit" Src="~/Apps/Shared/Controls/StandardTextBoxWithValidationEdit.ascx" %> <%--<cc1:StextInsert ID="StextInsert1" runat="server" />--%>
<%@ Register TagPrefix="cc1" TagName="StextInsert" Src="~/Apps/Shared/Controls/StandardTextBoxWithValidationInsert.ascx" %> <%--<cc1:StextEdit ID="StextEdit1" runat="server" />--%>
<%@ Register TagPrefix="cc1" TagName="LAnimation" Src="~/Apps/Shared/Controls/LabelWithAnimationSummary.ascx" %> <%--<cc1:StextEdit ID="StextEdit1" runat="server" />--%>

<asp:UpdatePanel ID="UpdatePanel2" runat="server" >
    <ContentTemplate>
        <h3><asp:label ID="lblCert1" runat="server"></asp:label></h3>
        <asp:GridView ID="GridView2" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID"
            DataSourceID="CertDataObject">
            <Columns>
                <asp:TemplateField HeaderText="Update">
                    <EditItemTemplate>
                        <cc1:UpdateCancel runat="server" ID="GridView2UC" />
                    </EditItemTemplate>
                    <ItemTemplate>
                        <cc1:EditDelete runat="server" ID="editdeletetemplate" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" Visible="False" />
                <asp:TemplateField HeaderText="Name" SortExpression="Name">
                    <EditItemTemplate>
                        <cc1:StextEdit ID="TextBox2" runat="server" Text='<%# Bind("Name") %>' /> 
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>' SkinID="basic"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Description" SortExpression="Description">
                    <EditItemTemplate>
                        <cc1:MtextEdit ID="TextBox1" runat="server" Text='<%# Bind("Description") %>' />
                        <%-- ID="TextBox1" runat="server" Text='<%# Bind("Description") %>' TextMode="MultiLine"
                            Width="100%"></asp:TextBox>--%>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <%-- ID="Label1" runat="server" Text='<%# Bind("Description") %>' SkinID="basic"></asp:Label>--%>
                        <cc1:LAnimation ID="Label1" runat="server" Text='<%# Bind("Description") %>'/>                       
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

inside the LabelWithAnimationSummary user control i have: 

<asp:Label ID="preview" runat="server" Text='<%#Getchars( DataBinder.Eval(Container, "DataItem.Description").ToString, 50) %>' SkinID="basic" />
    <asp:LinkButton ID="ellipses" runat="server"  OnClientClick="return false;" Text="(...)" SkinID="basic"/>
    <div id="panel1" class="popPnl" runat="server">                               
        <div class="right" id="btnCloseParent">
            <asp:LinkButton id="btnClose" runat="server" OnClientClick="return false;" CssClass="btnClose" ToolTip="Close Textbox">x</asp:LinkButton>
        </div>
        <asp:Label ID="Label1" runat="server" SkinID="edit"></asp:Label>
    </div>
    
    <cc1:AnimationExtender ID="ShowMe" TargetControlID="ellipses" runat="server">
    </cc1:AnimationExtender>

Protected Overrides Sub OnLoad(ByVal e As System.EventArgs) 
  MyBase.OnLoad(e)
  ShowMe.Animations = _
  "<OnClick>" + _
  " <Sequence>" + _
  " <OpacityAction Opacity=""0"" />" + _
  " <Parallel Duration=""0.1"">" + _
  " <StyleAction Attribute=""height"" value=""auto"" />" + _
  " <StyleAction Attribute=""width"" value=""250px"" />" + _
  " <StyleAction Attribute=""padding"" Value=""10px"" />" + _
  " <StyleAction Attribute=""display"" Value=""block"" />" + _
  " <StyleAction Attribute=""border"" Value=""solid #CCCCCC 2px"" />" + _
  " </Parallel>" + _
  " <Parallel Duration="".5"" Fps=""15"">" + _
  " <FadeIn/>" + _ 
  " </Parallel>" + _
  " </Sequence>" + _
  "</OnClick>"
End Sub 

Don't bother looking into this.  I was able to get it to work.  Peace.

How,

canu u send the code I'm trying to do the same thing

I have posted code to what you wanted working.  It's pretty simple.  I know this is an old post but someone may find this useful.  It took me a while to get it but it works great.

Here's the client code.

<head id="Head1" runat="server"><title>Test Page</title>

</head>

<body>

<form id="Form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">

<Services>

<asp:ServiceReference Path="GetData.asmx" />

</Services>

</asp:ScriptManager>

<script language="javascript" type="text/javascript">

if (clickTrack == itemValue){

}else{

showWaitImage("div4");

document.getElementById('div4').style.display="inline";

showWaitImage("div3");

document.getElementById('div3').style.display="inline";

// Cover one element with another (used to place the flyout on top of the cell, etc.)

var location = Sys.UI.DomElement.getLocation(bottom);

top.style.top = location.y + 'px';

if (!ignoreSize) {

var PDFDoc = "\\\\rotary_eng2\\draw\\converted\\" + prodNumber.replace(/^\s+|\s+$/g, '') + ".pdf"

document.getElementById(element).innerHTML = "<img src='images/loading.gif' alt='' />";

if (document.getElementById('div3').style.display == "inline" && document.getElementById('div4').style.display=="inline"){

}else{

</script>

<asp:Label ID="Label1" runat="server" Text="Enter A PO: "></asp:Label>

<input type="text" id="txtPO" onkeyup="initiatePOLookup(this.value);" runat="server" />

<input type="submit" runat="server" id="cmdGetPO" value="Get PO" style="display:none;" onserverclick="cmdGetPO_ServerClick" /><hr />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<Triggers>

<asp:AsyncPostBackTrigger ControlID="cmdGetPO" />

</Triggers>

<ContentTemplate>

<asp:Panel ID="dgPanel" runat="server" ScrollBars="auto" Height="450px" Width="315px">

<asp:DataGrid ID="dgMain" runat="server" CellPadding="4" HeaderStyle-CssClass="disappear" ForeColor="#333333" AutoGenerateColumns="False" GridLines="None" Width="295px">

<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

<EditItemStyle BackColor="#2461BF" />

<SelectedItemStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />

<AlternatingItemStyle BackColor="White" />

<ItemStyle BackColor="#EFF3FB" />

<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

<Columns>

<asp:BoundColumn DataField="PO" HeaderText="Purchase Order"></asp:BoundColumn>

</Columns>

</asp:DataGrid>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

<!-- "Wire frame" div used to transition from the button to the info panel -->

<div id="flyout" class="wireFrame"></div>

<!-- Info panel to be displayed as a flyout when the button is clicked -->

<div id="info" style="display: none; width: 450px; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0) progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorStr=#FFFFCC, endColorStr=#AFAFAFF); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">

<div id="btnCloseParent" style="float: right; opacity: 100; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);">

OnClientClick="return false;"

Text="X" ToolTip="Close"

Style="background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;" /></div>

<asp:Panel ID="parentPanel" runat="server" ScrollBars="Auto" Height="150px">

<div id="divTest"></div>&nbsp;

</asp:Panel>

<!-- Info panel to be displayed as a flyout when the button is clicked -->

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td valign="top">

<!--<div id="div3"></div>-->

<hr />

<asp:Panel ScrollBars="auto" ID="panel1" runat="server" Height="200px">

<div id="div3"></div>

</asp:Panel>

</td>

<td valign="top">

<hr />

<div id="div4"></div>

</td>

</tr>

</table>

</div>

<asp:Button ID="FakeTarget" runat="server" Style="display: none;"/>

<cc1:AnimationExtender