Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > How to Add a hyperlink in the PanelBar header

• Narayanarao

  Posted on Dec 15, 2011 (permalink)

  Hi Telerik team,
  
  Please let us know a way to add hyperlink OR a button into the panel bar Header to the right corner.
  
  * PFA screenshot for more clarity on the requirement.
  
  

  Html.Telerik().PanelBar()

          .Name("PanelBar")       

           

          .Items(parent =>

          {

              parent.Add()

                  .Text(PartnerProfileResources.KeyAccountInformation)

                  .Content(@<text>

                      <table width="100%" border="0" cellpadding="8" cellspacing="0">

                          <tr>

                              <td class="table_label_cell">

                                  @PartnerProfileResources.PartnerName :

                              </td>

                 

                          </tr>

                          

                 

            

                      </table>

      </text>).Expanded(true);

          }

  )

   

          .Render();

  Attached files

  • TelerikPanel.jpg

• Dimo Dimo

  Posted on Dec 15, 2011 (permalink)

  Hi Narayanarao,
  
  You can insert HTML code as content of the PanelBar item if you disable content encoding:
  
  

  item.Add()

          .Text("<span class='left'>Mail</span> <a href='' onclick='return false;' class='right'>Edit</a>")

           .Encoded(false)

  
  
  
  

  .left

  {

      float:left;

  }

  .right

  {

      float:right;

      margin-right:1em;

  }

   

  /*float clearing*/

  .t-panelbar .t-link{display:inline-block;}.t-panelbar .t-link{display:block;}

  .t-panelbar .t-link:after{content:"";display:block;clear:both;}

  
  
  Kind regards,
  Dimo
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• Narayanarao

  Posted on Dec 15, 2011 (permalink)

  Thanks for the solution, we also tried an alternate below , working as per our requirement.
  
  

  .Text(Html.Raw(@"<table width=""100%""><tr><td table_PanelBar_Header_cell"" >" + PartnerProfileResources.KeyAccountInformation + @"</td><td align=""right"">    <input type=""button"" title="+PartnerProfileResources.Edit+@" value="+PartnerProfileResources.Edit+@" t-button t-state-default"" width: 100px"" onclick="""" /></td></tr></table>").ToString())

  
  
  But the panel is collapsing / expanding when the buton is clicked , which we do not wish to happen. Any thoughts on the same please.

• Answer Dimo Dimo

  Posted on Dec 15, 2011 (permalink)

  Hello Narayanarao,
  
  You should prevent event bubbling (stop propagation) in the button's click handler.
  
  http://api.jquery.com/event.stopPropagation/
  
  By the way, using a <table> in your scenario will fail your HTML validation. You can use only inline elements.
  
  Regards,
  Dimo
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

• Nick

  Posted on Dec 21, 2011 (permalink)

  I used the same technique adding a checkbox to the panelbar header.  But, when i check the box, the panel bar item expands/collapses and sometime after the OnExpand eventhandler is called (which is empty), the checkbox is unchecked.  I would like to prevent the panel bar item to only collapse/expand when the item header is clicked, not the check box.  Also would need the checkbox to retain it's state but it looks like the header is recreated when clicked.
  Is this a bug or is there a fix for this?
  
  i finished reading the original and will try stopPropagation.
  
  
  
  

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > PanelBar > How to Add a hyperlink in the PanelBar header