Ajax preview 2 : Declarative Instantiation of AjaxControlToolkit Controls

PhaniRajuYN — Fri, 12 Sep 2008 09:56:29 GMT

Today ,we will talk about using the Declarative Syntax to instantiate certain AjaxControlToolkit Behaviors .

Step 0: Figure out which are the script files needed for the Behavior to work and include the appropriate Script references in your page .
For the PopupControlBehavior , the script files would be :

AjaxControlToolkit.ExtenderBase.BaseScripts.js
AjaxControlToolkit.Common.Common.js
AjaxControlToolkit.Compat.Timer.Timer.js
AjaxControlToolkit.Animation.Animations.js
AjaxControlToolkit.Animation.AnimationBehavior.js
AjaxControlToolkit.PopupExtender.PopupBehavior.js
AjaxControlToolkit.PopupControl.PopupControlBehavior.js

Step 1: Declare the behaviors you wish to attach to the templated elements.

<body xmlns:sys="javascript:Sys" xmlns:popup="javascript:AjaxControlToolkit.PopupControlBehavior">

Step 2 : In the template , attach this behavior to the target element using the sys:attach syntax.

<a href="#" sys:attach="popup" .....>Some Text Here</a>

Step 3 : Depending on the behavior you are using , set the appropriate properties .
Since I am using the PopupControlBehavior , we will need to set the PopupControlID and the Position properties of the behavior.

<a popup:popupcontrolid=""  popup:position="4" >...</a>

Declarative template for Master-Details view with popupbehavior :

<div id="listTemplate" style="width: 150px" class="yellow">
  <ul sys:attach="dataview" class="sys-template" dataview:data="{{ localData }}">
     <li>
           <span sys:attach="popup" popup:popupcontrolid="{{'subDiv'+ListID}}" popup:position="4"
      sys:id="{{'master'+ ListID}}">{{ ListTitle }}</span>

       <div id="{{ 'subDiv' + ListID}}" class="grey" style="display: none; width: 300px">

           <ul class="sys-template" sys:attach="dataview" dataview:data="{{ ListElements }}">
                            <li>{{ListElementText}} </li>

           </ul>

          </div>
            </li>
      </ul>
</div>

Complete Sample Code : Click Me

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

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

Ajax preview 2 : Declarative Instantiation of AjaxControlToolkit Controls

Documentation for the AjaxControlToolkit

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

Step 2 : Use SandCastle to produce the CHM File