Fill tabs with Action and handle navigation

2 posts, 0 answers
  1. Alberto
    Alberto avatar
    71 posts
    Member since:
    May 2012

    Posted 08 May 2014 Link to this post

    Hi Guys,
    I'm building up a site using mvc (razor) and kendo (plus ef).
    I Built all controllers and view and right now they are exactly how Visual studio created them.

    so for the first step I tried to put every /entity/Index.cshtml in a different tab

    Here my code:
    @(Html.Kendo().TabStrip()
             .Name("MainAcsTab")
             .Items(tabstrip =>
             {
                 tabstrip.Add().Selected(true).Text(AcsViewRes.TabUser).Content(
                     Html.Action("Index","User").ToString());
                 tabstrip.Add().Text(AcsViewRes.TabGroups).Content(
                     Html.Action("Index","Group").ToString());
                 tabstrip.Add().Text(AcsViewRes.TabRoles).Content(
                     Html.Action("Index","Role").ToString());
                 tabstrip.Add().Text(AcsViewRes.TabFunctions).Content(
                     Html.Action("Index","Function").ToString());
             })
       )

    as soon as I run the application I can see the tab, and the first tab content as expected.
    However I get an error:

    Uncaught TypeError: undefined is not a function - placed here:
    jQuery(function(){jQuery("#MainAcsTab").kendoTabStrip({});});

    as a consequence of this issue (I suppose) I'm not able to change tab.

    Regarding the navigation...
    My indexes contains the ul list of all object and a link to edit/detail/delete each object.
    If I click on one of this link, say details, the url changes from "localhost/AccessControl/#MainAcsTab-1" to "localhost/AccessControl/User/Details/1" and I loose my tab.

    Is there a way to keep every view change inside my currently selected tab?

    do I have to link every view as partial?

    as a note my _layout and _viewStart are as created by VS

    Thank you
    Fabio
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 12 May 2014 Link to this post

    Hello Fabio,


    The provided sample code seems correct for defining a TabStrip and it's contents. I assume that something else is causing the JavaScript error - probably in some of the rendered MVC actions there is an invocation of a non-existing function. Could you please check to assure if that is the case?

    As for the second question, each time a navigation link is clicked in the TabStrip content, it will redirect the browser to the specified page. A possible approach to perform a navigation in the contents of the tab would be to define it in an iframe.
    E.g.
    tabstrip.Add().Selected(true).Text("first tab").Content(@<text>
        <iframe src="@Url.Action("Index", "Home")" style="width:100%; height: 100%"></iframe>
    </text>);

    I hope this information helps. I wish you a great day!

    Regards,
    Dimiter Madjarov
    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
Back to Top