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

Setting focus to an AutoComplete doesn't work

1 Answer 116 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
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

Sort by
0
Neli
Telerik team
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.
Tags
AutoComplete
Asked by
Joe
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or