Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Working with Ajax collapsible panel
Posted By Sarin on Feb 27, 2013     RSS Feeds     Latest Hinduism news
5928 Views

Introduction
ASP.NET AJAX Toolkit gives developer some powerful controls for developing complex business requirements faster, better and with efficient network usage (asynchronous).
In this article we will see the collapsible panel of Ajax toolkit which solves the most common feature of any business web application. Collapsible panel give user the flexibility to hide or unhide some or full portion (details) of your webpage. This functionality is usually used in FAQ (Frequently asked questions) page where you list out all your questions on a webpage. User can then click on the appropriate question to view the answer related to that question
Normally an arrow panel is added in front of the question to let the user know that this question should be expanded or collapsed to unhide or hide the related answer. Advantage of this control is that it does not trigger the post back onto the server nor does it refresh any portion of your webpage. Achieving this functionality with plain JavaScript or dot net would become hectic and time consuming. Moreover, you custom coding will not give you many other features which this Ajax control offers.

Properties of Ajax collapsible panel
  TargetControlID - ID of the panel to be shown when the control is expanded.
    
  • ExpandControlID/CollapseControlID - ID of the control which should be clicked to expand or collapse the related content. Usually, both these properties are set to the same control id which means the same control should be clicked to toggle the state of the target control.
    • AutoCollapse/AutoExpand - Setting these properties will allow the user to hide or unhide the content on mouse hover over the target control instead of clicking it.
    • TextLabelID - ID of the control which will be used to show the status message to the user.
    • CollapsedText/ExpandedText - Set the status message for the control specified in TextLabelID  on collapse and expand
    • ScrollContents - Set it to true if the content is large and the space where you are using this control is less so that the scroll bar is shown to scroll through the contents.
    • ImageControlID -ID of Image control which you shall use to depict the expanded or collapsed status to the user. Usually, this property is used along with CollapsedImage and ExpandedImage properties where you set the image path for collapsed and expanded situation. ExpandedText or CollapsedText, if set, becomes the alternate text of this image.
    • CollapsedImage/ ExpandedImage - Image url  for the collapsed and expanded image
    • ExpandDirection - Set it to “Vertical” or “Horizontal” to decide how you wanna expand your panel (top-to-bottom or left-to-right).
    • TargetHeight/ TargetWidth - Get or set the height of he panel in pixels.
    • CollapsedSize / ExpandedSize -Get or set the size of target control in colpased or expanded condition
    • SuppressPostBack - specify whether you want to suppress postbacks in case the controls assigned in CollapseControlID or ExpandControlID are clicked.
      
    Demo of Ajax collapsible panel
    For this demo, I have declared four panels to be used with two Collapsible Panel extender control. Four panel forms two pairs of question and answer.

      <asp:Panel ID="PnlTitle" runat="server">
                        <asp:Image ID="Image1" runat="server" ImageUrl="images/expand_blue.jpg"></asp:Image>
                        <span style="background-color: Gray; width: 300px">Who am I?
                            <asp:Label ID="Label1" runat="server" Text="Show Details(...)"></asp:Label></span>
                    </asp:Panel>
                    <asp:Panel ID="PnlContent" runat="server">
                        <b>I am sarin</b><br />
                        I live in Mumbai, India<br />
                        You can Contact me at <a href="https://mallstuffs.com">https://mallstuffs.com</a>
                    </asp:Panel>
                    <asp:Panel ID="pnlWork" runat="server">
                        <asp:Image ID="Image2" runat="server" ImageUrl="images/expand_blue.jpg"></asp:Image>
                        <span style="background-color: Gray; width: 300px">what I do?
                            <asp:Label ID="Label2" runat="server" Text="Show Details(...)"></asp:Label></span>
                    </asp:Panel>
                    <asp:Panel ID="pnlWorkDetails" runat="server">
                        <b>I have been developing application in microsoft .Net Technology for the last 5 years.</b><br />
                        I like to write on mythical and spiritual stuffs.
                    </asp:Panel>
      
    Code for two collapsible panel which uses above four panels is shown below. As you see below, I have assigned first two panels as header and body of first Collapsible Panel and next two panels as header and body of second Collapsible Panel. I have set the URL path of ExpandedImage and CollapsedImage properties. Additionally, CollapsedText and ExpandedText properties are also set to display the alternate text tote user on image hover.
          <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1"  
                        runat="server" TargetControlID="PnlContent" ExpandControlID="PnlTitle" CollapseControlID="PnlTitle"
                        TextLabelID="Label1" CollapsedText="Show Details (...)" ExpandedText="Hide Details (...)"
                        ImageControlID="Image1" ExpandedImage="images/collapse_blue.jpg" CollapsedImage="images/expand_blue.jpg"
                        Collapsed="True" SuppressPostBack="true">
                    </ajaxToolkit:CollapsiblePanelExtender>
                    <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"
                        TargetControlID="pnlWorkDetails" ExpandControlID="pnlWork" CollapseControlID="pnlWork"
                        TextLabelID="Label1" CollapsedText="Show Details (...)" ExpandedText="Hide Details (...)"
                        ImageControlID="Image1" ExpandedImage="images/collapse_blue.jpg" CollapsedImage="images/expand_blue.jpg"
                        Collapsed="True" SuppressPostBack="true">
                    </ajaxToolkit:CollapsiblePanelExtender>

    Output
    Now on running the project, my screen looks like

      
    As you see above, two collapsible panels are shown with an arrowdown image which will be replaced by arrowup image if expanded. View the below image for collapsible panel in action
      

    Conclusion
    In this article, we saw how to use Ajax collapsible panel in an asp.net project. I recommend my visitors to use Asp.net Ajax toolkit controls to boost up their productivity and efficiency.
    In next article, we will see the various tips and tricks with AJAX collapsible panel control.


  • Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://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
    Manipulating Elements and Animations Using Jquery
    Tips and tricks with Ajax Collapsible panel
    Uploading file asynchronously using Ajax AsyncFileUpload control
    Tips and Tricks with ajax accordion control
    Working with Ajax collapsible panel
    Show Update Progress Animation-Ajax

    Post Comment