Jaa

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

  • Artikkeli

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.

  

Comments

  • Anonymous
    November 21, 2007
    Hey I use this code alot and it works just fine. Until I tried the following ....... When I page in a gridview, the panels need to collapse. There was no real clientside event for this on the gridview so I use the PageIndexChanged event. In this event I do a scriptManager.RegisterStartupScript of the script above. The PROBLEM is: allBehavior.length is always 0 :s What is the cause of this? When I debug the javascript I see that not the whole page is rendered yet .... is their anyway to overcome this behavior? Kind regards, Wim

  • Anonymous
    December 30, 2007
    Exactly what I was looking for. Everyone else was telling it to open or close. Now I can toggle my panel.

  • Anonymous
    August 18, 2009
    Thank you, your information was quite useful, thanks to you now I can refer to the status of my panel and act consequently. To Wim De Blende:  In my own experience, I had that kind of problems before when working with GridViews.  The way I solve this is basically a non-orthodox method of adding an empty label and then writing the script code inside the Text property of the label, when you use RegisterStartupScript, it will load before the page Loads, but if you use the label, it will render in the Load method, or you can even invoke it in the OnPreRender method, forcing the script to be inserted right after the page ends loading and before it renders into the browser. I hope this work for you.