Accordion control ideas
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.
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
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.
Well no I don't think you get where I'm going...
<
root
layout>
<
custom
widget />
<
custom
widget />
<
custom
widget />
<
custom
widget />
</
root
layout>
<
root
layout>
<
childlayout
>
Whatever content widgets you want
</
childlayout
>
<
childlayout
>
Whatever content widgets you want
</
childlayout
>
<
childlayout
>
Whatever content widgets you want
</
childlayout
>
</
rootlayout
>