Hello, I have a Tabstrip with the event 'Activate'. When a user clicks a tab on the tabstrip, the activate event fires. During this time I am determing whether the tabstrip will continue on its merry way to allow a user to access to the tab they clicked, or deny them and specify the tab they need to go to.
My issue is with the tabstrip.select( ) method. I can specify the tabstrip to be positioned with tabstrip.select( <int> ), but this only works the first time using the 'Activate' listener. It does not work at all with show or select.
I have modified a Kendo Dojo to give an example. What should be happening is upon Tab 1 being selected, the Tabstrip should force the user back to Tab 2. The tabstrip doesn't seem to be doing this at all.
http://dojo.telerik.com/iJolu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/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>
// event handler for activate
var onActivate = function(e) {
// access the activated item via e.item (Element)
var ts = $("#tabStrip").kendoTabStrip().data('kendoTabStrip');
debugger;
switch ($(e.item).find(".k-link").text().trim()) {
case "Tab 1":
ts.select(1);
debugger;
break;
}
// detach activate event handler via unbind()
tabStrip.unbind("activate", onActivate);
};
// attach activate event handler during initialization
var tabStrip = $("#tabStrip").kendoTabStrip({
show: onActivate
}).data("kendoTabStrip");
</script>
</body>
</html>
1 Answer, 1 is accepted
Thank you for providing a sample dojo.
Since you are selecting a tab in the TabStrip's show event the selection needs to be made after a small delay, so here's a modified dojo, in which the setTimeout method is used to delay the second tab's selection.
Regards,
Ivan Danchev
Telerik by Progress