Master-Detail Using Ajax Animation Extender Flyout

I am trying to get an animation extender flyout to show the detail of a
master record in a gridview.  I have succesfully used the animation
sequence in other parts of the site but in those cases the targecontroldid
was a button that was not part of a gridview.

In this case I need to change the targetcontrolid for the animation when
the detail command is clicked in the grid grow.

// aspx grid view

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="ObjectDataSource1" OnRowDeleting="GridView1_RowDeleting"
OnRowDataBound="GridView1_RowDataBound"
                OnRowCommand="GridView1_RowCommand">
        <Columns>
            <asp:TemplateField HeaderText="Delete">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkDeleteInventory"
                     CommandArgument='<%# Eval("Id") %>'
                     CommandName="Delete" runat="server">
                     Delete</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Id">
                <ItemTemplate>
                    <asp:Label ID="lblInventoryId" runat="server" Text='<%
# Bind("Id") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
  .
  .
  .
  .
            <asp:TemplateField HeaderText="Demands">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkDemands"
                     CommandArgument='<%# Eval("Id") %>'
                     CommandName="Demands" runat="server">
                     Demands</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

In the row command event I find the row that is clicked and set the target
controlid of the animation to the found control

        protected void GridView1_RowCommand(object sender,
GridViewCommandEventArgs e)
        {
            int InventoryId = 0;
            int InventoryId2 = 0;
            if (e.CommandName == "Demands")
            {
                InventoryId = Convert.ToInt32(e.CommandArgument.ToString
());
                this.ObjectDataSourceDemands.SelectParameters.Add(new
Parameter("InventoryId", TypeCode.Int32, InventoryId.ToString()));
                foreach (GridViewRow r in GridView1.Rows)
                {
                    Label l = r.FindControl("lblInventoryId") as Label;
                    InventoryId2 = Convert.ToInt32(l.Text);
                    if (InventoryId == InventoryId2)
                    {
                        LinkButton lnkDemands = r.FindControl
("lnkDemands") as LinkButton;
                        this.OpenAnimation.TargetControlID = lnkDemands.ID;
                        break;
                    }
                }
            }
        }

The code runs okay but on the pre-render for the page I get an Invalid
Operation Exception saying the TargetControlID of 'OpenAnimation' is not
valid. A control with ID 'lnkDemands' could not be found.

I have found other similar examples where the flyout is embedded in a
template for a column in the gridview.  I was hoping I could just use one
animation extender for the entire grid and just swap out the
targetcontrolId.

Animation is as follows

   <div id="flyout" style="display: none; overflow: hidden; z-index: 2;
background-color: #FFFFFF; border: solid 1px #D0D0D0;"></div>
   <div id="info" style="display: none; width: 350px; z-index: 2; opacity:
0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size:
12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;">
        <div id="btnCloseParent" style="float: right; opacity: 0; filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
            <asp:ImageButton ID="_btnClose"
ImageUrl="~/Images/eventLogError.bmp" runat="server" OnClientClick="return
false;" />
        </div>
        <div>
        <asp:UpdatePanel ID="UpdateDemands" runat="server"
ChildrenAsTriggers="true" UpdateMode="Always">
        <ContentTemplate>
         <asp:GridView ID="GridViewDemands" runat="server"
AutoGenerateColumns="False" DataKeyNames="Id"
DataSourceID="ObjectDataSourceDemands"  >
                <Columns>
                    <asp:TemplateField HeaderText="Id">
                        <ItemTemplate>
                            <asp:Label ID="lblDemandId" runat="server"
Text='<%# Bind("ID") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Inventory Id">
                        <ItemTemplate>
                            <asp:Label ID="lblInventoryId" Text='<%# Eval
("SingleProductInventoryServerId") %>' runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Demand Factor">
                        <ItemTemplate>
                            <asp:Label ID="lblDemand" Text='<%# Eval
("DemandFactor") %>' runat="server"></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
           </asp:GridView>
            &nbsp;
            <asp:ObjectDataSource ID="ObjectDataSourceDemands"
runat="server" SelectMethod="GetDemandsByInventoryId"
TypeName="SimulationModeling.SingleProductInventoryDataSource" >
            </asp:ObjectDataSource>
        </ContentTemplate>
        </asp:UpdatePanel>
        </div>
   </div>
    <cc1:AnimationExtender ID="OpenAnimation" runat="server"
TargetControlID="GridView1">
        <Animations>
            <OnClick>
                <Sequence>
                   <%-- Disable the button --%>
                    <EnableAction Enabled="false" />
                   <%-- Show the flyout --%>
                    <ScriptAction Script="Cover($get('GridView1'), $get
('flyout'));" />
                    <StyleAction AnimationTarget="flyout"
Attribute="display" Value="block"/>
                    <Parallel AnimationTarget="flyout" Duration=".3"
Fps="25">
                        <Resize Width="500" Height="180" />
                        <Color AnimationTarget="flyout"
PropertyKey="backgroundColor"
                                StartValue="#AAAAAA" EndValue="#FFFFFF" />
                    </Parallel>
                  <%-- Fade in the text --%>
                    <ScriptAction Script="Cover($get('GridView1'), $get
('info'));" />
                    <StyleAction AnimationTarget="info"
Attribute="display" Value="block"/>
                    <FadeIn AnimationTarget="info" Duration=".2"/>
                  <%-- Cycle the text and border color to red and back --%>
                    <Parallel AnimationTarget="info" Duration=".5">
                        <Resize Width="500" Height="180" />
                        <Color PropertyKey="color"
                                StartValue="#666666" EndValue="#FF0000" />
                        <Color PropertyKey="borderColor"
                                StartValue="#666666" EndValue="#FF0000" />
                    </Parallel>
                    <Parallel AnimationTarget="info" Duration=".5">
                        <Color PropertyKey="color"
                                StartValue="#FF0000" EndValue="#666666" />
                        <Color PropertyKey="borderColor"
                                StartValue="#FF0000" EndValue="#666666" />
                        <FadeIn AnimationTarget="btnCloseParent"
MaximumOpacity=".9" />
                    </Parallel>
                </Sequence>
            </OnClick>
        </Animations>
    </cc1:AnimationExtender>


Thanks in advance.

Mark Potter

===================================
This list is hosted by DevelopMentor®  http://www.develop.com

View archives and manage your subscription(s) at http://discuss.develop.com