This is a migrated thread and some comments may be shown as answers.

What control can be used like an accordian menu

4 Answers 24 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 20 Aug 2014, 03:56 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Oscar Emiliano
Top achievements
Rank 1
answered on 20 Aug 2014, 06:24 PM
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

0
Jerry
Top achievements
Rank 1
answered on 21 Aug 2014, 04:35 PM
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
0
Oscar Emiliano
Top achievements
Rank 1
answered on 22 Aug 2014, 01:33 PM
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
0
Jerry
Top achievements
Rank 1
answered on 28 Aug 2014, 05:41 PM
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.
Tags
General Discussions
Asked by
Jerry
Top achievements
Rank 1
Answers by
Oscar Emiliano
Top achievements
Rank 1
Jerry
Top achievements
Rank 1
Share this question
or