What control can be used like an accordian menu

5 posts, 1 answers
  1. Jerry
    Jerry avatar
    41 posts
    Member since:
    Mar 2012

    Posted 20 Aug 2014 Link to this post

    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
  2. Answer
    Oscar
    Oscar avatar
    16 posts
    Member since:
    Sep 2013

    Posted 20 Aug 2014 in reply to Jerry Link to this post

    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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jerry
    Jerry avatar
    41 posts
    Member since:
    Mar 2012

    Posted 21 Aug 2014 Link to this post

    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
  5. Oscar
    Oscar avatar
    16 posts
    Member since:
    Sep 2013

    Posted 22 Aug 2014 in reply to Jerry Link to this post

    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
  6. Jerry
    Jerry avatar
    41 posts
    Member since:
    Mar 2012

    Posted 28 Aug 2014 in reply to Oscar Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017