Geek Answers Handbook

How to disable keyboard navigation in the Kendo user interface?

According to the documentation , I should be able to disable keyboard navigation in Kendo UI TabStrip widgets by enabling "navigatable: false" in the widget configuration. However, I cannot get this to work. I made a boiled (see below), which contains a minimum minimum to demonstrate my dilemma. Am I missing something or is it like a bug in the library?

The following is an example code snippet. To give the keyboard focus to a tab, simply click on it anywhere. Then, the arrow keys, when pressed, will move through the tab bar when I expect that keyboard navigation will 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>
Run codeHide result
+4
1

navigatable ​​ - Q2 2014 25 2014 . , , , . 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>
Hide result
+5

More articles:


All Articles