How to disable keyboard navigation in a Kendo UI TabStrip?

Question

According to the documentation, I should be able to turn off keyboard navigation in a Kendo UI TabStrip widget by including "navigatable: false" in the widget configuration. However, I can't get this to work. I've made a boiled down (see below) that contains the bare minimum to exemplify my dilemma. Am I missing something or does this look like a bug in the library?

Below is a code snippet example. To give keyboard focus to the tab strip, just click anywhere in it. Then the arrow keys when pressed will navigate the tab strip when I expect keyboard navigation to be disabled.

$(document).ready(function() {
  $("#tabstrip").kendoTabStrip({
    navigatable : false
  });
});

<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.rtl.min.css" rel="stylesheet"/>
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://da7xgjtj801h2.cloudfront.net/2014.1.318/js/kendo.all.min.js"></script>
<div id="tabstrip">
  <ul>
    <li class="k-state-active">Tab A</li>
    <li>Tab B</li>
  </ul>
  <div>
    <div>Content for Tab A</div>
  </div>
  <div>
    <div>Content for Tab B</div>
  </div>
</div>

Welcome to SO! Thank you for providing a small example, but it's always best to include it in the question itself rather than a link. SO now has a thing called a [stack snippet](http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) which you may want to use. — Ajean, Sep 25 '14 at 20:38
Thanks for the advice, @Ajean! I replaced the link with a stack snippet. — dcdruck, Sep 25 '14 at 20:53

OnaBai · Accepted Answer · 2014-09-26T05:47:32.673

This navigatable option was introduced for the first time on Q2 2014 Beta on June 25, 2014. I think that the release that you are using does not include it. Try using a newer one a 2014.2.716

$(document).ready(function() {
  $("#tabstrip").kendoTabStrip({
    navigatable : false
  });
});

<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.rtl.min.css" rel="stylesheet"/>
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://da7xgjtj801h2.cloudfront.net/2014.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://da7xgjtj801h2.cloudfront.net/2014.2.716/js/jquery.min.js"></script>
<script src="http://da7xgjtj801h2.cloudfront.net/2014.2.716/js/kendo.all.min.js"></script>
<div id="tabstrip">
  <ul>
    <li class="k-state-active">Tab A</li>
    <li>Tab B</li>
  </ul>
  <div>
    <div>Content for Tab A</div>
  </div>
  <div>
    <div>Content for Tab B</div>
  </div>
</div>

Thanks @OnaBai that seems to work. I'll have to update the Kendo library in our platform and do some testing. I would upvote your answer but I don't have enough reputation, so my thanks will have to suffice. — dcdruck, Sep 26 '14 at 14:12

How to disable keyboard navigation in a Kendo UI TabStrip?

1 Answers1