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?
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.
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
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?
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?
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
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
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?
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