Telerik Forums
Kendo UI for jQuery Forum
1 answer
122 views

I can rotate the tab labels by putting a css rotate into the <li> entry.  However it doesn't modify the size of the tabs to match.  Is there a way to have the tab strips down the side of the display and have the labels turned 90 degrees so that they fit?

Ivan Danchev
Telerik team
 answered on 04 Feb 2020
10 answers
738 views
Hi,

I'm using the TabStrip to break up the data I need to submit, and the Kendo client-side validator to perform validation on that data.

If I'm on the 2nd tab and click the form's submit button and there's a piece of data missing from the 1st tab (i.e. it fails validation), how can I "jump back" to the tab with the validation error on? The validator works perfectly, e.g. it stops form submission, displays the error message (when you gp back to the tab manually), I just need to move the user back to the tab with the error message on.

Thank you,

Dan F.
Alon
Top achievements
Rank 1
Veteran
 answered on 05 Dec 2019
2 answers
129 views

We are currently utilizing Kendo version 2017.1.118, and I am experiencing some odd behavior in IE11 with tabs and data transferring between the grids.

When you are on tab 1 with a grid, and you dbl click an item it triggers my add function which adds that row to another grid on tab 2. The entire page then loses focus. I can no longer scroll the page, the grid, or even click my other tab unless I click somewhere in the window.

I initially solved this problem by utilizing the hack $("#tab1").trigger("click"); which would force a click. This enabled me to now be able to select tab 2, but for some reason it didn't fully enable focus back to the page, so I was still unable to scroll unless I clicked an element outside of the grid again. Unfortunately firing $("#tab1").trigger("click"); again did not solve the issue.

The main problem is that the page itself becomes unfocused when data is moved from one tab to another tab in IE11. I am not having this issue in any other browser and it only happens in IE11 when data is added to non-selected tab contents.

Veselin Tsvetanov
Telerik team
 answered on 06 Aug 2019
6 answers
105 views

I have a sortable tab strip that has an editor inside each tab.  It works great until the user starts moving tabs, then all the content that's inside of the editor disappears.  The tab container seems to move properly, it's just losing the actual content within the editor itself.

Here's a link to a demo of the problem:  https://dojo.telerik.com/oDUrupUp

 

Misho
Telerik team
 answered on 10 Jul 2019
3 answers
356 views

First, it would be really helpful with a good example of using Grids in a TabStrip, I am sure many more than I want to do that.

 

I have a TabStrip with 2 tabs each containing one grid. When I load up the View containing the TabStrip it seems like both Grids tries to load its data, but only one of them (on the first/active tab) actually manage to display some data. Here is my TabStrip:

 

<div id="forecast">
    @(Html.Kendo().TabStrip()
          .Name("BackOfficeTabStrip")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Bostadstyper")
                  .Selected(true)
                  .Content(@<text> @Html.Action("Index", "AccommodationType")</text>);


              tabstrip.Add().Text("Civilstatus")
                  .Selected(false)
                  .Content(@<text> @Html.Action("Index", "CivilStatusType")</text>);
          })
          )
</div>​

 

And my "subviews" are setup as MVC partials and work fine on their own.

 

Are Partials the preferred way of handling "subviews" in a TabStrip? What are the settings available to control loading of contents?

Amber
Top achievements
Rank 1
 answered on 28 May 2019
1 answer
253 views

Despite setting the tab strip to wrap, I'm seeing some inconsistency. 

var tabStrip = $("#TabStripPatientDetails").kendoTabStrip().data('kendoTabStrip');
tabStrip.scrollable = false;

Specifically, hitting refresh seems to switch the tabstrip to scroll.  Is there another setting I need to tweak?

 

 

Marin Bratanov
Telerik team
 answered on 22 Mar 2019
1 answer
73 views

Hi, 

As my title says the content pane of my is being pushed outside the Tabstrip container. I've never seen this before, at first I it was something to do with my code, in the attached image, you can see its simply 2 titles and test data tabs.

Have you ever seen something like this before?

Thanks, 
Grant

Dimitar
Telerik team
 answered on 27 Feb 2019
2 answers
158 views

Is there a way to bind a tabstrip data item badge?  For example, I want the tab header to be "Tab Header" having a badge = 10 but be able to update it via code.

div id="data-div">
    <kendo-tabstrip name="tabstrip">
        <items>
            <tabstrip-item selected="true" data-bind="text: tab1Header">
                <content>
                    <p>Content</p>
                </content>
            </tabstrip-item>
        </items>
    </kendo-tabstrip>
</div>
 
<script>
 
    var viewModel = kendo.observable({
        tab1Header: "Tab Header",
        //tab1Header: "Tab Header <span class='Valid'>10</span>" -- doesn't work, displays raw text,
        tab1Badge: "10"   // Need to bind this to the badge class for the first tab
    });
 
    kendo.bind($("#data-div"), viewModel);
 
</script>

 

 

Testing

Nencho
Telerik team
 answered on 28 Jan 2019
5 answers
941 views

The tabstrip expands to fit content to a point then stops. And if you put a splitter inside it doesn't expand at all and instead scrollbars appear.

I have a large grid in a tab and I want the tabstrip to fit to the grid size which is taller than the window. How can I do that? Can it be done with split content too?

Ivan Danchev
Telerik team
 answered on 30 Aug 2018
1 answer
343 views

Hi,

 

We have a Tab strip on a screen that can have about 10 to 20 tabs on ant any given time and the tab names can be quite long. This has worked fine until we have started moving over to Bootstrap 4, we have set the theme to "kendo.bootstrap-v4.min.css" and the scroll no longer works on the tab strip the tabs just get really small.

 

an example of this can be seen here https://jsfiddle.net/a0dq3m2j/ if you change the theme to "kendo.bootstrap.min.css" then it works as expected then you make the left pain smaller but with "-v4" the tabs just get smaller until its impossible to use.

 

Daivd

 

Dimitar
Telerik team
 answered on 24 Jul 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?