What control can be used like an accordian menu

[Jerry]

Hello,

I'm redesigning a page that has about 30 links that link to other places on the page and shows text about the link selected and files that can be downloaded.  I wanted to change it up and make it look better and not have the user going up and down the page.  I was thinking of something like the accordian control where I would put the text from the link as the parent and when selected all the menus will shift down and the text will display.  What is the best way to do this with telerik controls.  I'm using 2013 Q1 NET 45.   Any suggestions to a better approach to this situation?

Thank you

[Oscar Emiliano]

Hi Jerry,

I'm just another user, so please feel free to wait for a reply from an Admin from Telerik if my answer is not as good as you expect, but I just wanted to try to help.

For the behavior of a accordion what I use is the RadPanelBar Control. Inside of it you will be able to add the tag <Items> and create your accordion elements as RadPanelItems. For each of those RadPanelItems you can set their initial state, if they are going to be Expanded and/or Selected. 

For adding content to RadPanelItems just add inside them the <ContentTemplate> tag. Inside this new tag you can start adding the controls and elements you need as in regular basis.

In case you need customize the header, a <HeaderTemplate> can be also added to RadPanelItem, but for normal scenarios that is not necessary. Here is the simplest example I can think of:

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" ExpandMode="SingleExpandedItem">
  <Items>
    <telerik:RadPanelItem Text="Item 1" Expanded="true" ImageUrl="../Images/img1.png" Selected="true">
       <ContentTemplate>
           [ your controls here.....]
       </ContentTemplate>
    </telerik:RadPanelItem>
    <telerik:RadPanelItem Text="Item 2" Expanded="false" ImageUrl="../Images/img2.png" Selected="false">
       <ContentTemplate>
           [ your controls here.....]
       </ContentTemplate>
    </telerik:RadPanelItem>
    ...
    ...
    ...
  </Items>
</telerik:RadPanelBar>

PS. Images on RadPanelItem are not mandatory, but if you use, I will suggest 16x16 images as they fit on any Telerik Skin that you could be using.

Take a deeper look into the RadPanelBar and RadPanelItem attributes so you can be aware of all the possibilities and customization you can take advantage of. 

Hope that this could be of some help. Wanted to help cause replies from Telerik team come always at night here in America.

Regards!
Oscar Ramirez

[Jerry]

Thank you so much Oscar for your suggestion.  I will look into that control and see if I can achieve what I need.

Thank you

[Oscar Emiliano]

It is nothing Jerry, hope that it was of some help. 

This is odd, Telerik Team is not replying...I created another post with a question and no answers yet...are they on vacation?

Well, if you find a solution Jerry please share, cause the topic is your scenario is kind of interesting to me

Regards

Oscar Rmz

[Jerry]

Hi Oscar,

I was able to get it to work using the RadPanelBar.  Below is some of my test code.

<telerik:RadPanelBar ID="RadPanelBar2" runat="server" Width="100%" ExpandMode="SingleExpandedItem">
  <Items>
    <telerik:RadPanelItem Text="Test 1" Expanded="false" Selected="false">
      <ContentTemplate>
      TEST 1
      </ContentTemplate>
    </telerik:RadPanelItem>
    <telerik:RadPanelItem Text="Test 2" Expanded="false" Selected="false">
      <ContentTemplate>
      TEST 2
      </ContentTemplate>
    </telerik:RadPanelItem>
  </Items>
</telerik:RadPanelBar>

Thanks again for your help.