ASP.NET AJAX Control Toolkit

Re: Trigger Animation

Ted Glaza [MSFT] — Tue, 26 Sep 2006 20:03:12 GMT

Hi Mattias,

No, the code example you were quoting wouldn't work if you had a TextBox in an INamingContainer. 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

Re: Trigger Animation

mattiasj — Sat, 23 Sep 2006 11:35:29 GMT

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 the ConditionScript attribute of the Condition tag.

/Mattias

Ted Glaza [MSFT]:

Hi Marinus/Mattias,

I think the best thing to do, as Mattias suggests, is to use the ConditionAnimation. This will let you decide whether or not to play the animation by running a little bit of JavaScript. Assuming your TextBox has an ID="TextBox1" (and isn't in a naming container - but if it is, then its ClientID, which is the munged ID of your server control when written to the client, will look something like ctl00_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 in this post) that will play the animation (as discussed here - and each animation, like OnClick, 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

Re: Trigger Animation

Ted Glaza [MSFT] — Fri, 22 Sep 2006 18:13:59 GMT

Hi Marinus,

The AnimationExtender 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 is creating the OnLoad animation on the server because that will automatically play once you post back.

Thanks,
Ted

Re: Trigger Animation

Marinus — Thu, 21 Sep 2006 07:33:02 GMT

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?

Re: Trigger Animation

Marinus — Thu, 21 Sep 2006 06:49:19 GMT

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

Re: Trigger Animation

Ted Glaza [MSFT] — Wed, 20 Sep 2006 23:41:24 GMT

Re: Trigger Animation

mattiasj — Wed, 20 Sep 2006 19:10:14 GMT

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

Re: Trigger Animation

mattiasj — Wed, 20 Sep 2006 19:06:54 GMT

Seconded!!

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

Trigger Animation

Marinus — Wed, 20 Sep 2006 13:57:21 GMT

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 tried RegisterStartupScript, but I can't get it right.

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