CODEWITHSUNDEEP
c#asp.net-mvcdrop-down-menutelerik-mvc
Cef
Cef

Reputation: 929

Kendo UI MVC DropDownList Focus For Filtering

I am using MVC Razor and Telerik Kendo MVC. I have a dropdownlst that I would like to automatically set focus on so that the user can immediately begin typing and filtering for the desired value. The ddl is:

@(Html.Kendo().DropDownList()
    .Name("ddlLocations")
    .Filter("contains")
    .BindTo(Model.Locations)
    .DataTextField("Text")
    .DataValueField("Value")
    .Events(events => events.Change("onChange"))
    .HtmlAttributes(new { style = "width:100%" })
    .Value(Model.Exception.LocationIDCouponTypeStatus)
)

I have a similar project in ASP.NET WebForms and what I did in Javascript is:

 var comboBox = $find("<%=ddl.ClientID %>");
 comboBox._inputDomElement.select();

This focused on the part of the control that tells it to start filtering when the user begins to type. It doesn't seem to be translating to the MVC version.

var comboBox = $("#ddlLocations").data("kendoDropDownList");
comboBox._inputDomElement.select();

Any ideas? Thanks in advance.

Upvotes: 1

Views: 3045

Answers (2)

Gene R
Gene R

Reputation: 3744

You need to open dropdownlist first:

.Events(p => p.DataBound("function(e){ this.open(); this.filterInput.focus(); }"))

Alternatives:

$(function(){
    var dd = $("#ddlLocations").data("kendoDropDownList");
    dd.open();
    dd.filterInput.focus();
});

or

.Events(p => p.DataBound("function(e){ setTimeout(function(){ this.open(); this.filterInput.focus(); }, 500); }"))

Upvotes: 2

Mario Garcia
Mario Garcia

Reputation: 643

Much easier than that, Kendo already has a focus() function, just do comboBox.focus()

Upvotes: 0

Related Questions