With Great Power comes Great Response.write("Ability") : JavaScript

Documentation for the AjaxControlToolkit

PhaniRajuYN — Wed, 27 Aug 2008 07:07:23 GMT

Ready for some documentation for the ATK controls ?
To skip my journey to create this , download the Documentation ( in CHM form) here : AjaxControlToolkit Docs

Step 1 : Using AjaxDoc to generate the Reflection.org file required by Sandcastle

   1.0) Download AjaxDoc here .
   1.1) Download the Latest Source for the AjaxControlToolkit , here .
   1.2) Get the Script Files from the AjaxControlToolkit project .
   1.3) Create the AjaxControlToolkit.project.xml for AjaxDoc which has script references to the ATK Scripts.
   1.4) Run the Default.aspx page

Hurdle 1 : DynamicPopulateBehavior.js just refused to load.
Added this line to ln 150 of ScriptDoc.js file to skip types which throw errors.

 if(member ===null || typeof(member)==="undefined") continue;

1.5) Run the Default.aspx page again

Hurdle 2: “PopupBehavior is undefined”.
1.6) Re-arranged the script references in the Project.xml file to order the script files according to their dependencies.
1.7) Run the Default.aspx page again .

Step 2 : Use SandCastle to produce the CHM File

Follow the Steps 5-12 defined here : Creating a Chm build using Sandcastle
Whichever Transform you use (Vs2005/Prototype) , in step 8, remove these lines in the sandcastle.config file.

<language label="VisualBasic" name="VisualBasic" style="vb" />
<language label="CSharp" name="CSharp" style="cs" />
<language label="ManagedCPlusPlus" name="ManagedCPlusPlus" style="cpp" />
<!--<language label="JSharp" name="JSharp" style="cs" />
<language label="JScript" name="JScript" style="cs" />-->

There you go !

The CHM is not perfect ,

The documentation is missing for the following components
1. AnimationExtender
2. RichTextEditor
3. MultiHandleSlider
The Code Comments are missing from the CHM file
Insert gripe here

I'll probably take a look at this again to see if I can generate a CHM which has the missing parts.
And finally , while Its not everything , its not nothing either :)

Resources:
Bertrand's blog
SandCastle Blog
AjaxDoc on CodePlex
SandCastle on CodePlex

Astoria Silverlight Client Failing with FireFox 3.0

PhaniRajuYN — Fri, 27 Jun 2008 01:27:47 GMT

Hi all,

By now , anyone running a SIlverlight application Astoria Silverlight Client library in Firefox 3.0 would have seen a weird error about charsets.

This blog post will describe the error and how to work-around it .

Consider the following query :

DataServiceQuery<Customers> customerQuery = from cus in context.Customers 
                                            where cus.ID =='ALFKI' 
                                            select cus; 

AsyncCallback ac = iasyncResult =>{ 
  DataServiceQuery<Customers> cusQuery = iasyncResult.AsyncState as  DataServiceQuery<Customers>; 
  QueryOperationResponse<Customer>  response = cusQuery.EndExecute(iasyncResult); <-- Exception Thrown here 
}

customerQuery.BeginExecute(ac,customerQuery);

When this code runs in Firefox 3.0 , the highlighted line throws the exception,

Error Message : Character set 'iso-8859-1' is not supported.

Stack Trace :

   at System.Data.Services.Client.HttpProcessUtility.EncodingFromName(String name)
   at System.Data.Services.Client.HttpProcessUtility.MediaType.SelectEncoding()
   at System.Data.Services.Client.HttpProcessUtility.ReadContentType(String contentType, String& mime, Encoding& encoding)
   at System.Data.Services.Client.DataServiceContext.GetMaterializer(Type elementType, String contentType, Func`1 response, Func`4 create)
   at System.Data.Services.Client.DataServiceRequest.Materialize[TElement](DataServiceContext context, String contentType, Func`1 response)
   at System.Data.Services.Client.DataServiceRequest`1.Materialize(DataServiceContext context, String contentType, Func`1 response)
   at System.Data.Services.Client.DataServiceContext.EndExecute[TElement](IAsyncResult asyncResult)

What is this error ?

When we recieve the ATOM response from the server , we need to read the stream of content in the charset present in the Accept-charset header. The server does not set the Accept-Charset header and replays what the client sent. The normal Accept-Charset header sent to the server from the SL client looks like this ..

Accept-Charset: UTF-8

Now , in FireFox 3.0 , the Accept-Charset header , even though we explicitly set it to be the above , whats sent to the server is ..

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

And the Server responds back with the same charset and we try to read the content with this char-set.

Unfortunately , the charset ISO-8859-1, is not supported by the underlying Platform i.e SIlverlight.
and hence we error out

How do I fix this for now ?

Follow these instructions on changing your browser settings to work around the issue

Type about:config in the Firefox browser's address bar.
Navigate through a dialog box and check “I’ll be careful”.
In the Page’s Search box , type : “intl.charset.default” .
Double click on the entry that turns up , and set the value to “utf-8” .

Hope this helps.If you still face problems , open a thread on the Astoria Forums and we will try to help out.

GridViewFilterExtender : Filter GridView Rows Client-Side

PhaniRajuYN — Sat, 27 Oct 2007 14:30:38 GMT

Download Source Code and Sample application :

Excel's Filter Dialog My GridView Filter Extender

The above Screen Shots look promising , don't they ?
So, How would one go about building such a control ? Well, I have it laid out in front of you .

1) Find all unique Strings in the same column
2) Build a lookup table that stores the Unique string and the row Indices for the rows that contain the Unique String
3) Once user builds a Filter Expression and clicks on "Ok" , Filter the Rows in the Table based on the Expression.
4) For Now , the Filter Expression can only be a sequence of strings that the user wants to see in the grid.

Ex : If your grid looks like this :

The filter expression would be a comma-separated string that contains the unique strings to match in the rows.

var _currentRowFilter = "Ajax,Moo"

The lookup Table would look like this :

_lookupTable
        Select All    "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23"    
        Ajax    "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16"    
        Moo    "17,18,19,20,21,22,23"    

so , if we want to filter the rows , we would need to :

1) Hide all Rows to begin with .
HideRows : this.lookupTable["Select All"]

2) Show only those rows that are found in the lookup table against the filter Terms.
ShowRows :this.lookupTable["Ajax"]

That's about the algorithm / design for the extender to work .
Getting this working is another matter altogether.
Once you have understood this , lets start:

Find all unique Strings in the same column :

once you find all the unique strings in all subsequent rows for the same column , we will need to build the checkbox list that
will allows the user to select the filter Terms. I.e this :

This is a bit tricky , the way one would go about doing this would be :

Find out which Column the Extender is added in .Find the Cell Index of the Column , lets say _cellIndex
For all subsequent rows in the table, Lookup the innerText of the Cell with CellIndex cellIndex.

                  For Each Row
                    Read the innerText of the Cell at CellIndex cellIndex.
                    IF the string read is not yet present in the lookup Table then
                    BEGIN
                         add it to the lookup Table along with the rowIndex of the current Row
                    END
                   ELSE if string is already present in the lookupTable then

                    Begin
                       add the RowIndex to the lookupTable[string] location.
                   END IF

Once you have found all the Unique Strings , build the CheckBoxList and attach the appropriate handlers .

Once user builds a Filter Expression and clicks on "Ok" , Filter the Rows in the Table based on the Expression.

Hide All Rows .
Get all the Rows in the Table other than the header and the footer , _rowsInTable.
Get the Current Search Filter by adding all the strings that are checked in the CheckBoxList.
For each term in the Search Filter , get the appropriate row Indices ,
For each row Index in the Row Indices, _rowIndex
assign the cssClass _inFilterCssClass to the _rowsInTable[_rowIndex].

This is all neat , what if I have multiple columns in my GridView and I want to filter
each succeeding Column depending on the previous Column?

Well, I have thought about that too ..
This is what we would do :
Every FilterExtender (a) can have a Dependent Filter (b) , if filter (b) is used to filter data ( it raises the itemFiltered Event ),
then the Filter (a) has to rebuild its index to remove any index text
that was removed as a result of the filter expression on filter (b).

Important Note about the DependentFilterID

If a FilterExtender (a) has a FilterExtender (b) as its Dependent Filter ID , they both should have the matching values for the
InFilterCssClass and the NotInFilterCssClass attributes.

Set DependentFilterID

In markup

<Raj:GridViewFilterExtender  DependentFilterId="optionListPnl"

JavaScript

$find(<filterBehaviorID>).set_dependentFilterId(<dependentFilterId>)

Attributes :

Name	Description
TargetControlID	ID of the control upon clicking on which , the Filter is shown
OkButtonId	ID of the control upon clicking on which , the FilterExpression is applied and the filter is hidden
CancelButtonId	ID of the control upon clicking on which , the FilterExpression is NOT applied and the filter is hidden
EnableSelectAll	If the filter contains an option to "Select All" Rows
InFilterCssClass	The CssClass applied to all rows which are available from the Filter Expression.
NotInFilterCssClass	The CssClass applied to all rows which are NOT available from the Filter Expression.
FilterPanelID	The Panel Control which contains the Filter

Events :

Name	Description
itemSelected	When any filter Expression is Selected
itemFiltered	When the filter Expression is applied.
onOk	when the Control Referenced by OkButtonId is clicked
onCancel	when the Control Referenced by CancelButtonId is clicked

Subscribing to the Events :

a) Markup :

<Raj:OptionPickerBehavior runat="server" ID="optionListPnl" TargetControlID="btnToggle"
         blah blah blah
         OnOkScript="okClickHandler"
         OnCancelScript ="cancelClickHandler"
         OnClientItemFiltered ="itemFilteredHandler"
         OnClientItemSelected ="itemSelectedHandler">
</Raj:OptionPickerBehavior>

<script language="javascript" type="text/javascript">
            function itemSelectedHandler(element,args)  {
                Sys.Debug.trace( args.get_text() + "   " + args.get_isChecked());
            }
            function itemFilteredHandler(element,args)  {
                Sys.Debug.trace( args.get_item() + "   " + args.get_filterText());
            }
            function okClickHandler(element,args)  {
                Sys.Debug.trace( "Ok Button was clicked" );
            }
             function cancelClickHandler(element,args)  {
                Sys.Debug.trace( "Cancel Button was clicked");
            }
            function traceCall(msg) {
                $get("traceDiv").appendChild(document.createTextNode(msg)); 
            }
 </script>

b) Script

$find("BehaviorId").add_onOk( okClickHandler );

$find("BehaviorId").add_onCancel( cancelClickHandler );

$find("BehaviorId").add_itemFiltered( itemFilteredHandler );

$find("BehaviorId").add_itemSelected( itemSelectedHandler );

That's it for now ! Do give feedback on the control if you get a chance to use it / look at it .

Astoria DataSource Extender

PhaniRajuYN — Fri, 19 Oct 2007 23:18:33 GMT

Download Source and Example :

Most of you must have heard about Astoria. Read More about it here , if you haven't already :
Microsoft Codename "Astoria".
The Astoria Team Blog :

It's a "Database in the cloud", your db is hosted on the Web and you access it via REST -style URIs.

I have written a ControlExtender that helps one retrieve data and post data to a db on Astoria using JavaScript.
The Extender encapsulates its own Server-Side handler so that you don't have to write a Server-Side proxy to
avoid Making Cross-Domain Requests from the Client browser.

The way it would work is :
Client Browser =====> Server-Side handler ===> Astoria Servers

When the Client Script tries to download the data from the Astoria Servers, the following process is followed

Client Script requests a certain page ( dataDownloader.astoria) on the same server as the website with all the Astoria Query related parameters as headers.
The *.astoria extension is mapped to a handler contained in the Extender Control.
Once the handler receives the request , it makes the call to the actual Astoria Servers and passes on the error/Data back to the requesting Client .
The Control notifies any registered event handlers that the Data is now ready for use by the Script

What does the Extender NOT do ?

The Extender does NOT Support the following Scenarios

Data Manipulation such as POSTING and Editing Data.
Bind the Returned Data to HTML controls , this would have to be done manually.

Events Supported by the Extender:

Event Name	Raised When	Event Args	Usage
dataReady	When the Data is downloaded and available for use by the client application	EventArgs contains the item( the Control itself) and the Data that the Client application can use	See Example below
dataDownloadBegins	When the Data download starts from the Astoria Servers	EventArgs.Empty	See Example below
dataDownloadEnds	When the Data download Ends from the Astoria Servers . The Data may/may not be ready for use by the Client Application	EventArgs.Empty	See Example below
dataDownloadError	When the Data download from the Astoria Servers results in an error	AstoriaExtenders.DataDownloadErrorEventArgs Contains the Error information	See Example below

Subscribing to the Events of the Astoria Data Source Extender :

The BehaviorID of the Extender added on the page is : "asBehavior"

//Subscribing to the dataReady event
$find("asBehavior").add_dataReady( dataReadyHandler );
//Subscribing to the dataDownloadBegins event
$find("asBehavior").add_dataDownloadBegins(<functionName>);
//Subscribing to the dataDownloadEnds event
$find("asBehavior").add_dataDownloadEnds(<functionName>);
//Subscribing to the dataDownloadError event
$find("asBehavior").add_dataDownloadError(dwError);

//The dataReady Event handler
function dataReadyHandler(sender,eventArgs) {
   alert("The Data returned is :: "+eventArgs.get_data());
}

//The dataDownloadError Event handler
function dwError(sender,eventArgs) {
    Sys.Debug.trace("error Code ::"+eventArgs.get_error().ErrorCode);
    Sys.Debug.trace("error Message ::"+eventArgs.get_error().ErrorMessage);
}

Attributes Supported by the Extender

Attribute Name	Description	Usage	Default
PageSize	The Number of Records to show in one page	See Example below	5
StartPageIndex	The Initial page of Data returned	See Example below	0
Query	The Actual Astoria Query to return Data to the Client	See Example below	None
ExpandRecord	The Sub-record which has to also expanded along with the parent Rows.	See Example below	None
DatabaseURI	The Astoria URI to reach the Database	See Example below	None
DataFormat	The Format in which the Client Requires data : json/xml/rdf	See Example below	json

Usage Examples

$find("asBehavior").get_currentPageIndex();
$find("asBehavior").set_currentPageIndex(2);

//Retrieve the Table 'Categories' from the 'NorthWind' Database
$find("asBehavior").set_dbURI("http://astoria.sandbox.live.com/northwind/northwind.rse");
$find("asBehavior").set_query("/Categories");

$find("asBehavior").set_dataFormat("json");
$find("asBehavior").set_pageSize(10);

Methods Supported by the Extender

Method Name	Description	Usage
DataBind	Does what it says : it Downloads the data based on the parameters already specified	See Example Below

Usage Examples

Bind the data to the client :
$find("asBehavior").DataBind()
Move to a Specific page of data :
//Move to the 3rd page
$find("asBehavior").set_currentPageIndex( 2 );
$find("asBehavior").DataBind();
Move to the Next page
$find("asBehavior").set_currentPageIndex( 
               $find("asBehavior").get_currentPageIndex() + 1  
               );
$find("asBehavior").DataBind();
Move to the Previous page
$find("asBehavior").set_currentPageIndex( 
                   $find("asBehavior").get_currentPageIndex() - 1  
                    );
$find("asBehavior").DataBind();

Markup Way of doing the above

<Raj:AstoriaDSExtender runat="server" ID="asbehaviorPnl" 
BehaviorID="asBehavior"
TargetControlID="btnAstoria" 
DatabaseURI="http://astoria.sandbox.live.com/northwind/northwind.rse"
DataFormat="json" StartPageIndex="0" PageSize="1" 
Query="/Categories" ExpandRecord="Products"
OnClientDataDownloadError="dwError" 
OnClientDataReady="endDownload" 
ErrorPanelId="divContainsErrorInfo" />

Setting up your project to use the Astoria Extender
Web.Config :
1. Register the Handler for the Extender
Add the Below line to the <httpHandlers> Section of your web.config.
<add path="*.astoria" verb="*" type="AstoriaExtenders.AstoriaHandler"/>

2. The Tag Prefix for the Extenders
Add this line to the <controls> Section of the <Pages> Section in web.config
<add tagPrefix="Raj" namespace="AstoriaExtenders" assembly="AstoriaExtenders"/>

3. Set up the proxy so that the Web Server can talk to the Astoria Servers.
<system.net>
    <defaultProxy>
      <proxy usesystemdefault="False" proxyaddress=http://proxyServerName bypassonlocal="True"/>
    </defaultProxy>
</system.net>

Happy Birthday to Me !!!

PhaniRajuYN — Mon, 17 Sep 2007 18:47:43 GMT

Hello all ,

Today I grow a year older , I am now all of 26 !!!

As return gifts to everyone, I am giving out a demo application that encompasses most of my knowledge about the AjaxControlToolkit Animation Extender.

Here is a list of the Animations that are demo'd .

Basic Animations

Fade
ReSize
Length
Color
Pulse
Discrete
Scale
Move
Case
Condition
Sequence
Parallel

Actions

Enable Action
Script Action
Hide Action
Opacity Action
Style Action

Advanced

Scripting Animations
Client-Side DataBinding
Experiment #1
Experiment #2 ( Plot a Path and Follow it )
Reuse AnimationExtender

Triggers

OnLoad
OnHoverOver/Out

Some Screenshots

The Main Menu

In each demo of each animation type , you get :

a Demo of the animation

2. The Source Code for implementing the animation

3. Reference towards further explanation of the animation type

How do I download this ?

Click here :

What do I need to be pre-installed ?

The ASP.NET Ajax Extensions

IIS Web Server

How do I set this up ?

Follow the steps mentioned here : Instructions to Setup a Virtual Directory in IIS

Which browser does this work in ?

The animations themselves work in all browsers that are officially supported.

For the Tabs look that is present on each page is my own implementation using JavaScript that works only in IE ( I use DIVS :-) ).

In case you see that you cant navigate in between the tabs on the demo pages , fire up visual Studio 2005 and you should be able to see

the source code right there.

So , Download it and go crazy !!!

Expand Accordion Panes On Mouse Over Header

PhaniRajuYN — Mon, 10 Sep 2007 22:56:58 GMT

This is a common requirement I see among users of the accordion ,

How do I Open Accordion Panes OnMouseOver of the header and Not on header Click ?

The answer is pretty simple .

Lets walk through this :

a) Setup your Accordion

 <ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="grey" 
            FadeTransitions="false"  FramesPerSecond="25" TransitionDuration="250"

            HeaderCssClass="dimgreen" EnableViewState="true">
            <Panes>
               ::::
            </Panes>
</ajaxToolkit:Accordion>

b) Each of the accordion header Pane will have a <SPAN> tag setup for the header.

    On MouseOver of the Span Tag , we will open the Accordion Pane .

<ajaxToolkit:AccordionPane runat="server" ID="PaneOne">
          <Header>
               <span onmouseover="Openpane('0',event)">Accordion</span>
           </Header>
           <Content>
               <br />
               <br />
               Expand Accordion Panes on Mouse Over :: Pane 1
               <br />
               <br />
           </Content>
</ajaxToolkit:AccordionPane>

The Span's onmouseover event is handled by the Openpane Function.

c) The javaScript Function Openpane .

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

function Openpane(paneIndex,eventElement) { 
    var behavior = $get("Accordion1").AccordionBehavior; 
    behavior.set_SelectedIndex(paneIndex); 
}

</script>

Download Complete Example :

How to : Perform Operations on all instances of a Ajax Control Extender on a page

PhaniRajuYN — Wed, 20 Jun 2007 17:12:14 GMT

Consider a scenario wherein you have a lot of control Extenders on a page and you want to conduct operations on all instances

Specific Extender or specific instances of an extender.

We all know that we can reference certain instances of an Extender by using its BehaviorID and the $find function.

Now , consider an implementation where you want to Collapse/Expand all Collapsible Panels present on a Page.

You don't know how many CollapsiblePanels will be present on the page and what their IDs will be .

Solution

The ASP.NET Ajax Framework has a couple of really useful functions which will help us here.

You can get all instances of all behaviors present on the page using the Sys.Application.getComponents() method.

There , it's that simple !!

How do you use this to find all instances of a Specific Control Extender on a page ?

Ans : You can find out the "Type" of any given Behavior by using any of the following code Snippets.

1) Using the Object.getType() Method.

EX:

Given that your behavior Instance is : controlYourSelf of type : HoverMenu

Object.getType( controlYourSelf ).getName()

will give you the name of the AjaxControlToolkit behavior .

Ex output is :  AjaxControlToolkit.HoverMenuBehavior and so on and so forth.

2) Using the get_name() method on the Behavior Instance.

Your Behavior Name will not be qualified with AjaxControlToolkit.

so , if you call get_name() on controlYourSelf Behavior .

controlYourSelf.get_name() will give you : HoverMenuBehavior

usage :

<BehaviorInstance>.get_name()

Consider the Following Example which shows you how to Collapse all the Collapsible Panels present on a page:

The Algorithm would be:

Find all instances of the CollapsiblePanel Behavior on the page.
On each of them ,
Check if the Panel is Collapsed by calling the get_Collapsed() function.
If not collapsed , call the collapsePanel Function to collapse the Panel.

The Code would be :

//Function To Collapse all CollapsiblePanels on a page , if not already collapsed.
function collapseAllCollapsiblePanels() {
    var currentBehavior = null;
   //1) Find all instances of the CollapsiblePanel Behavior on the page.
    //Get all the Behaviors Present in the Page
    var allBehaviors = Sys.Application.getComponents() ;
    //Loop Through them
    for( var loopIndex = 0 ; loopIndex < allBehaviors.length; loopIndex++ ) {
        currentBehavior = allBehaviors[loopIndex];
    //For each behavior , check the Behavior Name 
        if( currentBehavior.get_name() === "CollapsiblePanelBehavior" ) {
      //If its of type CollapsiblePanelBehavior
        //3) Check if the Panel is Collapsed by calling the get_Collapsed() function.
            if( !currentBehavior.get_Collapsed() ) {
            //4) If not collapsed , call the collapsePanel Function to collapse the Panel.
                currentBehavior.collapsePanel();
            }
        }
    }
}

You can use this approach in your applications  for any myriad number of reasons .

Hope this helps Someone out there.

How to : Use a Key Value Pair in your AutoCompleteExtender ( updated again... )

PhaniRajuYN — Tue, 19 Jun 2007 16:50:00 GMT

Hi all,

This has come up time and again on the asp.net Ajax forums and has become the Top Voted issue for the AutoCompleteExtender Work Items . I had some time the other day and set upon to write a fix for this .

How do you use it?

1) Attach a handler to the itemSelected Event using the OnClientItemSelected property in the ACE markup

<ajaxToolkit:AutoCompleteExtender runat="server" 
            BehaviorID="AutoCompleteEx" ID="autoComplete1"
            TargetControlID="myTextBox" ServicePath="~/Services/AutoComplete.asmx"               
            ServiceMethod="GetCompletionListKeyValuePair"
            ......
            OnClientItemSelected ="IAmSelected"
        >
</ajaxToolkit:AutoCompleteExtender>

function IAmSelected( source, eventArgs ) {
   alert( " Key : "+ eventArgs.get_text() +"  Value :  "+eventArgs.get_value()); 
}

2) The Server-Side Method :

The Server-Side Method will return an array of strings as before ,

You create KeyValue Pairs by calling the method :

AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(<key>,<value>);

EX:

[WebMethod]

        public string[] GetCompletionList(string prefixText, int count)
        {

            if (count == 0)
            {

                count = 10;

            }

            if (prefixText.Equals("xyz"))
            {

                return new string[0];

            }

            Random random = new Random();

            List<string> items = new List<string>(count);

            for (int i = 0; i < count; i++)
            {

                char c1 = (char)random.Next(65, 90);

                char c2 = (char)random.Next(97, 122);

                char c3 = (char)random.Next(97, 122);

                items.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(prefixText + c1 + c2 + c3, i.ToString()));

            }

            return items.ToArray();

        }

The Display of the ACE does not change , it still remains the same :

Once you select an item from the DropDown of the ACE , you get an alert which shows you the value of the selectedItem.

In Your applications , instead of the Alert , process some business logic as per your requirements.

Hope this is an useful Addition.

Download the Latest AjaxControlToolkit from :

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941

[Update ]

You don't need to specify the UseKeyValuepairs attibute anymore ( in fact , its been removed :) ).

The ACE script is intelligent enough to realize when Key/Value pairs are returned automatically.

And also , the method CreateKeyvaluePair has been changed to CreateAutoCompleteItem.

Scripting Animations from the Ms Ajax AnimationExtender

PhaniRajuYN — Fri, 01 Jun 2007 00:54:38 GMT

An ignored / unknown / very useful feature of the animation Framework is that it allows you to control the animation as its playing.

You can Play, Pause , Resume , Stop and Quit an Animation Instance by using appropriate methods in JavaScript.

Setting up the Animation

The Animation we will be playing is a Length Animation on a DIV element with ID "divMovable".

The DIV will Increase in length from 200 px to 550px over a duration of 1.5 Seconds OnClick of the DIV.

Markup For Div

<div id="divMovable" runat="server" class="demoDivYellow">
    I Move Away
</div>

Markup for the Animation Extender

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
                        runat="server" TargetControlID="divMovable">
      <Animations>
             <OnClick>
                     <Length duration="1.5" fps="40" 
                            Property="style"  PropertyKey="height" 
                            StartValue="200"  EndValue="550" 
                            unit="px" AnimationTarget="divMovable" />
              </OnClick>
         </Animations>
</ajaxToolkit:AnimationExtender>

Notice that the AnimationExtender has the BehaviorID assigned to be "controlledAnimation".

We will be accessing the Control Methods using this BehaviorID.

Playing An Animation

You can trigger an animation to start playing by calling the play method on the Animation Extender Behavior .

function playAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.play();
        }

Pausing An Animation

You can Pause an animation by calling the pause method on the Animation Extender Behavior .

function pauseAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.pause();
        }

Resuming a Paused Animation

You can Resume a Paused Animation by calling its play Method again :) .

Stopping A Playing Animation

You can Stop a playing animation by calling the stop method on the Animation Extender Behavior .

function stopAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.stop();
        }

Quitting A Playing Animation

You can quit playing an animation by calling the quit method on the Animation Extender Behavior .

function quitAnimation() {
            var onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
            onclkBehavior.quit();
        }

What's the Difference between Stop and Quit ?

Copied Text from the Remarks section of the Quit Function from AnimationBehavior.JS

"Quit differs from the stop function which will update the final state.  The
quit function is most useful for scenarios where you're toggling back and forth
between two animations , like those used in OnHoverOver or OnHoverOut, and
 you don't want to completely finish one animation if its counterpart is triggered"

Complete Sample

<%@ Page Language="C#" AutoEventWireup="true"%>
<%@ Register Assembly="AjaxControlToolkit, Version=1.0.10123.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
    Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<head id="Head1" runat="server">
    <title>Controlling Animation With JavaScript</title>
<script language="javascript">
        var onclkBehavior ;
        function pageLoad()
        {
            onclkBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
        }
        function playAnimation() {
            
            onclkBehavior.play();
            $get("lblCurrentStatus").innerText="Playing..";
        }
        function pauseAnimation()
        {
        
           onclkBehavior.pause();
           $get("lblCurrentStatus").innerText="Paused..";
        }
        function stopAnimation() {
            onclkBehavior.stop();
            $get("lblCurrentStatus").innerText="Stopped..";
        }
        function quitAnimation()
        {
            $find("controlledAnimation").get_OnClickBehavior().quit();
            $get("lblCurrentStatus").innerText="Quit..";
        }
    </script>
</head>
<body>
    <form id="frmScripting" runat="server">

<input type="button" class="purpleButtonClass" onclick="playAnimation()" id="btnPlayAnimation"
                           value="Play" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="pauseAnimation()" id="btnPauseAnimation"
                           value="Pause" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="stopAnimation()" id="btnStopAnimation"
                           value="Stop" /><br /><br />
<input type="button" class="purpleButtonClass" onclick="quitAnimation()" id="btnQuitAnimation"
                           value="Quit" /><br /><br />
<span id="lblCurrentStatus"></span>


<div id="divMovable" runat="server" class="demoDivYellow">
    I Move Away
</div>

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
    runat="server" TargetControlID="divMovable">
    <Animations>
        <OnClick>
            <Length duration="1.5" fps="40" 
                    Property="style"  PropertyKey="height" 
                    StartValue="200"  EndValue="550" 
                    unit="px" AnimationTarget="divMovable" />
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>
</form>
</body>
</html>

Hope this helps someone out there!

My Update to the AutoCompleteExtender

PhaniRajuYN — Fri, 25 May 2007 00:48:00 GMT

HI ,

I was asked to work on the beta AjaxControlToolkit Patch Utility Tool from the Asp.Net AjaxControlToolkit Forums .

My first fix , which allows the first result in a result set to be automatically selected ( if chosen to ) , has been made part of the codebase

and will be in the next release of the Toolkit .

Youc an see me in the Hall of Fame .

Default Behavior , With "FirstRowSelected" set to false.

Behavior after My patch is part of the AjaxCotnrolToolkit , With "FirstRowSelected" set to true.

Link to the WorkItem my fix resolves Be able to have the first row selected Title is required.

Hope this helps !!!

Some Useful Links from the ASP.NET Ajax Forums

PhaniRajuYN — Thu, 10 May 2007 23:50:39 GMT

Hi ,

Over the past couple of months, I have been actively contributing to the Asp.net Ajax forums and have come across some very

weird and challenging problems to solve.Anyone who's been at the forums can tell, the community is VERY Active and helpful when it comes to helping

out your fellow developer . Below is a list of some FAQs that I often encountered and was able to address on the Forums .

Helping someone out with a brain-bender they are stuck on and seeing the issue resolved after some brainstorming is VERY satisfying.

Why am I doing this ?

There is a lot of content on the Forums and I wanna share what I learnt and was able to share with my fellow devs.

Also, I could have blogged about this but felt that its better to point you guys to the place where we learnt about this .

You might find some content duplicated from my Blog , as far as possible I have tried to avoid that and give you guys the unique ones that I have seen.

As time goes by , I will be putting up another list of issues that I helped on ,

these are the unique ( sort-of ) ones that I could find out of all the ones that I answered .

If you are not a part of the Forums , get yourself an account and start helping out !

Hope this helps someone out there !

HowTo : Change Visible Tab Using JavaScript in the MS AJAX TabControl

PhaniRajuYN — Tue, 17 Apr 2007 01:20:14 GMT

I have seen this in the forums a lot ..

"How do I change the Visible Tab in the MS AJAX TabControl on the Client-Side using Javascript ?"

Well, I have posted it several times and I think Its time I'd rather point people to a link than write the same piece again and again :-).

So, here you go .....

1) Consider that you have a TabControl on your page by the name of "MyTabs" .

<ajaxToolKit:TabContainer ID="MyTabs" runat="server">
//blah blah blah
</ajaxToolKit:TabContainer>

2) You can access the Methods exposed by the TabControl by accessing its  behavior.

   The Behavior is not accessible easily .

   The  TabControl has a property called as "control" that provides a way to access the Client-Side Methods of the

   TabControl.

   EX: var tabBehavior = $get('<%=MyTabs.ClientID%>').control;

3) once you have a handle to the Tabbehavior , you can use the "set_activeTab" method to set the Active Tab of the TabControl.

   EX:tabBehavior.set_activeTabIndex(1);

4)  You are Done !!

Complete  Code for the ChangeTab Function :

<script language="javascript"> 

function changeTab( tabIndex ){ 
var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
tabBehavior.set_activeTabIndex(tabIndex); 
}

</script>

The Complete Example is posted below :

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Select Tabs By Script</title>
</head>
<body>
    <form id="frmAccessAccordion" runat="server">

        <script language="javascript">
        function changeTab(){ 
        //Get The Index of the Current Selected Index in the DropDownList
        var tabIndex = parseInt( $get('<%=dlTabindex.ClientID%>').value );
        //Get a Handle to the Tab Behavior 
        var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
        //Set the Currently Visible Tab 
        tabBehavior.set_activeTabIndex(tabIndex); 
        }
        </script>
        Select Tab To Show :
        <asp:DropDownList runat="server" ID="dlTabindex">
            <asp:ListItem Text="One" Value="0"></asp:ListItem>
            <asp:ListItem Text="Two" Value="1"></asp:ListItem>
            <asp:ListItem Text="Three" Value="2"></asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="btnDynamicAnimate" runat="server" Text="Button" OnClientClick="changeTab();return false;" />
        <asp:ScriptManager runat="server" ID="scrpManager" EnablePartialRendering="true">
        </asp:ScriptManager>
        <ajaxToolKit:TabContainer ID="MyTabs" runat="server">
            <ajaxToolKit:TabPanel runat="server" ID="tabOne">
                <HeaderTemplate>
                    One
                </HeaderTemplate>
                <ContentTemplate>
                    Tab One
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
            <ajaxToolKit:TabPanel runat="server" ID="tabTwo">
                <HeaderTemplate>
                    Two
                </HeaderTemplate>
                <ContentTemplate>
                    Tab Two
                    <asp:Button runat="server" ID="btnServer" Text="Submit" />
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
            <ajaxToolKit:TabPanel runat="server" ID="tabThree">
                <HeaderTemplate>
                    Three
                </HeaderTemplate>
                <ContentTemplate>
                    Tab Three
                    <asp:Button runat="server" ID="Button1" Text="Submit" />
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
        </ajaxToolKit:TabContainer>
    </form>
</body>
</html>

MS AJAX AnimationExtender : How Many Ways Do I Play thee ? ( Updated )

PhaniRajuYN — Fri, 13 Apr 2007 17:23:04 GMT

We will discuss the various ways in which one can animate a visual element using the MS AJAX Animation.

The Example would be to resize a div named "queryReply" to have a height of 100px and width of 200px On Click of the Div .

1) The Simplest Way , Markup

<ajaxToolkit:AnimationExtender runat="server" ID="animateReplyPanes" 
        TargetControlID="queryReply" BehaviorID="animateReplyPanesBehavior">
            <Animations>
                <OnClick>
                       <Resize Height="100" FPS="25" Width="200" duration="0.3" unit="px"/>
                </OnClick>
            </Animations>
</ajaxToolkit:AnimationExtender>

This would be the easiest way to attach an animation ( ReSize ) to a control ( QueryReply ) on an Event ( OnClick ) .

When the Div is clicked , the Control "queryReply" is resized to have a height of 100 px and a width of 200px.

2) The "Not So Simple" Ways via javascript

a) Call the Static PLAY Method of the Animation Framework to Animate the Control .

//Play the Animation by calling its static methods
AjaxControlToolkit.Animation.ResizeAnimation.play( $get("queryReply") , 0.3 , 25 , 100 , 300 , "px" );
The Animation will play immediately after this line.

b) Create an Instance of the Client-Side Animation Extenders to Animate the Control .

//Create an instance of the ReSize Animation
var resizeAnimation = new AjaxControlToolkit.Animation.ResizeAnimation( $get("queryReply") , 0.3 , 25 , 100 , 300 , "px");
//Play the Animation just created
resizeAnimation.play(); 
c) Selectively playing the Animation Already defined in Markup for an AnimationExtender on the Page.

Lets say that you already have animation defined on your page in markup and you want to trigger the animation using Script .

You achieve this by :

1) Get a handle to the AnimationExtender's Behavior by using the "$find" method.
//Get a handle to the Animation Behavior
var behaveYourself       = $find("animateReplyPanesBehavior");
2) Based on where the animation is defined ( Onload , OnClick , OnHover , whatever ), get a handle to the child Animation Definition.
//Get the Animation to be played onClick of the TargetControl 
var onClickAnimation     = behaveYourself.get_OnClickBehavior();
//Get the Animation to be played onLoad of the TargetControl 
var onLoadAnimation     = behaveYourself.get_OnLoadBehavior();
//Get the Animation to be played onHover of the TargetControl 
var onHoverAnimation     = behaveYourself.get_OnHoverBehavior();
3) Call the "Play" method on the required Animations Definition.
//Play the Animation defined  onClick of the TargetControl 
onClickAnimation.play();
//Play the Animation defined  onLoad of the TargetControl 
onLoadAnimation.play();
//Play the Animation defined  onHover of the TargetControl 
onHoverAnimation.play();
d) Set the JSON String for an existing Animation Extender

Once you declare the Markup as above, you can access the animations that are assigned to the Extender by using the "get_<Event>" Methods on the Behavior .

EX:
//Get a handle to the Animation Behavior
var behaveYourself       = $find("animateReplyPanesBehavior");
//Get the Animation to be played onClick of the TargetControl 
var onClickAnimation     = behaveYourself.get_OnClickBehavior();

Once you have the respective Animation Behavior , you can use the "set_<EVENT>" method to set the Animation JSON String .
The Json String is constucted like this :
"{
     "AnimationName":"ReSize",
     "Height":"100px",
     "width":"200px",   
     "unit":"px",
     "duration":"0.3",
     "AnimationTarget":"queryReply",
     "AnimationChildren":[]
 }"
The AnimationName is the Name of the Animation that you want run .
The AnimationChildren is supposed to be an array of child animations .
The ReSize animation cannot have Child Animations, so the array is empty.
So, once you have the JSON String, we use the "Set_<Event>" function to set the JSON property of the animation.
//Construct the JSON String
var jsonAnimationString ="{\"AnimationName\":\"ReSize\",\"Height\":\"100px\", "+
"\"Width\":\"200\",\"unit\":\"px\",\"duration\":\"0.1" +
"\",\"AnimationTarget\":\"queryReply\",\"AnimationChildren\":[]}";
//Set the JSON of the AnimationExtender to be the JSON String
behaveYourself.set_OnClick( jsonAnimationString );
//Play the Animation
onClickAnimation.play();

Complete Example :

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ways to Call Animations</title>
</head>
<body>
    <form id="frmAnimations" runat="server">

        <script language="javascript">
        
            function callStaticMethods(){
            //Play the Animation by calling its static methods
            AjaxControlToolkit.Animation.ResizeAnimation.play( $get("queryReply") , 0.2 , 45 , 200 , 100 , "px" );
            }
            
            function createInstanceAndPlay(){
            //Create an instance of the ReSize Animation
            var resizeAnimation = new AjaxControlToolkit.Animation.ResizeAnimation( $get("queryReply") , 0.2 , 45 , 200 , 100 , "px");
            //Play the Animation just created
            resizeAnimation.play(); 
            }
            
            function SetJSONStringThenPlay(){
            //Get a handle to the Animation Behavior
            var behaveYourself       = $find("animateReplyPanesBehavior");
            //Get the Animation to be played onClick of the TargetControl 
            var onClickAnimation     = behaveYourself.get_OnClickBehavior();
            //Construct the JSON String
            var jsonAnimationString ="{\"AnimationName\":\"ReSize\",\"Height\":\"100px\", "+
            "\"Width\":\"200\",\"unit\":\"px\",\"duration\":\"0.1" +
            "\",\"AnimationTarget\":\"queryReply\",\"AnimationChildren\":[]}";
            //Set the JSON of the AnimationExtender to be the JSON String
            behaveYourself.set_OnClick( jsonAnimationString );
            //Play the Animation
            onClickAnimation.play();
            }
            
        </script>

        <input type="button" value="Call Static Play Method" onclick="callStaticMethods();" />
        <input type="button" value="Create Instance And Play" onclick="createInstanceAndPlay();" />
        <input type="button" value="Set JSON String then Play" onclick="SetJSONStringThenPlay();" />
        <div runat="server" id="queryReply" style="background-color: #ffcc00; position: absolute;
            top: 100px; left: 100px; height: 300px; width: 300px">
            Click me to resize me ( Uses Markup )
        </div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <ajaxToolkit:AnimationExtender runat="server" ID="animateReplyPanes" TargetControlID="queryReply"
            BehaviorID="animateReplyPanesBehavior">
            <Animations>
                <OnClick>
                    <Resize height="100" width="200" duration ="0.2" fps="45" unit="px"></Resize>
                </OnClick>
            </Animations>
        </ajaxToolkit:AnimationExtender>
    </form>
</body>
</html>

Hope I helped someone out there looking For this information .

Well, Happy Coding !!

HowTo : Customize Rendering of AutoCompleteExtender 1

PhaniRajuYN — Mon, 09 Apr 2007 19:16:34 GMT

Registering your own handlers when Items in the SearchResults are Selected

Hi,

Quite a few people have a list of changes that they want made to the AutoCompleteExtender , and the asp.net Ajax Team is working quite dilligently to solving most of these

in the next toolkit release .

I will tackle a few of the issues for those who dont want to wait until the next toolkit release.

Registering your own handlers when Items in the SearchResults are Selected.
Specifying your own template for how the data should be displayed.

We will discusss Point #2 in My Next Blog post .

We will achieve these functionalities by modifying the source of the AjaxControlToolkit for the File "AutoCompleteBehavior.js".

1.Registering your own handlers when Items in the SearchResults are Selected.

To achieve this , we will have to add/modify certain scripts.

Lets look at the changes now .

1. Add a member to the class called "customClickHandler" , which will store the Event handler to be called when an item in the list is selected.

AjaxControlToolkit.AutoCompleteBehavior.initializeBase(this, [element]);
Blah , blah , blah , existing declarations
this._customClickHandler = null;
}

2. Provide a way for Users to specify the Eventhandler , add a function called "set_ClickCallBack".

AjaxControlToolkit.AutoCompleteBehavior.prototype = {
blah,blah, existing functions
set_ClickCallBack:function(evthandler){
    this._customClickHandler = Function.createDelegate(this, evthandler);
   }
}

3.Wherever the extender's Default onclick hanlder is called, replace with this handler.

_onListMouseDown

_onListMouseDown: function(ev) {
   if (ev.target !== this._completionListElement) {
       if( this._customClickHandler != null ){
             this._customClickHandler( ev.target );
       }
       else{
           this._setText(ev.target.firstChild.nodeValue);
           }
       }
   },

_onKeyDown

_onKeyDown: function(ev) {
        var k = ev.keyCode ? ev.keyCode : ev.rawEvent.keyCode;
        if (k === Sys.UI.Key.esc) {
            this._hideCompletionList();
            ev.preventDefault();
        }
        else if (k === Sys.UI.Key.up) {
            if (this._selectIndex > 0) {
                this._selectIndex--;
                this._highlightItem(this._completionListElement.childNodes[this._selectIndex]);
                ev.preventDefault();
            }
        }
        else if (k === Sys.UI.Key.down) {
            if (this._selectIndex < (this._completionListElement.childNodes.length - 1)) {
                this._selectIndex++;
                this._highlightItem(this._completionListElement.childNodes[this._selectIndex]);
                ev.preventDefault();
            }
        }
        else if (k === Sys.UI.Key.enter) {
            if (this._selectIndex !== -1) {
            //Call Custom Click Handler if registered
            if( this._customClickHandler == null ){
                this._setText(this._completionListElement.childNodes[this._selectIndex].firstChild.nodeValue);}
                else {
                this._customClickHandler( this._completionListElement );
                }
                
                ev.preventDefault();
            }
        }
        
        if (k !== Sys.UI.Key.tab) {
            this._timer.set_enabled(true);
        }
    },

How do you use this after modification in your applications ?

If the behaviorID of the AutoCompleteExtender is "customAutoComplete".

The Code to hookup the Custom Click handler is :

function  pageLoad(){
$find("customAutoComplete").set_ClickCallBack( customClickhandler ); 
}

customClickHandler is a javascript Function .

function customClickhandler( clickedElement ){
//Your Code here
}

Expirements with Ms AJAX 1 : Plot a Path and follow it

PhaniRajuYN — Mon, 26 Mar 2007 11:50:31 GMT

While working on some documentation and presentations for MS AJAX Animation ( wait for it , its gonna rock !! ) , I made what you see in the demo video.

Its basic premise is this :

Allow the User to plot points on a plane
Then trigger an animation that goes over all the points and stops

Why do this ?

No Perceptible use , pure fun factor .

I just though that it'd be cool to control an animation by clicking on points and asking an element to go to those points .

Well, here you have it .

Once the demo is hosted, you can see the same as an online app.

Take a look at a screenshot .

Lets see how we can achieve this ..

We need the following functionality

Allow the User to plot an arbitrary number of points on a plane
Create an animation that moves to all the points.

1.Allow the User to plot an arbitrary number of points on a plane

The "Plane" would be a DIV element on the page.

<div id="pathPallette">
</div>

The user plots a point on the plane by clicking on the plane.

We will have a global collection of points called pointsInpath which will be a javaScript array .

var pointsInPath = new Array();

We can attach an eventhandler to the Click event of the Div by using the $addHandler function of the Ms AJAX framework explained Here .

Syntax: $addHandler(element, eventName, handler);

$addHandler($get("pathPallette"),"click",markPoint);

We will now define the function "markPoint".

function markPoint(eventArg)

    var evt = window.event || eventArg;

    var xCoOrd = evt.clientX ;

    var yCoOrd = evt.clientY ;

    Addpoint( xCoOrd , yCoOrd );

    createMarker( xCoOrd - $get("pathPallette").offsetLeft , yCoOrd - $get("pathPallette").offsetTop );

MarkPoint calls 2 functions .

AddPoint , to add the point to a collection of points
Createmarker ,to mark the spot as a point on the plane which will be visited by the Animated element

AddPoint

function Addpoint( xCoOrd,yCoOrd)

    anyMorePoints= true;

    pointsInPath[index++] = "{\"X\" : \""+xCoOrd +"\",\"Y\":\""+yCoOrd +"\"}";

The AddPoint function recieves the X and Y co-ordinates of the Point in the Element's Path.

Add the Point to the existing points collection.

Createmarker

function createMarker( xCoOrd,yCoOrd )

    var newmarker = document.createElement("SPAN");

    newmarker.id = "marker"+markeridCounter;

    newmarker.className ="white";

    newmarker.innerText = markeridCounter;

    $get("pathPallette").appendChild( newmarker );

    Sys.UI.DomElement.setLocation( newmarker , xCoOrd , yCoOrd );

    markeridCounter++;

This Function creates a <SPAN> element , writes the point # in the span , and positions it in the plane.

2.Create an animation that moves to all the points

Basic algorithm for this step

Get the Point to navigate to
Set the animation to move to the next point
Play the animation until there are no more points left

The Element that will move to all the points will be another div ( "divMovable" ) with a background color assigned to it

<div id="divMovable" runat="server" style="height: 15px; width: 15px; position: absolute;
          top: 300px; left: 300px; background-color: #ffcc00;">
          &nbsp;
</div>

The Animation Markup would be to use the Move Animation to move the Element along the points.

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
            runat="server" TargetControlID="divMovable">
            <Animations>
                <OnClick>
                     <Move relative="false"  duration="0.2" fps="40"   
                        horizontalScript ="getX()" verticalScript ="getY()"
                      AnimationTarget="divMovable" />
                </OnClick>
            </Animations>
</ajaxToolkit:AnimationExtender>

The MoveAnimation would run only once and would also move to only one point , we need to keep changing the destination Points.

If you notice the horizontalScript ="getX()" verticalScript ="getY()" snippet , the "Script" attribute added to any attribute in the Animation Markup

would cause the expression to be "eval"ed at runtime allowing us to use Expressions to set properties.

So, right , the horizontal (X) co-ordinates would be retrieved from the function getX().

The Vertical (Y) co-ordinates would be retrieved from the function getY().

The next point the element should move to would be represented by "nextPoint".

The Function "setNextPoint()" would set the next point in the path.

function getX()
{
    if( nextPoint == null)
    {
        setNextPoint();
    }
    return nextPoint.X;
}

function getY()
{
    return nextPoint.Y;
}

Once we get the next point to move to , the animation should repeat with the new values for X and Y Co-Ordinates.

We do this , by hooking a handler to the Ending event of the Animation.

<script language="javascript">
       var OnClickBehavior ;
       function pageLoad()
       {
           OnClickBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
           OnClickBehavior.add_ended(continueAnimating);
           $addHandler($get("pathPallette"),"click",markPoint);
      }
  
   </script>

We can hook eventhandlers to the ending event of the Animation by using the "add_ended" method.

Here , we add the "continueAnimating" function as an eventhandler to the Animation Ending event.

Then , we call the "play" method on the animation just as it ends, to give a seamless feel to the flow as the element moves along different points.

function continueAnimating(){
     setNextPoint(); 
     if( nextPoint!= null){
        OnClickBehavior.play();
     }
}

Trigger the complete animation sequence by calling the "play" method on the OnclickBehavior

function playAnimation()
{
    ResetPoints();
    hideAllmarkers();
    setNextPoint();
    OnClickBehavior.play();  
}

There you have it , fun and a pretty neat exercise in geometry and also shows you how easy it is to do complex stuff with the MS Ajax Framework.