Kendo DropDown Tabbing

by Trae

HTML

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<script src="https://kendo.cdn.telerik.com/2015.3.916/js/kendo.all.min.js"></script>
<div id="test">
  <div data-template="temp" data-bind="source: items"></div>
</div>
<script id="temp" type="text/x-kendo-template">
  <span>
		<input 
    	tabindex="#: Ordinal * 10 + 10#"
    	data-role="dropdownlist"
      data-text-field="Text"
			data-value-field="Id"
      data-value-primitive="true"
      data-bind="source: data, value: Id" /><br/><br/>
  </span>
</script>

JavaScript

var viewModel = kendo.observable({
  items: [{
    Id: 0,
    Text: 'Item 1',
    Ordinal: 0
  }, {
    Id: 1,
    Text: 'Item 2',
    Ordinal: 1
  }, {
    Id: 2,
    Text: 'Item 3',
    Ordinal: 2
  }, {
    Id: 3,
    Text: 'Item 4',
    Ordinal: 3
  }],
  data: [{
    Id: 0,
    Text: '1'
  }, {
    Id: 1,
    Text: '2'
  }, {
    Id: 2,
    Text: '3'
  }, {
    Id: 3,
    Text: '4'
  }]
});

kendo.bind($("#test"), viewModel);