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

  • Article

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:

  1.  Find all instances of the CollapsiblePanel Behavior on the page.
  2.  On each of them ,
  3.  Check if the Panel is Collapsed by calling the get_Collapsed() function.
  4.  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.