[Solved] PanelBar Links?

[Brian]

I have code like this:

@{ Html.Telerik().PanelBar()
                   .Name("BrowsePanelBar")
                   .ExpandMode(PanelBarExpandMode.Single)
                   .Items(parent =>
                   {
                       parent.Add()
                           .Text("Books")
                           .Action("Index","Books")
                           .Content(
    @<text>
    <div class="divBrowseDetails">
        <ul class="ulBrowseCat">
            <li><a href="#">Books</a></li>
            <li><a href="#">EBooks</a></li>
            <li><a href="#">Series</a></li>
            <li><a href="#">New Arrivals</a></li>
            <li><a href="#">Top Sellers</a></li>
        </ul>
    </div>
    </text>)
                            .Expanded(true);
                       parent.Add()
                           .Text("Bibles")
                           .Action("Index", "Bibles")
                           .Content(
    @<text>
    <div class="divBrowseDetails">
        <ul class="ulBrowseCat">
            <li><a href="#">Bibles</a></li>
            <li><a href="#">New Arrivals</a></li>
            <li><a href="#">Top Sellers</a></li>
            <li><a href="#">Bible Finder</a></li>
            <li><a href="#">Bible Translation Guide</a></li>
        </ul>
    </div>
    </text>);
                   })
                .Render();
}

Now, I thought that by adding the Action method onto the parent items, I would be able to use those parent items as links as well as click on their arrows to expand/collapse the section.  But, no matter where I click on the parent bar, it only expands/collapses.  Is there a way to use it as a link also?

Thanks

[Alex Gyoshev]

Hello Brian,

The panelbar expands/collapses automatically when you have child nodes or a child template (like in your case). If the root links navigated, there wouldn't be a way to expand the groups except manually (from the server). Enabling the navigation through the root links can be achieved as follows:

$("#PanelBar").bind("expand", function(e) {
    var link = $(e.item).find(">a");

    if (link.length) {
        // prevent expanding, since the browser will be redirected
        e.preventDefault();
        // redirect
        window.location.href = link.attr("href");
    }
});

Regards,
Alex Gyoshev
the Telerik team

[Brian]

That's almost what I need.

What I was hoping is that if you clicked on the root nodes description (in my case the word "Books" or the word "Bibles") it would navigate to the appropriate url.  But, if you clicked on the bar itself or the arrow at the end, it would expand/collapse.

Is there a nifty javascript way to do that?

Thanks!

[Alex Gyoshev]

Hello Brian,

There always is!

1. Style the expand/collapse arrows:
   

   .t-panelbar-expand, .t-panelbar-collapse {
       border: 1px solid #A7BAC5; /* or another color, depending on the skin */
       border-radius: 3px;
   }

2. Add the following JavaScript to make the arrows expand/collapse the items:
   

   $(".t-panelbar-expand, .t-panelbar-collapse").bind("click", function(e) {
       e.preventDefault();
       var arrow = $(this),
           item = arrow.closest('.t-item');
       item.closest(".t-panelbar").data("tPanelBar")._toggleItem(item, item.find('>.t-group').is(":visible"));
   });

Regards,
Alex Gyoshev
the Telerik team