Ajax preview 2 : Declarative Instantiation of AjaxControlToolkit Controls

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 :


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 }}">
           <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>



Complete Sample Code : Click Me