2

How do I set tab index for numeric text box.. My code is ..

$("#max_award_amount").kendoNumericTextBox({

    min:0,
    max: 99999999.99,

}).attr("tabindex","4");

But it is not working as expected.

Kiren S
  • 3,037
  • 7
  • 41
  • 69

4 Answers4

0

It would be more helpful to know what exactly isn't working but I will endeavor to answer anyway.

I would imagine that the reason that your code isn't working is because you are setting the tabindex on the input control after the Kendo initialization has taken place. Kendo actually hides the original input and creates it's own to use as part of the control and during this process it copies over some attributes, including tabindex.

When you call attr as above you are setting the tabindex against the original, now hidden input control. Try setting the tabindex on the html element itself. Kendo should then copy the value when wrapping your input control.

<input id="box1" tabIndex="0" />

<script type="text/javascript">
   $(function() {
       $("#box1").kendoNumericTextBox();
   });
</script>

EDIT

I looked into this some more and I couldn't seem to get a set of Kendo numeric textboxes to respect the tabindex that I specified.

It seems that Kendo does copy over the tabindex from the original input to the new input when constructing the textbox but it also explicitly sets the tabindex of the original input back to zero (I looked at the source code). I guess this wouldn't be so much of a problem except that when you click in the textbox the generated input is hidden and the original one is shown! So I'm not quite sure now what Kendo are trying to achieve here by creating a new input but then just hiding it and showing the old one when you click in the box.

I tried to report this bug to Kendo but alas, their forums are now "premium only". Seems like there is no way to report a bug unless you pay them. Poor show.

I got this working by setting the tabindex back on the original element after initialization.

 <input id="box1" tabindex="10" />
 <input id="box2" tabindex="12" />
 <input id="box3" tabindex="11" />
 <input id="box4" tabindex="13" />  

 $(function() {
   $("#box1").kendoNumericTextBox()[0].tabIndex = 10;
   $("#box2").kendoNumericTextBox()[0].tabIndex = 12;
   $("#box3").kendoNumericTextBox()[0].tabIndex = 11;
   $("#box4").kendoNumericTextBox()[0].tabIndex = 13;
 });

Full demo here

Matt B
  • 8,315
  • 2
  • 44
  • 65
  • I am doing exactly you said above. I set tab index 3 for my element. But after 2 it is jumping to 4 instead of 3. That is my problem – Kiren S Mar 15 '13 at 03:36
0

We use the following:

.HtmlAttributes(new { id = "EligibleDate", tabindex = 2 })

Hope that helps.

Shad
  • 151
  • 1
  • 3
  • 4
0

[tabindex]="tabindex" in html kendo element

this.tabindex = 10; in ts or js

user19827350
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 26 '22 at 16:20
-1

Setting tabindex for kendoDropdownList:

$("#max_award_amount").data("kendoDropdownList").wrapper.attr("tabindex",4);
kishor parmar
  • 1
  • 1