[Solved] How to Add a hyperlink in the PanelBar header

[Narayanarao]

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();

[Dimo]

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

[Narayanarao]

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.

[Dimo]

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

[Nick]

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.