This is a migrated thread and some comments may be shown as answers.

Highlight Path

3 Answers 134 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Erik Stell
Top achievements
Rank 1
Erik Stell asked on 22 Apr 2014, 12:57 PM
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?

3 Answers, 1 is accepted

Sort by
1
Daniel
Telerik team
answered on 24 Apr 2014, 02:50 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Erik Stell
Top achievements
Rank 1
answered on 24 Apr 2014, 03:48 PM
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.
1
Daniel
Telerik team
answered on 28 Apr 2014, 10:37 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TabStrip
Asked by
Erik Stell
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Erik Stell
Top achievements
Rank 1
Share this question
or