Bug report
Selecting a tab from the TabStrip causes the page to scroll to the top. The body height must be at least 746px in order to reproduce the bug.
Reproduction of the problem
- Open this Dojo example - https://dojo.telerik.com/@Dimitar-Goshev/ANOkAfor
- Scroll down the page until the tab's content is visible.
- Select another tab.
Current behavior
The page scrolls to the top.
Expected/desired behavior
Selecting a tab shouldn't cause scrolling.
Environment
- Kendo UI version: 2021.3.1207
- Browser: [all]
Bug report
For a TabStrip in a PanelBar, the content for all tabs is displayed initially. You need to select all the tabs so that the content would start displaying correctly for the corresponding tab.
Reproduction of the problem
- Open this Dojo - https://dojo.telerik.com/@martin.tabakov@progress.com/IxUxAfOT/5
Current behavior
The content for all the tabs is displayed.
Expected/desired behavior
The content should be displayed separately for each tab.
Environment
- Kendo UI version: 2021.3.1207
- Browser: [all]
Describe the regression
Using the latest version of Kendo UI, if the Kendo UI TabStrip is set to scrollable: false, the tabs flex styling/structure is affecting the appearance of the tabs.
To reproduce
Steps to reproduce the behavior:
- Go to the following Progress Kendo UI Dojo
Expected behavior
Previously in Kendo UI version 2021.2.616, setting the scrollable to false will wrap the tabs above each other.
Working example
Screenshots
Affected suites
- Kendo UI for jQuery
Affected browsers
- All
Build system information
- Not Applicable
When focusing the comopnent a visual indication aims to show the user that something has changing during keyboard navigation. In the TabStrip there is no such indication. This also violates WCAG 2.4.7.
https://demos.telerik.com/kendo-ui/tabstrip/keyboard-navigation
For the love of God please add this capability so people don't have to try and figure out all the different ways to do this either via MVC, AngularJS or just plain HTML5. You guys strain at a gnat and swallow a camel and it really ticks me off sometimes - you spend all this time creating a nice excel js object for the kendo toolkit but you can be bothered to spend the time to allow auto-creation of tab close button for the tabstrip. Trying to figure this out using an angular controller has proven to be a pain in the a$$ because your angular examples such to put it lightly!
I have a need to be able to specify a template for the content of my tabs. If you don't add it for me, add it to be consistent with the rest of your controls.
Hi,
I combined code form two examples found on your site in order to reproduce the bug.
The original example describes how to append tab to the tabStrip:
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/append
dojo editor: https://dojo.telerik.com/alEGIcod
I added this line
tabStrip.remove("li:first");
that was copied from the other example about removing tab:
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/remove)
Just "li:last" I replaced by "li:first"
Now the appended tab has content of the second tab "Content 2" instead of "Appended Tab 1 content".
The bug reproduced.
I think that the problem is that the both tabs have the same id: id="tabstrip-tab-2"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="tabstrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div>Content 1</div>
<div>Content 2</div>
</div>
<script>
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.remove("li:first"); // added line
tabStrip.append(
[{
text: "<b>Appended Tab 1</b>",
encoded: false,
content: "Appended Tab 1 content",
},
]
);
</script>
</body>
</html>
Hi,
With the latest release of Kendo UI 2020.3.1118; the insertBefore/insertAfter methods of the tabStrip are removing the previous page tab content; works as expected in Kendo UI 2020.3.1021
Example - Select Inserted item, then select Baseball tab; Dojo Example
After insertBefore:
It should be possible to use a SlideIn animation in addition to the already-supported expand:vertical and fadeIn animations.
Allow to edit tab(TabStrip) header name directly like when I double click or right click on any tab I can edit its name and on lost focus event it should save in database directly.
It would be nice to have methods to expand and collapse the tabstrip as the user does by clicking the tab header (if collapsible is enabled). Also events should be triggered, every time the tabstrip expands or collapses.
Simply allow the tabs to be position away from the content holder, as if they were a menu. I want the functionality of the tabs, i.e. load all controls at page load, but the feel of a menu.
I'm working with a case where the text for the tab label is already HTML formatted. The TabStrip is bound to a DataSource object, allowing me to specify the text and value fields. However, I cannot specify whether the title is encoded or not. Currently, the workaround is to use javascript to modify the HTML of the tab label after it has been rendered (http://dojo.telerik.com/UXuTE), but having a way to specify which data field to map to the encoded property would be much simpler (see above dojo for and example).
Now
tabstrip.append({
..
content: <SHOULD BE PLAIN TEXT HTML>
});
It makes more sense and adds flexibility (preserving handlers and dynamic things) to pass ready dom, rather than vapid html string.
Currently the tabstrip just magically selects which container element goes with which tab. You should be able to specify it both with data- and with dataSource data so that you can tell it exactly which one to use (and can then have multiple tabs with the same content as well).
When a tab in TabStrip is dragged out of the tabgroup, a new window containing the tab's content will be shown. When the titlebar of the window is dragged back to the tabgroup, the tab returns and the window destroyed. Something like Google Chrome's tabs.
As per Kamen's request in the support ticket (657521), I'm raising this request to change behaviour of the tabstrip widget. At this time, when tab content is loaded through Ajax which may result in an error (either transport error, but optionally also javascript generated errors), tabs remain frozen and we can no longer click another tab to load that content. We would like this behaviour to be changed: a user should ALWAYS be able to click any tab available to him (we don't want the freezing at all) because we don't want to force the user into a waiting modus just because he clicked a wrong tab first. When a user clicks a second tab, while the content of an earlier clicked tab was still loading, the widget should automatically kill the ajax call to prevent a high load on the server. Also, we would like an option which disabled caching of tab content; if caching is disabled, we want the content of the tab reloaded each time a tab is clicked (now it gets loaded once, and we need to refresh the entire page if we want to refresh the content of one specific tab (unless we add a button somewhere to allow the user to lick "refresh"; it would be a nice option if this can just be configured at initialisaing of the tabs...
Add ability to pass dynamic parameters for load on demand tabs - similar functionality to the DataSource Read Data option which allows additional parameters to be returned via a javascript function.