1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / How to create an accordion control in sitefinity

How to create an accordion control in sitefinity

8 posts, 0 answered
  1. Sharad Sinha
    Sharad Sinha avatar
    9 posts
    Registered:
    29 Jul 2009
    15 Sep 2009
    Link to this post
    Hi,

    I have a requirement to make an accordion control. The administrator can decide how many sections we can have in the accordion. (The ajax toolkit doesn't exactly fit over here due to search engine optimization reasons)

    I am trying to make the accordion control using the following approach

    > There would be 2 user controls. One for the accordion control with a property AccordionItemCount and the second control representing individual AccordionItems
    > Based on the AccordionItemCount, AccordionItems will be added dynamically at runtime.


    Issue is that we need to build a custom control designer for the admin to add accordion items at runtime for the admin to edit based on the value entered for AccordionItemCount. The AccordionItems have their own custom designer.

    I have been following multiple links where building a custom control designer has been explained but none of them provides a way through which we have a situation similar to the one where we can add the AccordionItems at runtime by setting of a value and edit the dynamically generated AccordionItems themselves with their custom designers.

    Please suggest. I have already gone through the following links and developed the required code using the guidelines in these links:
    http://www.sitefinitywatch.com/blog.aspx?BlogTagID=f8cf025d-4f06-409b-a8e3-21802290f264
    http://www.sitefinitywatch.com/blog/09-02-14/Introduction_to_Sitefinity_Control_Designers.aspx
    http://www.sitefinitywatch.com/blog/09-02-17/Accessing_Underlying_Properties_with_Control_Designers.aspx
    http://www.sitefinitywatch.com/blog/09-02-20/Making_Control_Editing_User-Friendly_with_Sitefinity_Control_Designers.aspx

    I can attach my code also if required.

    Regards
    Sharad
  2. Sharad Sinha
    Sharad Sinha avatar
    9 posts
    Registered:
    29 Jul 2009
    15 Sep 2009
    Link to this post
    Just a stroke of lightning ... I forgot to ask initially which should have been the first thing to ask...

    "Does Sitefinity support a built-in Accordion control?"
    Or
    "Is there already a Sample Accordion Control available for sitefinity?"

    If not I would really suggest if it can be provided with the Sitefinity installation itself. I would be happy to contribute anyhow if required.

    Thanks,
    Sharad
  3. Sharad Sinha
    Sharad Sinha avatar
    9 posts
    Registered:
    29 Jul 2009
    16 Sep 2009
    Link to this post
    Any updates ???

    Would be really grateful if anybody can please provide a direction for me to continue, while you people are also looking into it.

    Thanks
    Sharad

  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Sep 2009
    Link to this post
    Hello Sharad Sinha,

    Thank you for using our services.

    We do have a control that can be easily set to behave as an accordion navigation control. I would suggest that you try to modify it slightly by exposing a property in its designer to set number of items to be bound to. This control is by default dynamically bound to the site map and is populated at run time (as well as all other Navigation controls in Sitefinity's toolbox).

    You should take a look at the Site Panel Bar control. The control's source is located at ~/Sitefinity/UserControls/Navigation35/SitePanelBar.ascx and its code behind file, so you can modify it as you wish. This control is actually using RadPanelBar which is populated with items at run time with your pages in the site map. To modify the the Site Panel Bar control go to the ~/Sitefinity/UserControls/Navigation35/SitePanelBar.ascx there you will subscribe to the on mouse over event and add a client side function to expand items. Consider the following sample markup and script:
    <telerik:RadPanelBar ID="RadPanelbar1" runat="server" AllowCollapseAllItems="true" ExpandMode="SingleExpandedItem" 
    DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound" EnableViewState="false" 
    OnClientMouseOver="ExpandItem" > 
    </telerik:RadPanelBar> 
     
    <script type="text/javascript"
    function ExpandItem(panelbar, args) 
    if(args.get_item().get_items.Count != 0 && args.get_item().get_expanded() == false) 
    args.get_item().set_expanded(true); 
    else 
    args.get_item().set_expanded(false); 
    </script>  

    Now all you have to do is to define the look and feel of your panel bar - skin, style, expand animation and duration. For these purposes, please take a look at the following KB article: Controlling appearance of RadControls for ASP.NET AJAX in Sitefinity.


    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Sharad Sinha
    Sharad Sinha avatar
    9 posts
    Registered:
    29 Jul 2009
    16 Sep 2009
    Link to this post

    Hi Radoslav,

    Thanks for the response.

    Can you tell if the sitepanel can be customised to the extent so that the Accordian heading (when it is selected/ unselected) is fully editable and can contain text, links, jpegs or media support look and feel. As compared to just being able to apply the skin, stylesheet etc and binding to sitemap.  Likewise, content block withing accordion is fully editable and can contain text, links, jpegs or media support look and feel.

    eg.Can it be customized so that it looks similar to the accordion in the following link
    http://glaic.org.uk/Pages/index.aspx

    where contents like  "Travel Calender", "Intake", "Apply now",  the images used, the brief description below, the inner conten etc are fully editable?

    Regards,
    Sharad

  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Sep 2009
    Link to this post
    Hello Sharad Sinha,

    Thank you for getting back to me.

    In the case as the one bellow you will have to create a user control (.ascx) and in it to declare the RadPanelBar control. As I stated in my first post the Site Panel Bar control is used for navigation purposes, and is a Panel Bar customized to use the site map. For your requirements you should use the RadPanelBar. To add it to your user control just use:
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
    <telerik:RadPanelBar ID="RadPanelbar1" runat="server"
    </telerik:RadPanelBar> 

    Then in your case instead of binding the panel bar to a particular data source you can do create a wizard in the control designer, where this wizard will have as many steps as the number of items you specify. On each step you will get a set of properties (text, images, etc.) and programmatically ad a panel item with the selected web controls. You can take a look at Outlook application scenario, and other application screnarios to see how to add different objects as children items of each panel item.

    Another approach, which I think would be more elegant would be to bind the Panel Bar to a given XML data source. Then at run time the  administrator will just point the xml data source to a xml file that will contain each panel item and its children objects and properties. See Declarative Datasources for more information on how to bind to XML data source.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Sharad Sinha
    Sharad Sinha avatar
    9 posts
    Registered:
    29 Jul 2009
    16 Sep 2009
    Link to this post
    Hi Radoslav ,

    Thanks for sticking with me on this...

    I believe (and I might be mistaken on this, so correct me if I am wrong) that we are a bit digressing from the problem.
    I am not sure if I was able to explain the requirement completely. Let me explain in a bit more detailed way and you can direct if we are on the right track: Please bear with me if this seems a bit long ... just want to give the complete picture.

    <!--
    First a brief up on terminology I am using for explaining the problem.
    Accordion Item: Individual sections that can be selected to expand / or compressed when unselected
    Accordion Item Title: The area displayed when the accordion item is compressed
    Accordion Description: The area displayed when the accordion item is expanded
    -->

    Requirement:
    1. We need an accordion that fetches its contents (both for title and description) from the CMS. This content can be different on different pages. (obviously, you might say :-)  ... thats the reason we are making it a user control and not a module, but just wanted to be specific). Point here is that content for each section of accordion on every page is coming from CMS.

    2. Admin can add accordion control to the pages and edit the same. The accordion should be fully editable and can contain anything at all possible in html in the .

    3. An admin interface for a non technical business user (thats where I am trying to use the custom control designer) to do the following actions in this order:
    a) Provide the accordion items COUNT required in that particular accordion that the should be displayed.
    b) Based on the COUNT provided, we should DYNAMICALLY provide the provision to add details for each accordion title and description. These details should be stored in the CMS from where (a) the accordion will be populated at the time of rendering the page; and (b) the accordion can be repopulated at the time of edit, with the previous values if the admin wishes to change details at a later point in time
    [
    This is just my thinking. Please suggest your approach.
    If we can render an accordiom item user control (mentioned in the first post) in an editable mode for each accordion item added based on the count, and then when we click on edit, we can provide the details in its own custom control designer and save each accordion item one by one; and then finally save the accordion.
    ]



    I am in process of making a sample based on the approach suggested. Will be sharing the same soon. I hope a zip file can be uploaded here.

    Please suggest if this is feasible or I am on the wrong track.


    Thanks in advance for sticking with me
    Sharad

  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    17 Sep 2009
    Link to this post
    Hi Sharad Sinha,

    Thank you for getting back to me with the detailed information.

    I have been thinking about your requirement. And could come up with several suggestions. You could still use the RadPanelBar control for those purposes. By following this demo you can see how to add items dynamically to the panel bar. You can make the panel bar to add items that are contained in an IList for example (using a foreach loop).

    The IList will then be populated through the control designer. For example you could use Content Selector, and create a wizard as suggested before to select content on each step. The content selector can allow you to select content from generic content based modules such as (Generic Content, News, Events, Blogs, Images & Documents). When you bind the panel bar to the IList for each when it is added to the panel bar you will check its ProviderName, and based on that will add different filed from item's meta data to the panel's content. You can check the on-line documentation pages for the RadPanelBar to gain more insight on its server and client-side API.

    As for editing item's content in the control designer I would have to think a little bit more for an approach. As you can guess this is a rather unique requirement that we have not encountered before, and need to give it some thought.

    I hope that this answers your question. If you have more questions, please feel free to contact us.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
8 posts, 0 answered