Master-Detail Using Ajax Animation Extender Flyout

[Mark Potter]

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