I have a tabstrip that loads its content from partial views, and this works well provided the routeValues never change. For example:

This will hit FirstAction and SecondAction when the tabs are selected, and carry the id along from ViewData, this is fine.

...but if "id" is a more dynamic bit of data, that needs to change on the page, this approach is no longer valid.  

The TabStrips do not have any Data function, akin to what can be found in the Read attribute in a regular DataSource, which would have been nice, and there is nothing too helpful in the Select event of the TabStrip. I have tried editing the _contentUrls list inside the TabStrip element, but this does not seem to work, either; it seems this is populated when the element is created, but not actually used.

...so how can this be done? Is there any way to update the content urls of an existing tab?

Hi Tlerik Team,

I'm trying to disable the animation for the Kendo MVC TabStrip and I did like 

 @{ Html.Kendo().TabStrip()     
        .Name("tabxyz")
         .Events(events => events.Select("onSelect"))
          .Animation(animation =>
          {
              animation.Enable(false);
          })

And its working as expected; But when I change the tab using the java script code, the animation is enabled again!!!!

Here is the code that I used.

  var tabstrip = $("#tabxyz").kendoTabStrip().data("kendoTabStrip");  
  var myTab = tabstrip.tabGroup.children("li").eq(selectedTab);
   tabstrip.select(myTab);

Please let me know what i'm doing wrong!! 

Thanks in advance.

Mahendra.

Hello,

We have a requirement to navigate between tabs using back and next buttons; an additional requirement is that if a tab contains a child tabstrip the next button should begin navigating through the child tabs before continuing on with the parent tabs.

The basic structure is as follows:

Parent tabstrip contains tabs 1, 2, 3. Tab 2 contains a child tabstrip with tabs 4, and 5.

Beginning on tab 1, clicking the next button should select tab 2. Once on tab 2 clicking next should select tab 4. Once on tab 4 clicking next should select tab 5. Once on tab 5 clicking next should select tab 3. Clicking back should do the reverse.

I have no problem going forward from 1 -> 2 -> 4 -> 5; I have no problem going back within a single tabstrip 5 -> 4 or 2 -> 1, however, going from child up to parent , 4 -> 2, doesn't work; it seems tab 2 never has gets selected or activated.

Any ideas on how to accomplish this? I've included a simplified prototype of our initial approach.

Thanks for any advice.

Hi,
Trying to build a multicolumn form within a tabstrip using div and bootstrap grid tags. Even after reading article about Bootstrap and Kendo, (http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout), the layout seems not to work as expected like in:

The expected result would be a form with two columns and fields (2x) on both sides. The code is in a partial view and it is invoked on the tabstrip as follows:

Is this the way to have it done or not?

Regards,

Marcello

Hello guys, i am trying to load a partial view in my tab-strip. each tab strip has a place-holder, where the partial view. will be displayed. One first load, the partial view displays that data. However, when i click the subsequent tabs, the tab-strip does not reload  with the new data. i have added a tab re-load logic but, to no avail unfortunately.

Here is my Index.cshtml

Here is my ParentController.cs

Here is the picture, when if load the firs time and when i click on the next tab. Thanks for your help.

Hi there guys, its me again. I have a tab-strip that calls a details page for a Person,House, and Car tab. These tabs display the data just fine. On each detail page, i have an edit button, when i click the edit button, right now, when i click the edit button,  i am re-directed to the edit page outside of the tab-strip which isn't what i want. How do i make it load up the edit page within the tab-strip and ultimately when i click save, how to i make  re-load the details page again within the tab-strip.

Index.cshtml- from the InfoController

Here is the InfoController.cs

Here is my Detail.cshtml - for the Person tab

And here is my Edit.cshtml for  the - Person tab

And Finally here is my PersonController.cs

I have attached images to help explain what i am seeing. Thanks for your help.

Hello,

In the last version of Kendo Tab the Scrolling button position is under the tab and not on the left and right side - why?
(see attached picture)

regards robert

I have tabstrip that is displaying a partial from a different controller/view area, but I cant get the post of the partial in the tabstrip to post back to the different controller

the View that the tab is in.

~/Areas/Secure/Views/Company/companyStaff.cshtml

display a view assocated to a different controller

tabstrip.Add().Text("Create Contact")
                  .Selected(false)
                  .Content(Html.Partial("~/Areas/Secure/Views/Contact/_ContactManagement.cshtml",  new WebSite.Library.Models.Contact() , new ViewDataDictionary { { "Id", "0" } }).ToHtmlString());

How can I get the partial in the tab to post back to its own controller post method

Hello all,

This is more of a general question so I have opted to not include too much code with this question.  I can provide more if it will help find a good solution.

I have an existing tab layout where the tabs link to asp:panels in the page that in turn render a TabStrip and a Grid below:

                        Html.RenderAction("GetTabStrip", new RouteValueDictionary { { ..., ...} });
                        Html.RenderPartial("Grid", Model["Grade"], new ViewDataDictionary(this.ViewData) { { "gridName", "..." }, { "dsReadAction", "..." } });

The tab layout basically serves as a TabStrip before we adopted the ASP.NET MVC flavour of Telerik.  I have two such tabs in this layout that both render a TabStrip and Grid like above.

The first TabStrip works great - I am able to scroll horizontally (since there are a lot of tabs), and the content is shown as expected.  But the second TabStrip does not scroll and the content does not show up.  The k-tabstrip-items list elements seem to be different between the two TabStrips.  Here is an li element from the first TabStrip:

   <li class="k-item k-state-default" role="tab" aria-controls="tabstrip-2"><span class="k-loading k-complete"></span><a class="k-link" href="#tabstrip-2">New York - i really hope the scrolling works</a></li>

...and from the second TabStrip:

   <li class="k-item k-state-default" ><a class="k-link" href="#tabstrip-2">New York - i really hope the scrolling works</a></li>

...so the second element is missing the following attributes and span tag:

role="tab" aria-controls="tabstrip-2"><span class="k-loading k-complete"></span>

I believe this could be the source of my issues, but I am unsure if this implementation will even work.

Thanks for reading - any feedback is appreciated.