Highlight Path

[Erik Stell]

After the most recent release of the Kendo MVC wrapper, I noticed a new config option (HighlightPath(boolean)) for the tabstrip builder.  The basic description given is to select an item depending on the current URL.  However, I haven't been able to locate anything in the API documentation that expands on this to explain what the URL format should be, how to set it, etc.  Is there something I am missing?

[Daniel]

Hello,

The current URL is the URL for the requested action and controller, The action and controller for a tabstrip item can be set the same way as for all navigational components - via the Action method. The HighlightPath functionality will basically add a class to an item for which the specified action and controller match the one that is currently requested. For example, If the About action from the Home controller is requested then the second item from the tabstrip in the snippet below will be highlighted.

@(
    Html.Kendo().TabStrip().Name("tabstrip")
    .Items(items =>
    {
        items.Add().Text("Home").Action("Index", "Home");
        items.Add().Text("About").Action("About", "Home");
    })
)

Regards,
Daniel
Telerik

 

 

[Erik Stell]

Based on that answer, it appears my assumption of what HighlightPath method is for is incorrect.  What I assumed it was for and what I am attempting to do is persist a selected tab so that it reloads when the page is refreshed, etc.  So if the following is my tabstrip code:

@(Html.Kendo().TabStrip()
    .Name("fasteps")
    .Items(tabstrip =>
    {
        tabstrip.Add().Text("Step 1: Instructions").LoadContentFrom("MainInstructions", "Instructions");
        tabstrip.Add().Text("Step 2: Data Input/Review").LoadContentFrom("Index", "DataInput");
        tabstrip.Add().Text("Step 3: Resignation Prep").LoadContentFrom("Index", "ResignationPrep");
        tabstrip.Add().Text("Step 4: Post-Resignation").LoadContentFrom("Index", "PostResignation");
    })
)

I would like to be able to alter the url on tab click (or some other means) to something like:

http://localhost/Home/FaSteps#selected=selectedIndex

And have the page be able to take that selectedIndex value (or whatever value it needs to be) and automatically select the appropriate tab when the page has loaded.

[Daniel]

Hello,

Hashes are not available on the server and so there is no way to use the value to set the selected index in the configuration. You could either use a query string parameter and the SelectedIndex method:

@{
    int selectedIndex;
    int.TryParse(Request["selected"], out selectedIndex);
}
@(Html.Kendo().TabStrip()
     .Name("fasteps")
     .Items(tabstrip =>
     {
         tabstrip.Add().Text("Step 1: Instructions").LoadContentFrom("MainInstructions", "Instructions");
         tabstrip.Add().Text("Step 2: Data Input/Review").LoadContentFrom("Index", "DataInput");
         tabstrip.Add().Text("Step 3: Resignation Prep").LoadContentFrom("Index", "ResignationPrep");
         tabstrip.Add().Text("Step 4: Post-Resignation").LoadContentFrom("Index", "PostResignation");
     })
    .SelectedIndex(selectedIndex)
)

or select the item via JavaScript:

$(function () {
    var tabstrip = $("#fasteps").data("kendoTabStrip"),
        hash = location.hash;
    if (hash && hash.indexOf("selected=") >= 0) {
        var idx = hash.substr(hash.indexOf("=") + 1);
        tabstrip.select(tabstrip.tabGroup.children().eq(idx));
    }
});

Regards,
Daniel
Telerik