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

Fill tabs with Action and handle navigation

1 Answer 238 Views
This is a migrated thread and some comments may be shown as answers.
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:
         .Items(tabstrip =>

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:

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

1 Answer, 1 is accepted

Sort by
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.
tabstrip.Add().Selected(true).Text("first tab").Content(@<text>
    <iframe src="@Url.Action("Index", "Home")" style="width:100%; height: 100%"></iframe>

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

Dimiter Madjarov

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.

Asked by
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question