Accordion control ideas

Posted by Community Admin on 04-Aug-2018 22:03

Accordion control ideas

All Replies

Posted by Community Admin on 07-Sep-2011 00:00

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.

Posted by Community Admin on 08-Sep-2011 00:00

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

Posted by Community Admin on 12-Sep-2011 00:00

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.

Posted by Community Admin on 12-Sep-2011 00:00

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)?

This thread is closed