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

[Solved] Tabstrip doesnt switch

13 Answers 233 Views

TabStrip

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

This question is locked. New answers and comments are not allowed.

13 Answers, 1 is accepted

answered on 18 Nov 2009, 02:38 PM

Hi Kaleem,

I am not sure where exactly could be the problem. Please review this online demo.
Also please verify that you have added ScriptRegistrar control on the master/view page.
For further information review this online help article:
http://www.telerik.com/help/aspnet-mvc/getting-started-using-telerik-extensions-for-asp.net-mvc-in-your-project.html

Sincerely yours,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 15 Mar 2011, 02:48 PM

Thanks for quick reply. Code is in vb. Please find the sample code of the view, problem seems of view level only as the view shows all tabs, switching to tabs is not working, by default first tab contents are shown due to .SelectedIndex(0) and also  replacing the selectedindex(1) or selectedindex(2) shows these tabs working properly, issue remains the same that it is not allowing to switch from one tab to the other. Below is the sample view code. Please let me know if you need more details.

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of test.test.testModel)" %>
<% If Model isnot Nothing Then %>
<% Dim tabBuilder As Telerik.Web.Mvc.UI.TabStripBuilder = Html.Telerik().TabStrip()
  tabBuilder.Name("MultiTabBuilder")
  tabBuilder.Items(  Function(tbs) tbs.Add().Text("Tab1").Content(Sub()
   %>
   <% Html.RenderPartial("Jobs", New Model(Model.Id))%>
   <%     End Sub))
tabBuilder.Items(Function(tbs) tbs.Add().Text(" Add Reviews").Content(Sub()
   %>
   <% Html.RenderPartial("Comments", New Model2(Model2.id))%>
   <%    End Sub))

   tabBuilder.Items(Function(tbs) tbs.Add().Text("History").Content(Sub()
   %>
   Test1
   <%
   End Sub))

   tabBuilder.Items(Function(tbs) tbs.Add().Text("Status").Content(Sub()
   %>
   test2
   <%

   End Sub))
   tabBuilder.Items(Function(tbs) tbs.Add().Text("Details").Content(Sub()
   %>
   test3
   <%
   End Sub))

  tabBuilder.SelectedIndex(0)
  tabBuilder.Render()
   %>

<% End If %>

Thanks!

answered on 18 Mar 2011, 12:28 PM

Telerik is upgraded to latest version. Now jquery version is 1.5.1. and it is included in masterpage.Problem is not yet fixed, We need to have tab control as usercontrol(ascx) inside a telerik window,
We also did a simple test by adding tab control inside view(aspx), this is not allowing to switch tabs too(code is shown below).
Now we have 2 problems
1. Unable to switch tab in view i.e aspx page(code shown below)
2.We need to know that which files need to be included in usercontrol (ascx page) having tabcontrol. We have attempted to include scriptregistrar in partial view.I guess that both problems maybe fixed on fixing first one, still it would be nice to know exactly what needs to be included in user control.

Thanks !

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
TestTab
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>TestTab</h2>
<% Dim tabBuilder As Telerik.Web.Mvc.UI.TabStripBuilder = Html.Telerik().TabStrip()
   tabBuilder.Name("MultiTabBuilder")
   tabBuilder.Items(
   Function(tbs) tbs.Add().Text("tab1") _
   .Content(Sub()
   %>
   tab1
   <%
   End Sub))

   tabBuilder.Items(Function(tbs) tbs.Add().Text("tab2") _
   .Content(Sub()
   %>
   tab2
   <%
   End Sub))
        tabBuilder.Items(Function(tbs) tbs.Add().Text("tab3") _
   .Content(Sub()
   %>
   tab3
   <%
   End Sub))
        tabBuilder.Items(Function(tbs) tbs.Add().Text("tab4") _
   .Content(Sub()
   %>
   tab4
   <%
   End Sub))

   tabBuilder.Items(Function(tbs) tbs.Add().Text("tab5") _
   .Content(Sub()
   %>
   tab5
   <%
   End Sub))

   tabBuilder.Items(Function(tbs) tbs.Add().Text("tab6") _
   .Content(Sub()
   %>
   tab6
   <%
   End Sub))
        tabBuilder.SelectedIndex(0)
   tabBuilder.Render()
       %>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftTitleButtonContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="RightTitleButtonContent" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="pageEndScripts" runat="server">
</asp:Content>

answered on 19 Mar 2011, 02:52 PM

TabStripPartialView.zip

Hello Bob,

Here is a link to the help topic which shows required JavaScript files for each component.

If the PartialView is loaded with Ajax then you need to include required JavaScript files by your own.

I have attached a simple test which shows how to implement different cases.

Best regards,
Georgi Krustev
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

answered on 21 Mar 2011, 04:29 PM

Thanks for Sample code!

Your sample project is not compatible with Visual Studio 2010,so I could not run & test it, but I have gone through the design elements and created similar project & its working in the sample scenario.

Our application has different scenario

We have some folders for different sets of views, in one folder, its index view is calling an ascx control through renderaction , before returning the partial view it prepares a list of records to be passed to this partial view. This partial view shows the records against each person record in format to show it as a part of that person record.

Till now we have navigated :- Main Page- Folder4-Index-partialView1.

In this partialView1, on click of an icon in any record, it opens a telerik window with Tabs.

Window is defined in partialView1, by calling onClick event through html link(a href) following function is called

Definiton of window is followed by

Window.contenturl=’<%: Url.Action(“MultiTab",”Multi”) %> +’?myid=’+e; %>

Then center,refresh & open it.

“MultiTab” is the partial view having tabstrip control and “multi” controller is returning this partialview along with some model properties

Now our navigation stage is

Main Page- Folder4-Index-partialView1-PartialView2

PartialView2 is shown inside Telerik window ,It has multiple tabs,each tab calls different partialview.

Everything works well,

All models view & tabs are populated with information, only the switch is not happening

I have included script registrar in index and partialview1 as suggested.