Telerik PanelBar: Possible to make item redirect to new page?

Question

In my application, I want the program to redirect the user to a new page AND slide open the list of SUBITEMS when a panelBar ITEM is clicked/selected. However, I am unsure as how this should be implemented.

I have used ".Action" along with "item" of my panelBar but this is unfortunately throwing an error. A small portion of the code is displayed below for your convenience (mainly focus on the second last line). The error being thrown is:

HttpException was unhandled by user code

  <% Html.Telerik().PanelBar()
            .Name("PanelBar")
            .SelectedIndex(0)
            .Items(item =>
            {
                item.Add()
                    .Text("Home").Action("Index", "Home")
                    .Items(subItem =>
                     {
                         subItem.Add().Text("My Profile").Action("MyProfile", "Profile");
                         subItem.Add().Text("Test");
                     });

                item.Add()
                    .Text("Orientation").Action("Index", "Orientation")
                    .Items(subItem =>
                    {
                        subItem.Add().Text("GridView");
                        subItem.Add().Text("Scheduler");
                        subItem.Add().Text("Docking");
                        subItem.Add().Text("Chart");
                    });                

            }).Render();
    %>

It seems like ".Action" is not working in this case. So my question is, how should I make the item take in an event?

Taz · Answer 1 · 2012-08-18T22:00:40.617

Here is a snippet of how I do this using javascript and it works just fine. I do not dispute that there are other ways of doing this as well. So you are aware, this snippet is from an MVC app that I am doing. I included styling code as well so that you are aware that you can do that. I realise that you were not asking for that functionality but just thought it may help better your understanding of the property.

Lets say I want the font bold, no border and we want to trap a mouse event to perform a redirect.

To handle the styling, I simply add my item and then set my styling with the HtmlAttributes property.

Here is the code for the styling...

**item.Add()     
    .Text("Surf Shop")     
    .HtmlAttributes(new { style = "font-weight: bold; border:none;" })**

As my site is a surfing site, I would like to open the Surf Shop homepage and drop the submenu at the same time. To do this, I use the same HtmlAttributes attributes property and hook into the onmousedown event event handler. I then call my handler passing in the controller name that I wish to load. I only need the controller as all pages are called index. You could however, pass in a complete string here and simply redirect to it. Whatever blows your hair back... :-)

Here is the code with hook into the event handler...

**item.Add()
    .Text("Surf Shop")
    .HtmlAttributes(new { onmousedown="onBaseNavItemClick('SurfShop');" })**

Finally, here is the complete code with both styling and hook into the event handler

**item.Add()
    .Text("Surf Shop")
    .HtmlAttributes(new { style = "font-weight: bold; border:none;",onmousedown="onBaseNavItemClick('SurfShop');" })**

Our event handler function

**function onBaseNavItemClick(itemText)
{
    window.location = BASE_URL + itemText + "/index";
}**

ps. The MVC controller that is being called must pass a value back in ViewData in order to toggle the selectedIndex property of the PanelBar. This is so the correct Panel opens when the redirect is performed.

Hope this helps...

Telerik PanelBar: Possible to make item redirect to new page?

1 Answers1