I have this code which was working before updated my Kendo version. What I'm trying to do is depending the selected tab option execute some other code, this is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script></head>
<body>
<div id="tabs1">
<ul>
<li id="tabs1-user" style="display:none;">Bullets</li>
<li id="tabs1-superUser">Features</li>
<li id="tabs1-details">Details</li>
<li id="tabs1-dashboard">Info</li>
</ul>
</div>
<script>
$(document).ready(function () {
setTabs();
});
function setTabs() {
var t1 = $("#tabs1").kendoTabStrip({
animation: { open: { duration: 0, effects: "fadeIn" }, close: { duration: 0, effects: "fadeOut" } },
select: function (e) {
console.log(e);
if (e && e.item) {
switch (e.item.id) {
case 'tabs1-user': break;
case 'tabs1-details': getDetails(); break;
}
}
}
});
t1.select(0);
$("#tabs1").show();
}
function getDetails() {
console.log('calling method to retrieve details...');
}
</script>
</body>
</html>Also here is a DOJO
As you can see I expect sending the Id tabs1-details when I click on Details tab but what I'm getting is tabs1-tab-3.
How can I solve this issue? I need to define the tabs name in somewhere else?
It looks like Kendo Tabstrip overrides the ID you created. In this case, my suggestion would be to use the data attribute. Something like data-id. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script></head>
<body>
<div id="tabs1">
<ul>
<li data-id="tabs1-user" style="display:none;">Bullets</li>
<li data-id="tabs1-superUser">Features</li>
<li data-id="tabs1-details">Details</li>
<li data-id="tabs1-dashboard">Info</li>
</ul>
</div>
<script>
$(document).ready(function () {
setTabs();
});
function setTabs() {
var t1 = $("#tabs1").kendoTabStrip({
animation: { open: { duration: 0, effects: "fadeIn" }, close: { duration: 0, effects: "fadeOut" } },
select: function (e) {
console.log(e);
if (e && e.item) {
switch ($(e.item).attr('data-id')) {
case 'tabs1-user': break;
case 'tabs1-details': getDetails(); break;
}
}
}
});
t1.select(0);
$("#tabs1").show();
}
function getDetails() {
console.log('calling method to retrieve details...');
}
</script>
</body>
</html>With the above code, when you click Details, "calling method to retrieve details..." will be printed in the console log.