1

I am trying to set the cursor on the textbox that has been set to a kendoAutoComplete, but the cursor does not show.

Using Kendo's AutoComplete basic demo I am running the following code in the Chrome Developer console, but the cursor is not showing.

$('#countries').focus()

When the code is run, I do see that the span around the input box does get the 'k-state-focused' class which changes the border color to gray, but that's all it does.

From what I can tell, the 'k-state-focused' css class doesn't hide the cursor. So not sure if Kendo is somehow intercepting the focus in JavaScript and not setting it, or because the textbox has a span around it, the focus is being hidden.

Andy T
  • 10,223
  • 5
  • 53
  • 95

2 Answers2

6

Instead of $('#countries').focus() do $('#countries').data("kendoAutoComplete").focus().

Due to Kendo UI decorations around HTML elements you should use AutoComplete focus.

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • Thank you that works. I had always figured that data-attributes were only used for simple text values. Didn't realize you could store objects as well. – Andy T Jun 17 '13 at 17:36
2

The first answer didn't work for me. It could be because I'm using UI for ASP.NET Core, but this solution did work:

$(document).ready(function () {
    setTimeout(function () {
        $("#myInputId").focus();
    });
});

This is the explanation from Telerik - "The AutoComplete widget is designed to persist the focus of the input when popup element is clicked. The select is raised between of the open->click->close chain and that is why we will need to use setTimeout function to focus other input."

Mominator
  • 47
  • 5