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