Setting Focus to the First Kendo Control (DropDownList or Textbox)

[Steven]

We have a number of pages that execute a common javascript function that sets the first kendo control to have focus.  When the first control is a text box all browsers are setting focus when the page loads.  When the first control is a dropdownlist, IE works but Chrome and FireFox (FF) are not setting the focus to the dropdownlist.  Here is the javascript for the focus.

$(document).ready(function () {
    focusFirstElement(formId);
});
function focusFirstElement(formId) {
    $(formId).find('.editor-control:visible:enabled:not([readonly]):first').focus().select();
}

It seems that the dropdownlist input tag is styled to "display: none" which I could see then why Chrome and FF do not find the control with the current jquery selector (not sure why IE works).  Currently our solution is to have every page set the focus to the desired control, but we were looking for a common javascript to set the focus to first control that is enabled, visible, and not read only.

Any ideas?  Is this possible with the kendo controls?

[Peter Milchev]

Hello,

All Kendo controls have the CSS class k-widget (Common CSS classes). To focus the first DropDownList you could use the following code snippet: 

var firstKendoControl = $(".k-widget")[0];
if ($(firstKendoControl).hasClass("k-dropdown")) {
    var input = $(firstKendoControl).find("input")[0];
    var dropdown = $(input).data("kendoDropDownList");
    dropdown.focus();
}

Then if the first control is not a DropDown you could use your code.

Regards,
Peter Milchev
Telerik by Progress

[Thomas]

Code for a ComboBox (note that the input corresponding to the combobox is the second one)

 

var firstKendoControl = $(".k-widget")[0];

 if ($(firstKendoControl).hasClass("k-combobox")) {

var input = $(firstKendoControl).find("input")[1];

 var combobox = $(input).data("kendoComboBox");

combobox.focus();
}