[Solved] Can I have an Action for panelbar top-level node?

[Dewey]

I would like to be able to click on a top-level node in my MVC PanelBar and have it go to an associated URL.  I can't seem to find a way to accomplish this as the only event spawned by such a click is the opening/closing of the child list.  Is there a solution?  I would like to keep using the Telerik panelbar if I can.

[Daniel]

Hello Dewey,

You can configure the top level items to navigate to a different page by setting the Action but I am not sure if I understand correctly in which case should the item be expanded and in which the should the navigation happen. Could you clarify a bit?
Regarding you question about an event , you can use the Select event which is triggered when an item is selected.

Regards,
Daniel
the Telerik team

[Dewey]

I would like the click to fire an action (navigate to another view) AND expand the submenu.  In the example below I want to click "TopLevel" to expand the submenu but at the same time show information from the "Overview" view. 

 

@(Html.Telerik().PanelBar()
    .Name("panelBar")
    .ExpandMode(PanelBarExpandMode.Single)
    .Items(items =>
    {
        items.Add()
            .Text("TopLevel")
            .Action("Overview", "Account")
            .Items(subitems =>
            {
                subitems.Add()
                    .Text("SubLevel")
                    .Action("Create", "Account");
            });
    })
)

Is there a way?

[Daniel]

Hello again Dewey,

This is not supported out of the box but can be achieved by using the OnSelect event to navigate with custom code. You could pass a parameter which to indicate whether the item should be expanded on the server with the Expanded method. For example:

@(Html.Telerik().PanelBar()
    .Name("panelBar")
    .ExpandMode(PanelBarExpandMode.Single)
    .Items(items =>
    {
        var expanded = Request.QueryString["expanded"] == null ? false : bool.Parse(Request.QueryString["expanded"]);
        items.Add()
            .Text("TopLevel")
            .Expanded(expanded)
            .Action("Overview", "Account")
            .Items(subitems =>
            {
                subitems.Add()
                    .Text("SubLevel")
                    .Action("Create", "Account");
            });
    }).ClientEvents(events=> events.OnSelect("onSelect"))
)

function onSelect(e) {
    var $item = $(e.item);
    var link = $item.find(">a");
    var text = link.text();
    if (text == "TopLevel") {
        var isExpanded = $item.find("> .t-group:visible").length > 0;
        var url = link.attr("href") + "?expanded=" + !isExpanded;
        window.location = url;
    }
}

Regards,
Daniel
the Telerik team