Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Panelbar > How to get default functionality in ItemTemplate?

• Steve

  Posted on Nov 5, 2010 (permalink)

  I'm looking for example code of how to have the expand/collapse, styling, hovering, etc functionality that is included out of the box while using the ItemTemplate.  The PanelBar loses all its functionality (expand/collapse, skins, css, etc) as soon as you declare an ItemTemplate section.  I would like to restore that same functionality inside the ItemTemplate but need to find out where I can get it.
  
  I cannot use the default html that the PanelBar renders for items because the entire row is a single anchor tag and I need various anchor tags on my row, and they obviously cannot be nested.  So what I would like to do is start with the default functionality coded into the ItemTemplate, and then edit the html to suit our needs.  
  
  Can some one point me to a tutorial/example code on how to restore the default behavior WHILE using an ItemTemplate.  
  
  Thanks,
  Steve
  

• Steve

  Posted on Nov 10, 2010 (permalink)

  I've been able to style the contents of the items in my ItemTemplate by copying the /Skins/Default/PanelBar.Default.css (and images) to my project and slightly altered some CSS for my markup.  But I have not had any luck figuring out how to get the javascript to apply to my markup to enable the expand/collapse behavior.  I've copied the /Scripts/PanelBar/RadPanelBarScripts.js to my project but haven't seen how to adapt it to my markup.  In initialization the client side javascript must be attaching events to the A.rpExpandable instead of just a *.rpExpandable somewhere but I don't see it..  Any help is appreciated. 
  
  Here is the ItemTemplate I am using for reference.
  

  <telerik:RadPanelBar ID="RadPanelBarCourses" Height="450px" Width="100%" Skin="Default" CssClass="PanelBar" EnableEmbeddedSkins="false" EnableEmbeddedScripts="false" OnItemDataBound="RadPanelBarCourses_ItemDataBound" DataFieldID="id" DataFieldParentID="ParentId" runat="server" >
<ItemTemplate>

      <div class="rpLink rpExpandable">

          <span class="rpExpandHandle"></span>

          <asp:Label ID="Label1" CssClass="rpText" runat="server"/>

      </div>

  </ItemTemplate>
</telerik:RadPanelBar>


• Yana Yana

  Posted on Nov 11, 2010 (permalink)

  Hi Steve,
  
  You can also use the available since Q2 2010 ( 2010.2.713 ) ContentTemplate - it's demonstrated here.
  
  Greetings,
  Yana
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• Steve

  Posted on Nov 11, 2010 (permalink)

  Thank you for your kind response.  The use of the ContentTemplate is limited to RadPanelItems which do not have children.  Our need requires a hierarchy of items so it precludes the use of that.  
  
  However, I did see in that example the use of the HeaderTemplate which looks exactly like what I want.  However when I attempt to use HeaderTemplate I get a compiler error saying its not a valid property.  I'm using version 2010.2.929.40, I will download the latest a try again.
  
  If that doesn't work then I have an idea with client side onclick functions using the e.stopPropigation() code and use spans and CSS to emulate anchor tags.
  
  Thanks,
  Steve
  
  

• Yana Yana

  Posted on Nov 17, 2010 (permalink)

  Hello Steve,
  
  HeaderTemplate is available since Q3 2010 ( 2010.3.1109), is it possible for you to upgrade?
  
  All the best,
  Yana
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Panelbar > How to get default functionality in ItemTemplate?