Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


Move to top
Tips and Tricks with ajax accordion control
Posted By Sarin on Jan 06, 2013     RSS Feeds     Latest Hinduism news
7475 Views

Introduction
Accordion is a web control with multiple collapsible panes with only one pane active at a time. Ajax accordion control uses another control called as accordianpane to display its several panes. Each accordion control has header content and display content. Accordion control keeps track of the active pane and hides this pane if any other accordianpane is made visible. Accordion control can be set to the data source. It has DataSource and DataSourceId properties which allow you to set it properties just like any standard asp.net controls.

Properties of Accordion Control
Below are some of the common properties of accordion control.
HeaderSelectedCssClass: This property let you specify the CSS class for the selected AccordionPane header. This property can be set for the whole accordion control or the individual accordionpane control.
HeaderCssClass: This property let you define the CSS class for styling the header section of all AccordionPane controls. This property also can be set for the whole accordion control or the individual accordionpane control.
ContentCssClass: This property let you specify the name of the CSS class for styling the content area of the AccordionPane controls.  
  FadeTransitions: This Boolean property will determine whether you want to show fading effect while moving from one pane to other
TransitionDuration: This property let you define the speed of transition between panes in milliseconds.
FramesPerSecond: This property is used along with the TransitionDuration property. This property allows you to specify the number of frames per second to be used during transition between AccordionPane controls.  
SelectedIndex: This property let you select the accordion pane based on its index value starting from 0. 

In my sample demo, I have four accordion panes each with small details on one of the demi-gods in Hinduism. Below is the code of accordion control along with one of the four accordion panes.
  
<ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="true" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FramesPerSecond="60" RequireOpenedPane="true" SuppressHeaderPostbacks="false" TransitionDuration="200">
            <Panes>
                <ajaxToolkit:AccordionPane ID="accVishnu" runat="server">
                    <Header>1. Vishnu</Header>
                    <Content>
                        Vishnu (Sanskrit: विष्णु) is a main Vedic God (including His different avataras<br />
                        <asp:Image ID="Image2" runat="server" ImageUrl="Vishnu.jpg" Width="200" />
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
</ajaxToolkit:Accordion>

When I run the application, my output looks like

As you see above, only one pane is visible at a time. On clicking any of the remaining panes, current pane hides and the selected pane becomes visible. For Example on clicking the third pane, my screen looks like

Open pane on mouse over
By default, pane expands on click of a mouse left button. To expand the pane on mouseover, we can use the below chunk of code
Add the JavaScript function Openpane on accordion pane mouse over
        <ajaxToolkit:AccordionPane ID="accVishnu" runat="server">
                    <Header>
                        <a href="" onmouseover="Openpane('0')">1. Vishnu</a>
                    </Header>
                    <Content>

For the first pane, parameter 0 is passed to this function. For second, parameter is 1 and so on.
JavaScript function is  
        function Openpane(paneIndex)  {
            var behavior = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
            behavior.set_SelectedIndex(paneIndex);
        }

Dynamically Adding mouse over on Accordion Pane  
If we have many accordion controls, then adding a mouse over event on every accordion control is quite cumbersome. Below JavaScript code will make our task very easy in such cases. Below JavaScript will loop through all the accordion panes to add a mouse over event to each pane. Additionally, you can write a custom logic of skipping some of the accordion panes
  
        function AddMouseOverToAccordion()  {
            var acc = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
            for (paneIdx = 0; paneIdx < acc.get_Count(); paneIdx++)  {
                $addHandler(acc.get_Pane(paneIdx).header, "mouseover", acc._headerClickHandler);
            }
        }

Expand Pane using its ID
Usually, we select the accordion pane at runtime using selected index property. But in some complex scenarios, you may be hiding some of the accordion control and hence determining the exact order of visible accordion control is quite troublesome. So, there is arising need to select the accordion pane by its id.
Below is the code which lets you select the accordion pane by its id.
  
      protected void SetPane(Accordion ac, string PaneID)
         {
            int Index = 0;
            foreach (AjaxControlToolkit.AccordionPane pane in ac.Panes)
             {
                if (pane.Visible == true)
                 {
                    if (pane.ID == PaneID)
                     {
                        ac.SelectedIndex = Index;
                        break;
                    }
                    Index++;
                }
            }
        }

Hiding accordion pane using JavaScript
You can also hide an accordion pane dynamically using JavaScript as
    function hideAccordionPane(paneno) {
            var acc = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
            acc.get_Pane(paneno).header.style.display = "none";
            acc.get_Pane(paneno).content.style.display = "none";
        }    
        function pageLoad()  {
                        hideAccordionPane(1);
        }
  
On using the above code, my second pane hides as shown in the below screenshot

  0

Programmatically expand Accordion pane
It may happen that depending upon some condition, you want to show the related accordion pane. You can achieve this functionality of dynamically selecting accordion pane at runtime using JavaScript as

       function changeSelected(idx)  {
            var acc = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
            acc.set_SelectedIndex(idx);
        }    
 Do some activity on selection of accordion pane  
It might happen that you want to record an activity of the user or you want to do some additional event on expansion of the accordion pane. You can achieve this using JavaScript as
     function pageLoad()  {
                        hideAccordionPane(1);
                       var acc = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
                        acc.add_selectedIndexChanged(onAccordionPaneChanged);
        }
       function onAccordionPaneChanged(sender, eventArgs)  {
            var selPane = sender.get_SelectedIndex() + 1;
            alert('You selected Pane ' + selPane);
        }
In the above code, I simply alerted the user about the selected pane. You can write an Ajax function to log the activity onto the database or trigger some other event.
Restrict Accordion pane from expanding
This tip is very useful if we have admin or user level restrictions. For example, there may be many panes which should be visible to only admins. You can restrict the expansions of accordion panes by other users as  
        function pageLoad()  {
            RemoveHandlerAtRuntime (1);
        }
     function RemoveHandlerAtRuntime(pane)  {
            var acc = $get("<% =Accordion1.ClientID%> ").AccordionBehavior;
            $removeHandler(acc.get_Pane(pane).header, "click", acc._headerClickHandler);
        }
  
Above code will not allow the users to select second pane from top.
I hope this article and tips were very useful to you. If you have any other tips on accordion control, then please share it here. Click on the below link to

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
create new controls in grid view at runtime
Simple Ajax client server Example
Changing Grid View header and footer at run time
Tips and tricks with Ajax Collapsible panel
Change color of grid view row or cell dynamically
Call .net service from javascript
Tips and tricks with ajax calendar
Show animation effects using ajax UpdatePanelAnimation control
Tips and Tricks with ajax accordion control
Working with Ajax collapsible panel

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