This is a migrated thread and some comments may be shown as answers.

Setting focus to an AutoComplete doesn't work

1 Answer 578 Views

AutoComplete

This is a migrated thread and some comments may be shown as answers.

Joe asked on 18 Sep 2017, 07:16 PM

I have a popup dialog (Using Kendo Window), and the first form field in this window form is an autocomplete. When the dialog opens, the control does not have focus until the user clicks in it, which I want to eliminate. I'd like to set the focus there, but it doesn;t seem to work.

@(Html.Kendo().Window()

.Name("polciyEdit")

.Title("Add New Master Policy")

.Visible(false)

.Draggable()

.Position(p => p.Top(150))

.Width(700)

.Modal(true)

.Content(@<text>

<div id="PolicyEdit">

<table style="width: 100%;">

<tr>

<td style="text-align: right">

@Html.Label("Client:")

</td>

<td>

@(Html.Kendo().AutoComplete()

.Name("addClientId")

.DataTextField("ClientName")

.Filter("contains")

.HtmlAttributes(new { style = "width: 100%", placeholder = "Client ID or Client DBA Name", tabindex = 1 })

.DataSource(s => s.Read("GetClientList", "Policy").ServerFiltering(false))

.Events(e => e.Select("clientSelected"))

)

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Doing Business As: ")

</td>

<td>

<span id="clientDBA"></span>

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Location Code: ")

</td>

<td>

@Html.Kendo().TextBox().Name("addLocCode").HtmlAttributes(new { style = "width: 100%;", tabindex = 2 })

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("WC State: ")

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("addWCState")

.DataValueField("Abbreviation")

.DataTextField("Abbreviation")

.BindTo(new USA().States)

.OptionLabel(" -- Select State -- ")

.HtmlAttributes(new { style = "width: 100%;", tabindex = 3 })

)

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Provider: ")

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("providerCode")

.DataValueField("RecordId")

.DataTextField("ProviderName")

.BindTo((IEnumerable)ViewData["providers"])

.OptionLabel("-- Select Provider --")

.HtmlAttributes(new { style = "width: 100%;", tabindex = 4 })

)

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Policy Id: ")

</td>

<td>

@Html.Kendo().TextBox().Name("addPolicyId").HtmlAttributes(new { style = "width: 100%;", tabindex = 5 })

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Effective Date: ")

</td>

<td>

@(Html.Kendo().DatePicker().Name("addEffDate").HtmlAttributes(new { style = "width: 100%", tabindex = 6 }))

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("Expiration Date: ")

</td>

<td>

@(Html.Kendo().DatePicker().Name("addExpDate").HtmlAttributes(new { style = "width: 100%", tabindex = 7 }))

</td>

</tr>

<tr>

<td style="text-align: right">

@Html.Label("PEO: ")

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("addPeo")

.DataValueField("Value")

.DataTextField("Text")

.OptionLabel("-- Select PEO --")

.BindTo(new List<SelectListItem>()

{

new SelectListItem() { Text = "10", Value = "10" },

new SelectListItem() { Text = "40", Value = "40" },

new SelectListItem() { Text = "60", Value = "60" }

})

.HtmlAttributes(new { style = "width: 100%;", tabindex = 8 })

)

</td>

</tr>

<tr><td colspan="2"><hr class="info"/></td></tr>

<tr>

<td colspan="2" style="text-align: right">

<a id="btnAddPolicy" role="button" class="k-button k-button-icontext k-primary k-grid-update" href="#" tabindex="9"><span class="k-icon k-i-check"></span>Update</a>

<a id="btnCancelAdd" role="button" class="k-button k-button-icontext k-grid-cancel" href="#" tabindex="10"><span class="k-icon k-i-cancel"></span>Cancel</a>

</td>

</tr>

</table>

</div>

</text>))

The code that opens the window is:

$("#addNewPolicy").click(function(e) {

e.preventDefault();

$("#polciyEdit").data("kendoWindow").open();

$("#addClientId").data("kendoAutoComplete").focus();

});

But the control still isn;t given focus unless the user clicks in the form field. So how do I programmatically set the focus to the first control (the autocomplete control) when the dialog opens?

1 Answer, 1 is accepted

answered on 19 Sep 2017, 12:39 PM

Hello Joe,

To have the focus on an input element after opening a Kendo Window, a subscription to the activate event is needed.

@(Html.Kendo().Window()

.Name("polciyEdit")

.Title("Add New Master Policy")

.Visible(false)

.Draggable()

.Position(p => p.Top(150))

.Width(700)

.Modal(true)

.Events(ev => ev.Activate("onActivate"))

.Content(@<text>

And in the activate event handler the AutoComplete widget is referenced and focus method is invoked.

function onActivate() {

var autocomplete = $("#addClientId").data("kendoAutoComplete");

autocomplete.focus();

}

Similar issues had been discussed in Kendo Forum, here is a link to such thread.
Example of an implementation could be found in the linked Dojo.

Regards,
Neli
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Setting focus to an AutoComplete doesn't work

1 Answer, 1 is accepted