Jaa

Ajax preview 2 : Declarative Instantiation of AjaxControlToolkit Controls

  • Artikkeli

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