Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Panelbar > PanelBar with dynamic HeaderTemplate and expand and collapse images...

• Karl Intermediate

  Posted on Dec 17, 2010 (permalink)

  I'm trying to add a number of RadPanelItems to a RadPanelBar at runtime, and will be using a custom HeaderTemplate so I can have the visible item label, a hidden value field and a quantity textbox control all wrapped up in the RadPanelItem's header.
  
  The idea being I can list a number of product packages in the panel items, and have these expandable so a user can see the items that make up a product package in a grid in the ContentTemplate for the RadPanelItem (I've already got this bit working).
  
  I've followed the examples online and played around with templates here so I'm quite confortable with the concept, but I have no idea how I would add an image to my template that changes depending on if the panel is expanded or collapsed. Can anyone help explain to me how I would add the image to the HeaderTemplate so it changes depending on the panels state (expanded or collapsed) without having to postback?
  
  Thanks,
  Karl

• Karl Intermediate

  Posted on Feb 1, 2011 (permalink)

  Bump...
  
  Does anyone have any suggestions about this?
  

• Karl Intermediate

  Posted on Feb 1, 2011 (permalink)

  OnClientItemExpand and onClientItemCollapse events on the RadPanelBar.
  
  

  function ChangeIconToExpand(sender, eventArgs)

  {

      var panel = eventArgs.get_item();

      var header = panel.get_headerElement();

      var image = document.getElementById(header.children[0].cells[0].children[0].id);

      if (panel._expanded)

      {

          image.src = "../App_Themes/MyTheme/Images/SmallButtons/btn_Expand.png";

      }

  }

  
  
  This is what I've got this so far (which works) but I want to know if there's a better way of finding my control other than the following...
  
  header.children[0].cells[0].children[0]
  
  

• Simon Simon

  Posted on Feb 2, 2011 (permalink)

  Hello Karl,
  
  You can use jQuery to find the image element easier:
  

  var $img = $telerik.$("img", header);

  if (panel._expanded)

      $img.attr("src", "../../");

  
  I hope this helps.
  
  Best wishes,
  Simon
  the Telerik team

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

• Karl Intermediate

  Posted on Feb 2, 2011 (permalink)

  Thanks Simon,
  
  This works perfectly, though I do have one more question, just for completeness.
  
  Supposing I have more than one image in the header, is there a way to find the specific image I'm after if I only know the id and not the ClientId?
  
  My RadPanelBars are part of a RadGrid ItemTemplate in a GridTemplateColumn and each RadPanelBar's RadPanelItem HeaderTemplates are added dynamically. If I try to use <%= ExpandImage.ClientId %> in my javascript, I get told the control doesnt exist.
  
  

• Answer Simon Simon

  Posted on Feb 2, 2011 (permalink)

  Hello Karl,
  
  Yes, you can modify the query in this way:
  

  $telerik.$("img[id*='" + id  + "']", header);

  
  I hope this helps.
  
  Best wishes,
  Simon
  the Telerik team

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

• Karl Intermediate

  Posted on Feb 2, 2011 (permalink)

  Perfect!
  
  Thanks again Simon.

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Panelbar > PanelBar with dynamic HeaderTemplate and expand and collapse images...