Trigger Animation

Like most of the ToolkitExtensions the AnimationExtension is connected to a TargetId, mostly a button.
But how could I trigger an animation in my codebehind. Say I check the text in a TextBox. How could I then start the animation. I triedRegisterStartupScript, but I can't get it right.

protectedvoid Button1_Click(object sender,EventArgs e)
{
if (TextBox1.Text == "")
{
//Show my animation
}
}

Seconded!!

Yes, god please, someone tell me how this is done.

Alternatively, tell us how to get the IDs of server controls into ConditionScript.

Hi Marinus/Mattias,

I think the best thing to do, as Mattias suggests, is to use theConditionAnimation. This will let you decide whether or not to play the animation by running a little bit of JavaScript. Assuming yourTextBox has anID="TextBox1" (and isn't in anaming container - but if it is, then itsClientID, which is the munged ID of your server control when written to the client, will look something likectl00_MyPanel1_TextBox1), you could define your animation as:
.
.
.
<Animations>
<OnClick>
<%-- Compared TextBox1.value to 2 single quote signs, not a double quote, to see if it's empty --%>
<Condition ConditionScript="$('TextBox1').value == ''">
.
. <%-- Original animation markup here --%>
.
</Condition>
</OnClick>
</Animations>
.
.
.

If you really do want to invoke the animation from the server, then you could emit code server side to interact with the Toolkit (as discussed inthis post) that will play the animation (as discussedhere - and each animation, likeOnClick,OnMouseOver, etc., has it's own function you can call to invoke it). If this doesn't answer your question, please keep posting.

Thanks,
Ted

Thanks for your answer Ted, I will read the posts and try it out.

Ted,
In the post about the ModalPopupExtender you wrote:
"Again, we're looking at making this a LOT easier with updates in our next release."
And yes, in the next release of the toolkit it was much easier. Now you just could write in your code behind:

ModalPopupProperties popup = MyModalExtender.GetTargetProperties(Target);
popup.Show();

Great!
Does the AnimationExtender has something alike?

Hi Marinus,

TheAnimationExtender doesn't have support for playing animations from the server (mostly because they're meant to be triggered from the client and it's a little weird to suggest that while the page was posting back your mouse hovered over a certain control). Another route you might look into iscreating the OnLoad animation on the server because that will automatically play once you post back.

Thanks,
Ted

Hi Ted,

I'm not 100% sure I understand your answer. Will the code below work if the TextBox is in a naming container (and therefore has that long munged ClientID) or not? If not, how do I make it work, because TextBoxes are almost always in naming containers in any reasonably complex application. I havent figured out how the heck to get the ClientID into theConditionScriptattribute of theConditiontag.

/Mattias

Ted Glaza [MSFT]:

Hi Marinus/Mattias,

I think the best thing to do, as Mattias suggests, is to use theConditionAnimation. This will let you decide whether or not to play the animation by running a little bit of JavaScript. Assuming yourTextBox has anID="TextBox1" (and isn't in anaming container - but if it is, then itsClientID, which is the munged ID of your server control when written to the client, will look something likectl00_MyPanel1_TextBox1), you could define your animation as:
.
.
.
<Animations>
<OnClick>
<%-- Compared TextBox1.value to 2 single quote signs, not a double quote, to see if it's empty --%>
<Condition ConditionScript="$('TextBox1').value == ''">
.
. <%-- Original animation markup here --%>
.
</Condition>
</OnClick>
</Animations>
.
.
.

If you really do want to invoke the animation from the server, then you could emit code server side to interact with the Toolkit (as discussed inthis post) that will play the animation (as discussedhere - and each animation, likeOnClick,OnMouseOver, etc., has it's own function you can call to invoke it). If this doesn't answer your question, please keep posting.

Thanks,
Ted

Hi Mattias,

No, the code example you were quoting wouldn't work if you had aTextBox in anINamingContainer. We'd like to make some improvements for scenarios like this in the future, but for now there is a workaround available. You can programatically modify the animations on the server like this:

<%@. Page Language="C#" %>
<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
 protected override void OnLoad(EventArgs e)
 {
 base.OnLoad(e);
 // Set the ConditionScript property of the OnClick Animation
 MyAnimations.OnClick.Properties["ConditionScript"] = string.Format("( $('{0}').value == '' )", txtName.ClientID);
 // Set the AnimationTarget property of the OnClick Animation's first child
 MyAnimations.OnClick.Children[0].Properties["AnimationTarget"] = txtName.ClientID;
 }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"><title>Test Page</title></head>
<body><form runat="server"><div>
 <atlas:ScriptManager id="ScriptManager" runat="server" />
 Name: <asp:TextBox ID="txtName" runat="server" /><br />
 <asp:Button ID="btnValidate" runat="server" Text="Animate If Empty" OnClientClick="return false;" /
 <atlasToolkit:AnimationExtender ID="MyExtender" runat="server">
 <atlasToolkit:AnimationProperties ID="MyAnimations" TargetControlID="btnValidate">
 <Animations>
 <OnClick>
 <Condition ConditionScript="/* To be filled in by the server - we'll default to false */ false">
 <Color Duration="1" StartValue="#FFFFFF" EndValue="#FF0000"
 Property="style" PropertyKey="backgroundColor" />
 </Condition>
 </OnClick>
 </Animations>
 </atlasToolkit:AnimationProperties>
 </atlasToolkit:AnimationExtender>
</div></form></body>
</html>

Thanks,
Ted