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?

Answer 1

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...