Highlight Path

4 posts, 0 answers
  1. Erik Stell
    Erik Stell avatar
    11 posts
    Member since:
    Dec 2013

    Posted 22 Apr 2014 Link to this post

    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?
  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 24 Apr 2014 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Erik Stell
    Erik Stell avatar
    11 posts
    Member since:
    Dec 2013

    Posted 24 Apr 2014 in reply to Daniel Link to this post

    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.
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 28 Apr 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready