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

Fill tabs with Action and handle navigation

1 Answer 117 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Gaetano
Top achievements
Rank 1
Gaetano asked on 08 May 2014, 03:51 PM
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

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 12 May 2014, 02:47 PM
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.

 
Tags
TabStrip
Asked by
Gaetano
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or