Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


Move to top
Tips and tricks with Ajax Collapsible panel
Posted By Sarin on Mar 05, 2013     RSS Feeds     Latest Hinduism news
5636 Views

In my preceding article, we saw how to use Ajax collapsible control to hide or unhide portion of your webpage asynchronously. Normally, hiding or unhiding is done based on some user activity or on the completion of some event. So, very often, the plain collapsible panel doesn’t suit your need and you look for some advanced level of functionality with Ajax collapsible panel control. In this article, we will see some of the tips and tricks with collapsible panel control that will help you in fulfilling the need of your client.
  
  1)     Expand/Collapse CollapsiblePanel from code behind
    Huh, a very simple one. But many of the newbie’s aren’t aware of this one too..This one is for them.
In your code behind, set the Collapsiblepanel collapsed property to true or false to collapse or expand the panel respectively. Alternatively, set the Collapsiblepanel ‘ClientState’ property to true or false to collapse or expand the panel respectively  

    protected  void btn_Collapse(object sender, EventArgs e)
     {
        // To collapse
        this.CollapsiblePanelExtender1.Collapsed = true;
        // or
        this.CollapsiblePanelExtender1.ClientState = "true";
        // To Expand
        this.CollapsiblePanelExtender1.Collapsed = false;
        // or
        this.CollapsiblePanelExtender1.ClientState = "false";
    }

  2)    Expand/Collapse CollapsiblePanel with JavaScript?
    Write a javascript function to search your CollapsiblePanel by Id, then use the get_Collapsed() method to get the current state of the control, then use the get_Collapsed() method to expand or collapse the panel accordingly. Call this function on a button click, hover or any other way you wanna call it. Below is the code for button click

       <asp:Button ID="btnJS" OnClientClick="ExpandCollapse()" runat="server" Text="JavaScript" />  
    function ExpandCollapse()  {
            var collPanel = $find("CollapsiblePanelExtender1");
            if (collPanel.get_Collapsed())
                collPanel.set_Collapsed(false);
            else
                collPanel.set_Collapsed(true);
        }

  3)    Toggle state of all CollapsiblePanel control
    To achieve this functionality, we first set the behavior property of all our collapsible control in a sequential order. For example, I set the behavior property of my first collapsible panel as Collapsible1, second collapsible panel as Collapsible2 and so on with the rest of the panels.
      <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" BehaviorID="Collapsible1" runat="server"></ajaxToolkit:CollapsiblePanelExtender>
                <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" BehaviorID="Collapsible2" runat="server"></ajaxToolkit:CollapsiblePanelExtender>
  
Then, using JavaScript, I loop through all the collapsible panel controls using this behavior id and depending upon the current state of the control, I expand or collapse each of these collapsible panels.
Below is the JavaScript code
        function toggleAll()  {
            var i = 0;
            while (true)  {
                i++;
                var name = 'Collapsible' + i;
                var theBehavior = $find(name);
                if (theBehavior)  {
                    var isCollapsed = theBehavior.get_Collapsed();
                    if (isCollapsed)  {
                        theBehavior.expandPanel();
                    }
                    else
                        theBehavior.collapsePanel();
                }
                else  {
                    break;
                }
            }
        }
Alternatively, you can also use the togglePanel function to toggle the current state of the collapsible panel
  
            if (theBehavior)  {
                    var isCollapsed = theBehavior.get_Collapsed();
                    theBehavior.togglePanel();
                }
                else  {
                    break;
                }

Below is the output of this trick

  
  4)    Animate Expanding/Collapsing collapsible panel  
    Perhaps you may not know this but you can control the speed (fast or slow) of your collapsible panel. Using the fps and duration property, you can set the duration and frame rate at which the panel will expand or collapse.
    Below is the JavaScript code for expanding or collapsing first collapsible panel.
     
       function smoothAnimation()
   
            var collPanel = $find("CollapsiblePanelExtender1");
            collPanel._animation._fps = 45;
            collPanel._animation._duration = 0.90;
   

    5)    Prevent flickering of Collapsible Panel first
        To avoid flickering of collapsible panel, set AutoCollapse and AutoExpand property to false either in code behind or in aspx page.
       this.CollapsiblePanelExtender1.AutoCollapse = false;
       this.CollapsiblePanelExtender1.AutoExpand= false;
    
Alternatively, below is the trick sent to me for my friend. Setting the height of panel to zero and overflow to hidden fix the flickering issue

        .cpContent
        {
            height:0px;
            padding: 4px;
          overflow: hidden;
        }
  6)    Turn CollapsiblePanel into an accordion
    Accordion control is similar to CollapsiblePanel except the fact that only one panel can be expanded at a time whereas in collapsible panel, you can expand multiple panel at a time.
  
          function pageLoad(sender, args)  {
            for (num = 1; num < 3; num++)  {
               $find("CollapsiblePanelExtender" + num).add_expandComplete(coll_ExpandedComplete);
                    }
                }
                function coll_ExpandedComplete(sender, arg)  {
                    for (num = 1; num < 3; num++)  {
                        var CollapsiblePanel = $find("CollapsiblePanelExtender" + num);
                        if (sender._expandControlID != CollapsiblePanel._expandControlID)                                       CollapsiblePanel.collapsePanel(CollapsiblePanel._expandControlID);
                    }
                }

To turn collapsible control into an accordion, add the following code in you page load event. In this chunk of code, we loop through the entire collapsible panel and assign the delegate coll_ExpandedComplete to each expand event of your collapsible panel. In this example, I have coded for only two collapsible panel named CollapsiblePanelExtender1 and CollapsiblePanelExtender2
  
        function pageLoad(sender, args)  {          
            for (num = 1; num < 3; num++)
 $find("CollapsiblePanelExtender" +num).add_expandComplete(coll_ExpandedComplete);              
           
        }
  
Code for coll_ExpandedComplete delegate function is given below. In this piece of code, I collapse all other collapsible control except the one which triggered the event.

        function coll_ExpandedComplete(sender, arg)  {          
            for (num = 1; num < 3; num++) {
var CollapsiblePanel = $find("CollapsiblePanelExtender" + num);
    if (sender._expandControlID != CollapsiblePanel._expandControlID)
                    CollapsiblePanel.collapsePanel(CollapsiblePanel._expandControlID);
            }          
        }              
       

Conclusion:
That was some of the tips and tricks with CollapsiblePanelExtender. You might be having some other tips which might not be covered in this article. Please feel free to share it with us..Happy coding.

Note: Images used on this website are either a production of Bhaktivedanta Book Trust(http://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.

Related Articles
Advanced JQuery Fading Effects
Jquery features, Advantages and disadvantages
Tips and tricks with Ajax Collapsible panel
Uploading multiple files with drag and drop feature
Tips and Tricks with ajax accordion control
Working with Ajax collapsible panel
Tips and tricks with ajax calendar
Working with forms-Jquery form selector
Show Update Progress Animation-Ajax

Post Comment




Software developer by profession,
Poet by hobby,
Blogger by Passion
Birth Place: Munger, Bihar
Residence: Mumbai, Maharashtra
Prof exp: 8 years

Read More about me

Read my daily what'sapp quotes
Most Viewed Articles

Latest Spiritual Videos


Latest Funny Videos

Latest News

Latest Social Post
Latest WhatsApp Quotes