More in this section

Forums / Developing with Sitefinity / Accordion control ideas

Accordion control ideas

4 posts, 0 answered
  1. Denis
    Denis avatar
    105 posts
    Registered:
    27 Feb 2009
    07 Sep 2011
    Link to this post
    Hello,

    I'm wondering is there are some best practices for creation Accordion functionality (see example:http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/Accordion/Accordion.aspx).

    As far as I understand I will need:
    1) Implement custom widget based on RadPanelBar control.
    2) Define accordion content items. Each item has to have following fields: icon (optional), title, content. Content can include links and images and should be editable via RadEditor. How I can define these items? Should I reuse existing types (news?) or define custom?
    3) In the custom widget code I have to select somehow accordion content items, extract field values and initialize RadPanelBar. I guess items can be selected by type (if it is custom type for accordion items) or by tag. Please give me idea which way is better and how it can be done.

    As far as I see, this widget will not be editable. Content items will define how this control will be populated. Or it is possible to reuse content selector control to assign what items should be presented in accordion control?

    Hope I was clear enough.


    Thank you,
    Denis.
  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    08 Sep 2011
    Link to this post
    Here's what I would do...

    1) Link in KendoUI
    2) Create a custom layout control to be your "container" (By default on live it's style is hidden).  You can also just tell editors to give it a wrapper class, but I hate that idea, means they have to remember wrapper class names.
    3) Create a new Widget to plop into that...perhaps it's designer just shows Title and Content.  On render the widget dumps simple HTML UL\LI elements into the kendo preferred format.  Title being the panelbar text, content being what shows when it's expanded.
    4) On Live view (not design) you then Kendo the outer container.
    5) Do a .show() to make the "panelbar" appear (so there's no popping of elements...perhaps its so tiny you wont notice any and this is a useless step)

    **OR**
    Perhaps to be more fancy, the outer container accepts child layouts, and the immediate child layouts become the panelbar items...it'd be more tricky that way....but more flexible for content editors.

    Should be LIGHTYEARS more lightweight and cool than those horrid AjaxToolkit controls

    Cheers!
    Steve
  3. Denis
    Denis avatar
    105 posts
    Registered:
    27 Feb 2009
    12 Sep 2011
    Link to this post
    Steve,

    Thank you for ideas.

    As far as I understand, creating custom layout control will not allow to dynamically add/remove items/tabs . All tabs will be hard coded in the layout control. This is somewhat not really flexible.

    How about other approach:
    Similar how lists widget works - all content prepared as list content items, each list item defines new tab/item. On the other hand, we have custom widget that accepts selected list and renders it as accordion/tab/whatever view.
    I think this approach pretty flexible.

    Is there any way to override existing lists widget to render in different way (radpanel-based view for example)? Just wondering what is easier: created new custom widget or override existing...

    So far I implemented simple custom control that accepts list name. How I can implement lists selector functionality that lists widget has?

    Thanks!
    Denis.
  4. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    12 Sep 2011
    Link to this post
    Well no I don't think you get where I'm going...
    <root layout>
        <custom widget />
        <custom widget />
        <custom widget />
        <custom widget />
    </root layout>

    or

    <root layout>
        <childlayout>
           Whatever content widgets you want
       </childlayout>
        <childlayout>
           Whatever content widgets you want
       </childlayout>
        <childlayout>
           Whatever content widgets you want
       </childlayout>
    </rootlayout>

    So the root layout is your custom one, and all first level children under that become the panel items when the page renders (on the client).

    So the custom widget just dumps out flat simple html for your clientside panel control to consume and format...KendoUI or jQueryUI perhaps.  Whatever method you use is just an interface to dump flat html onto the page (does that make sense)?
4 posts, 0 answered